christina-wocintechchat-com-UTw3j_aoIKM-

MentorBox

Case study

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

jenny-ueberberg-brfcpBfCebY-unsplash.jpg
avel-chuklanov-DUmFLtMeAbQ-unsplash.jpg
Group 65.png

Discover

Problem space.

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.

charles-deluvio-Lks7vei-eAg-unsplash.jpg

Design question.

I developed a How Might We question to help me define a problem to focus on when working on this project.

Setting objectives.

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:

Frame 27.jpg

Define

User persona.

Based on the interviewees' pain points, motivations and behaviours, I created a persona to better understand my users' needs and expectations.

Persona.png

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.

Map.png

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.

Flow.png

Ideate

Sketching.

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.

Sketch.png

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.

Before.png

Test

Usability testing.

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.

Tasks

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.

Matrix.png

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.

Implement

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.

Screen Shot 2021-03-17 at 8.38.06 PM.png

Brand colours

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.                             

Group 45.png
Group 46.png
Group 47.png

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.

Wordmark.png
Black.png

Typography

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.

Group 52.png

UI Library.

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.

Components MentorBox.jpg

Final experience.

Finishing up the design process, I created a final prototype where the user searches for a mentor.

Group 61.png
Group 62.png
Group 63.png

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.

Communicating the value proposition.

To reach the target audience, I created a marketing website for desktop and mobile. It will help to attract my users and persuade them to download the MentorBox app.

multiple-devices-mockup-scene@2x-5.png

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.

workspace-mockup-scene@2x.png

Reflect

Future thinking.

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.

HMW

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?

quote 2.png

Learning alone can be difficult because you have all these questions and there is not enough feedback.

- Interviewee

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.