Mntr Web App Concept

My Role: Product Designer  •  Individual 

My Role: Product Designer  •  Individual 

Design Stack: Figma and Illustrator 

Design Stack: Figma and Illustrator 

Timeline: 4 Weeks  •  Spring 2020 

Timeline: 4 Weeks  •  Spring 2020 


About the Project

When I was a student deciding which career path to pursue, I had a challenging time finding someone to ask for advice with the various amount of resources online. I was curious to know how other students seek career guidance and if there is a better approach. 

When I was a student deciding which career path to pursue, I had a challenging time finding someone to ask for advice with the various amount of resources online. I was curious to know how other students seek career guidance and if there is a better approach. 

My key tasks: user interviews, affinity map, competitive analysis, user testing, prototyping

The Problem

The Problem

Based on the user interviews, college students have a challenging time finding a mentor who can provide specific advice and will invest time in guiding them towards their career aspirations. 

The Project Goal

The Project Goal

The goal of this project is to create a web application that provides college students with a meaningful mentorship experience, helping them connect with a mentor that best fits their needs and helps guide their journey towards professional development.


My Design Process

My Design Process

Keep scrolling to see my design process or click the button below.


What are the challenges that students face when seeking for career guidance?

I conducted a semi-structured interview with five college students to understand their needs and pain points in seeking career guidance. Most of the students had experience reaching out to industry professionals or career counselors. One student had experience giving advice to other students as a peer mentor. 

The major questions I asked were:

1.  How do you seek for career guidance or advice?

2.  What type of help are you looking for?

3.  What challenges did you face?

Here are the main pain points that students faced



What are the potential features based on the pain points uncovered?

I created an affinity map to group the insights into categories in order to determine potential features. This was also an opportunity for me to further understand their needs and gather insights from what was not explicitly mentioned.

Insights and Possible Features

  • Structured guidance to stay on track and acheive goals
  • Set defined roles for transparency and keep in contact
  • Create a more welcoming interaction for students who feel reluctant or intimidated when reaching out

How are similar services designed and how can Mntr differentiate?

From the user interviews and affinity map, I realized that most students had mentorship experience. I decided to further narrow the scope of my project to mentorship and conducted a competitive analysis to understand how other mentorship services are designed.

  • Competitor Strengths

All the competitors have mentors with professional experience and Cofolios provide mentors who were interns at well-known companies. LinkedIn showcases a personalized list of recommended mentors based on mentees' preferences. Facebook includes guided steps to encourage progress.

  • Competitor Weaknesses

It takes some time to select a mentor from both Facebook and Cofolios, forcing users to read through all the mentor bios. LinkedIn on the other hand is catered to tackle quick question requests. 

  • Opportunities for Mntr to Differentiate
  • Opportunities for Mntr to Differentiate

Mntr can differentiate from its competitors by implementing personalized mentor results based on mentee input along with a progress feature. It will cater to both long-term and short-term mentorship.


Main Features

Based on the insights from the affinity map, the personas, and competitive analysis, I further refined the features for the minimum viable product. 

1.   Personalized Mentor Results

Finding someone who can provide with specific advice may be challenging to find and current services make it difficult for users to filter out mentor results. A personalized mentor result can help Mentees to easily find a mentor based on their needs, availability, and commitment. This will help users feel more confident in reaching out to potential mentors and establish transparency in roles. 

2.  Mentorship Guides and Progress Bar

Some students didn't know exactly what to ask, so providing a recommended guide can help Mentees determine a category they'd like to improve on. A progress bar will also help Mentees stay on track and reach their goals.

3.  Message Inbox

From the user interview insight, one student mentioned losing track of the tasks that her mentor assigned to her due to her busy schedule. Incorporating messaging can help Mentees check-in with their mentor and share their progress. 


Ideating for Possible Solutions

I created several wireframes for the minimum viable product based on the features mentioned above and to quickly determine which layouts made the most sense. Then I conducted user testing on six participants and asked for their feedback.

For mentee profile and results, I went with Option A because the larger images felt more approachable. For the tasks page, I went with Option A because the one column list allows users to keep track of their tasks chronologically. 


Refining Solutions through User Testing

Based on the user feedback, I moved forward in creating the low fidelity wireframes and conducted user testing by observing the four participants' behaviors. 


Revisiting First Iteration

I revisited my first iteration and realized the colors were not accessible to those who are visually impaired. I used Stark's contrast checker find accessible colors to replace the current colors.


Proposed Solutions

After implementing more accessible colors, I moved forward in creating the second iteration.


Input Career Interests

Once the mentee creates an account, they answer questions on their career interests and what they need help on. The non-career related question can make the experience less intimidating. 


Connect with a Mentor 

Based on the information the mentee inputs, the mentee can check out mentor profiles, filter results, and select favorites before messaging their potential mentor.


Create a Guided Structure

After a mentee finds the right mentor, they create their own guided structure or use the recommended guide.

The messaging and notification feature will help the mentees check in with their mentor and keep in touch with the progress.

Next Steps

For the next steps I plan to improve the mentor filtering system so it's easier for users to find it. I mainly focused on the mentees' experiences, so I plan to interview people who are mentors to further understand their perspectives. In terms of the current features, is it best for mentees to see mentor availability upfront? 


I realized the importance of actively listening to the users' stories when trying to understand their perspectives, needs, and pain points. This project also helped refine my skills in visual design in terms of implementing accessible colors. There were also some areas I overlooked, such as the difference between mentoring and career coaching. This realization is something that I plan to address and explore in the third iteration.