Mentorify

-App For Connecting With Mentors

Overview

Mentorify is an app designed to connect mentees with mentors.

I aimed to solve issues in current mentorship platforms, such as information overload, long scrolling, and poorly organized elements by enhancing user experience.

View Prototype

Timeline

January - May 2024

Responsibilities

User Research, Interaction Design, Visual design, Prototyping

Deliverables

Interactive Figma High-Fidelity Prototypes

Project Type

Individual Project

Timeline

January 2024 – May 2024

Responsibilities

User Research, Interaction Design, Visual design, Prototyping

Deliverables

Interactive Figma High-Fidelity Prototypes

Project Type

Individual Project

Research

Analysis

Wireframes

Design Choices

Design

Reflection

Research

Problems in Existing Apps

Long Scroll

It takes too long to find proper information.

Text heavy page
Inconsistent icons and visual element
Does not have a proper information hierarchy

Text Heavy

Every section of the page is text-heavy
Disorganized elements
Important information is placed at the bottom, resulting in a lack of visual hierarchy.

Competitive Analysis

1. MentorCruise

The platform efficiently displays mentor information.
It simplifies the process for users to find appropriate guidance.

Clear representation of the information

2. ADPList

It utilizes minimalist designs and precise text for clarity.

2. ADPList

The website features a well-designed and efficient mentor profile.
It utilizes minimalist designs and precise text for clarity.

The website features a well-designed and efficient mentor profile.
It utilizes minimalist designs and precise text for clarity.

Personas

Analysis

Readable

Use information hierarchy to present relevant information clearly, rather than overwhelming users with excessive details.

Navigable

Include interactive features and organize elements in such a way that engages the users and is more interactive.

My goals for the project

User Stories

“As a student, my days are mostly filled with classes in the morning and study sessions in the evening.
I think the most important thing to achieve my educational and career goals is learning new skills and working hard!”

“I haven't had a formal mentorship experience yet, but I'm really interested in finding a mentor in the tech field.
An app that matches me with mentors based on my interests and career aspirations would be incredibly helpful.”

User Journey Map

User Journey Map of Mentorify

A student opens the app and Signs up or Logs in. Then, the student will be taken to the collection of Add any mentor to the list.

Once they add the mentors to their list, they can
Give a Request to the mentor and start a conversation
with them.

During this process, users go through an interface that has various interactions and animations, which will engage the users.

User Stories

User Journey Map of Mentorify

A student opens the app and Signs up or Logs in. Then, the student will be taken to the collection of Add any mentor to the list.

Once they add the mentors to their list, they can
Give a Request to the mentor and start a conversation
with them.

During this process, users go through an interface that has various interactions and animations, which will engage the users.

User Stories

A student opens the app and Signs up or Logs in. Then, the student will be taken to the collection of Add any mentor to the list.

Once they add the mentors to their list, they can
Give a Request to the mentor and start a conversation
with them.

During this process, users go through an interface that has various interactions and animations, which will engage the users.

User Journey Map of Mentorify

User Stories

A student opens the app and Signs up or Logs in. Then, the student will be taken to the collection of Add any mentor to the list.

Once they add the mentors to their list, they can
Give a Request to the mentor and start a conversation
with them.

During this process, users go through an interface that has various interactions and animations, which will engage the users.

User Journey Map of Mentorify

Wireframes

Paper Wireframe

The hand-drawn wireframes contain sketches of the home page, Mentor's page, saved list page, menu navigation, and potential animations.

Design Decisions

Card Reveal

This interaction was kept because the user does not have to go back to the Mentor's profile page while they are trying to make a final decision.
I wanted to keep the relevant and important information available to the users when they are making a decision.
I achieved it through the card reveal interaction.

Moodboard

I chose "Pastel" and "Soft" colors to set a welcoming, calming and positive tone.

Sky Blue
#E2EFFA

Warm Beige
#EBD6BC

Lavender
#E7E3FA

Typography and Style Guide

Text

Style 1

Style 2

Style 3

Roboto

Inria sans

Inter

Button Styles Used

Save

Request for Mentoring

Icons

Home

Saved List

Mentors

Chat

Profile

Interactions

Style Decision

I have created two styles to determine which choice would be most suitable. Since I wanted to establish a positive, gentle tone, I chose to go with the light theme.

Mentor Reveal

As the user swipes the Card, the Mentor's image will pop out of the circle a bit, and the Job title will be split around their image.

This will attract the users and grab their attention at the same time decreasing the cognitive load as every job sector has a different color.

Style Decision

I have created two styles to determine which choice would be most suitable. Since I wanted to establish a positive, gentle tone, I chose to go with the light theme.

Card Reveal

This interaction was kept because the user does not have to go back to the Mentor's profile page while they are trying to make a final decision.

I wanted to keep the relevant and important information available to the users when they are making a decision.

I achieved it through the card reveal interaction.

This interaction was kept because the user does not have to go back to the Mentor's profile page while they are trying to make a final decision.
I wanted to keep the relevant and important information available to the users when they are making a decision.
I achieved it through the card reveal interaction.

Designs

Final Designs

Designs

Card Swipe Interaction

This is where users can browse and find mentors.

The "saved card" features a micro-interaction.

Micro-Interaction

Adding the mentor to a list

Browsing Mentors.

This is where users can browse and find mentors.

Adding Mentor to the list.

A mentor can be added to the list after browsing.

Viewing the Saved List.

Swipe -> Reveals the short information about the mentor.

Giving Request to the Mentor.

Once the request is given to the mentor, Request Confirmation occus.

Reflection

Implementing interactive elements like swiping and micro-interactions was a valuable lesson in increasing user engagement. I realized how small details can significantly enhance an enjoyable, dynamic experience.

Implementing interactive elements like swiping and micro-interactions was a valuable lesson in increasing user engagement. I realized how small details can significantly enhance an enjoyable, dynamic experience.

Organizing information effectively through a strong visual hierarchy was crucial in improving readability and usability. This experience reinforced my understanding of how good layout design can help users find what they need quickly and easily.

Check Out More Projects Here!

Internship Experience

Mar 2024 - Aug 2024

iClerk

Internship Experience

Mar 2024 - Aug 2024

iClerk

Hackathon Project

Blobzz

Mar 2025 - 24 hrs

Hackathon Project

Blobzz

Mar 2025 - 24 hrs

Luna Flow

Hackathon Project

Mar 2024 - 24 hrs

Luna Flow

Hackathon Project

Mar 2024 - 24 hrs

Unbound

Gender Inclusive Shopping
Extension

Mar 2024 - Aug 2024

Unbound

Gender Inclusive Shopping
Extension

Mar 2024 - Aug 2024

Student recycling App

ReGreen

Mar 2024 - Aug 2024

Student recycling App

ReGreen

Mar 2024 - Aug 2024

Research

Research

Analysis

Wireframes

Design Choices

Design

Reflection

Research

Research

Problems in Existing Apps

Long Scroll

Text Heavy

Competitive Analysis

Competitive Analysis

1. MentorCruise

1. MentorCruise

2. ADPList

2. ADPList

Personas

Personas

Analysis

Readable

Readable

Navigable

Navigable

Include interactive features and organize elements in such a way that engages the users and is more interactive.

Include interactive features and organize elements in such a way that engages the users and is more interactive.

My goals for the project

My goals for the project

User Stories

User Stories

“As a student, my days are mostly filled with classes in the morning and study sessions in the evening. I think the most important thing to achieve my educational and career goals is learning new skills and working hard!”

“I haven't had a formal mentorship experience yet, but I'm really interested in finding a mentor in the tech field. An app that matches me with mentors based on my interests and career aspirations would be incredibly helpful.”

User Journey Map

User Stories

User Stories

User Stories

User Stories

Wireframes

Wireframes

Paper Wireframe

The hand-drawn wireframes contain sketches of the home page, Mentor's page, saved list page, menu navigation, and potential animations.

The hand-drawn wireframes contain sketches of the home page, Mentor's page, saved list page, menu navigation, and potential animations.

Design Decisions

Card Reveal

Moodboard

Moodboard

I chose "Pastel" and "Soft" colors to set a welcoming, calming and positive tone.

Sky Blue#E2EFFA

Warm Beige#EBD6BC

Lavender#E7E3FA

Typography and Style Guide

Text

Style 1

Style 2

Style 3

Roboto

Inria sans

Inter

Button Styles Used

Icons

Home

Saved List

Mentors

Chat

Profile

Interactions

Style Decision

I have created two styles to determine which choice would be most suitable. Since I wanted to establish a positive, gentle tone, I chose to go with the light theme.

Mentor Reveal

As the user swipes the Card, the Mentor's image will pop out of the circle a bit, and the Job title will be split around their image.

This will attract the users and grab their attention at the same time decreasing the cognitive load as every job sector has a different color.

Style Decision

I have created two styles to determine which choice would be most suitable. Since I wanted to establish a positive, gentle tone, I chose to go with the light theme.

Card Reveal

Designs

Final Designs

Designs

Card Swipe Interaction

This is where users can browse and find mentors.

“As a student, my days are mostly filled with classes in the morning and study sessions in the evening.
I think the most important thing to achieve my educational and career goals is learning new skills and working hard!”

“I haven't had a formal mentorship experience yet, but I'm really interested in finding a mentor in the tech field.
An app that matches me with mentors based on my interests and career aspirations would be incredibly helpful.”

Sky Blue
#E2EFFA

Warm Beige
#EBD6BC

Lavender
#E7E3FA