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

Competitive Analysis

Problems in Existing Apps

It takes too long to find proper information.

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

It takes too long to find proper information.

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

Long Scroll

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.

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

Inspirations

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

Wireframes

Paper Wireframe

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

Digital Wireframe

Initial Wireframe

After several iterations

Design Decisions

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

Initial Mockup

Initial Mockup Design

Here is the initial mockup that I designed. However, I am not satisfied with it because it feels too "typical" and may not effectively engage users.

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.

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.

Style Decision

The micro-interaction was feasible in Style 2, unlike in Style 1.
The swipe will reveal the short details of the person.

Interaction Decision

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

Designs

Card Swipe Interaction.

This is where users can browse and find mentors.

Adding Mentor Interaction.

A mentor can be added to the list after browsing.

Micro Interaction.

Swipe -> Reveals the short information about the mentor.

Request Interaction.

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!

Research

Research

Analysis

Wireframes

Design Choices

Design

Reflection

Research

Research

Competitive Analysis

Competitive Analysis

Problems in Existing Apps

Problems in Existing Apps

Long Scroll

Long Scroll

Text Heavy

Text Heavy

Inspirations

Inspirations

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

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.

Digital Wireframe

Digital Wireframe

Initial Wireframe

Initial Wireframe

After several iterations

After several iterations

Design Decisions

Design Decisions

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

Initial Mockup

Initial Mockup Design

Here is the initial mockup that I designed. However, I am not satisfied with it because it feels too "typical" and may not effectively engage users.

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.

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.

Sky Blue
#E2EFFA

Warm Beige
#EBD6BC

Lavender
#E7E3FA

The micro-interaction was feasible in Style 2, unlike in Style 1.
The swipe will reveal the short details of the person.