UX/UI Designer, UX Researcher | 10 weeks (2021) | iOS
MentorBox is an application designed to connect independent learners who go through a career transition with experienced mentors to find support and guidance on their learning journey.
Tools: Figma, Sketch, InVision
Nowadays, more and more people trying to make a career transition, decide to learn new professional skills independently instead of attending classes. However, as self learners meet obstacles on their learning journey, it can be frustrating and often too difficult to deal with them alone. As a result, many learners eventually quit their career transition when they can’t find someone who can help.
I developed a How Might We question to help me define a problem to focus on when working on this project.
The project's goal was to support people who decided to change their career and chose a path of self education. By doing that, I wanted to alleviate the pressure of such challenging experience as career transition. If the project is successful, more people can find a job in the field they love, and as a result, the world will have more professionals with unique backgrounds.
Gathering existing data.
According to Inside Higher ED article, college and university enrollments in the U.S. have dropped the past eight straight years. Over the same period, through 2018, total cumulative enrollments in online courses grew to 101 million.
Interviewing real people.
The purpose of the research was to find out what self learners find difficult when it comes to self educating. Also, it was crucial to know if they would use such an option as connecting with a mentor when they have struggles learning. By knowing that, I could create a better experience for people who aspire to transform their career. As a result of the interview process, 3 different themes came to my attention:
Based on the interviewees' pain points, motivations and behaviours, I created a persona to better understand my users' needs and expectations.
Understanding the journey.
The experience map of my persona helped me visualize the experience of learning a new skill as a self-learner and all the phases from the start to the end. This helped me empathize with the pain points and frustrations of my users even more.
Defining the task flow.
After creating the experience map, I started generating user stories and organizing them into epics. Based on the users' feedback saying how difficult it is to find someone with experience who would be able to help, I chose to focus on the task of searching for a mentor.
After exploring different interface layouts that have similar functionality to my task flow, I started sketching potential interfaces of my main screens. After comparing the ideas of the layouts, I chose the most promising and the ones I wanted to take to the next step - creating low fidelity wireframes.
Low fidelity prototype.
After selecting a few sketches, I translated them into low fidelity wireframes to assemble an interactive prototype to move onto the next stage - usability testing of the product.
User testing is a great way to find out what real people find difficult to accomplish in the design and to locate usability issues at early stages. For this reason, after creating my low fidelity prototype I conducted 2 iterations of usability testing with 10 different people - 5 per each round. All the participants were asked to complete 6 tasks as a part of the core task flow - searching for a mentor.
01. Find a search button to start searching for a keyword
02. Sort the search results by “Highest rated”
03. Open mentor’s profile with the highest rating
04. Swipe left to open the next mentor’s profile
05. See all reviews about the mentor
06. Save the mentor and go to the “Saved” page
Testing sessions outcome
Even though most of the participants were able to complete the tasks required, some of the steps were too confusing. The biggest frustrations for users were:
01. No icon labels on the tab bar. Adding the labels was number one priority fix after the usability testing.
02. No option to sort reviews. Some users found it inconvenient to not being able to sort mentors' reviews by different criteria.
03. No option to sort mentors by location. The testing showed that people want to be able to meet mentors offline, for that reason they felt like an option to sort by location is missing.
04. Key skills are not highlighted. People expressed thoughts that key skills are the most important information about a mentor. For this reason they should be highlighted and clickable.
05. Swiping option between mentors is not obvious. Most users were frustrated about the swiping feature as it was unclear there was such option. This issue can be solved with an onboarding process where the user would be shown how to use all the features of the app. At this time I decided to leave this feedback without implementing a solution as it is just one of the options to switch between mentors and it does not affect the overall experience.
Based on the feedback received I created a prioritization matrix to show the sequence of how important it is to fix each issue. Green shows the changes that were made.
With the changes implemented to my low fidelity prototype, I was ready to move onto the next stage which is developing the visual identity of the brand.
Creating a visual identity.
Since the design solution chosen is dedicated to education and improving as a professional, the visual representation should follow this mood. I wanted the feel of the app to be clean, fresh, modern, minimalist, simple and connected.
Keeping the educational theme in mind, I decided to go with black&white colour palette as it creates a contemporary, minimalist look. To add some vibrancy, I decided to use a nice, fresh green colour for CTA.
Logo and wordmark
To match the modern feeling of the app, I chose Avalon typeface for the wordmark as it complements the logo, creating a bold, edgy look.
When deciding on a typeface, I chose SF Pro Text for a few reasons:
It is a standard iOS typeface that is recommended by Apple Human Interface Guidelines;
It is optimized for iOS devices and looks familiar to the users;
It creates a bold, sleek look that matches the feeling of the app.
I then translated the branding into the visual design of the app's interface and created a UI library with all the components, fonts and colours used in it.
Finishing up the design process, I created a final prototype where the user searches for a mentor.
01. Search for mentors that are experts in the industry you are learning.
02. Get familiar with the work they've accomplished.
03. See what other people have said about a mentor in the review section.
04. Save mentors that seem like a good fit.
Beyond mobile experience.
As some users prefer tablets for video calls, I decided to translate the app onto iPadOS which creates the same experience on a larger screen.
When I have more time, I will definitely explore developing more features such as creating a community of self learners to make people feel less lonely in this process, continuing testing and iterating as "design is never done". I want to develop the booking flow and the tabs that weren't designed so far as they are not a part of the searching flow. Another feature I want to add is an onboarding process what will emphasize all the functions of the app more clearly. In general, this project has a lot of potential to become a very useful tool for all people who want to grow professionally.
Take outs & learnings.
Test early & often
The user testing process showed that when a product gets tested with real people as often as possible, it helps discover a lot of usability issues at early stages. Also, people often suggest features that alleviate their pain points better, which brings more value to a product. I found the testing process the most beneficial and inspiring.
Follow design system
When designing the app, I learned how important it is to create a design system first as it simplifies the process significantly. With all the components and styles created before actually starting designing, it makes the process clean and organized and allows to achieve better results and a more trustworthy product.
Critique & feedback
Asking for feedback was one of the practices I had throughout the design process. I found it extremely helpful as it brought a lot of fresh ideas on how to improve the application. It also helped me develop my own judgment on how to sort out the feedback I receive and apply the most important one to my design.
How might we connect independent learners who are going through a career transition with experienced mentors in order to help them on their learning journey?
Learning alone can be difficult because you have all these questions and there is not enough feedback.
Usability testing was one of the most exciting parts of the design process for me, as it allowed to see how real people interacted with the prototype discovering areas for improvement.