UI/UX
August 10, 2022

Career mentorship platform

Background information

College graduates share that they feel overwhelmed about transitioning from school to career. They don’t know where to find help or who to go to for support.

Task

Create an accessible career mentorship platform ( mobile app and its accompanying landing page)

  • Design Tool

    Figma

  • Project type

    Case study

Understanding the user

User research

I used surveying as a method of research because conducting physical interviews was a challenge due to financial and time limitations. Most respondents reported that it is always a challenge when someone just graduates does not really have a good campus on their from on because they don’t know where to find help or whom fresh graduates would need a platform to allow them connect with early-career mentors open and willing to work with them and improve if they had access to an easy-to-use tool to help guide them.

Understanding the user

User persona

user persona
mobile-app

Section One : Mobile App Design

ideation

Mobile App Sketching

I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on how the recent graduates can find and connect with mentors.

Paper wirerames
Design

Mobile App Digital wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the Mentor app. These designs focus on delivering personalized guidance to users to help how to find and connect with mentors.

Prototyping

Mobile App Lo-fi prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of finding a mentor, career paths, and career fields.
Lo-fi prototype
UI Design

Style Guide

styguide
UI Design

Mobile App Hi-fi Mockups

mobile app preview
Full preview
Prototyping

Mobile App Hi-fi Prototype

The high-fidelity prototype followed the same user flow as the low fidelity prototype, including design changes made after the usability study.

hi-fi prototype

Section two : Responsive landing page design

Ideation

Paper wireframes/Sketching

With the app designs completed, I started work on designing the responsive website. I kickstarted this by sketching on paper while keeping in mind the consistency of the app

website wireframes
Design

Digital wireframes

After completing the sketching, I created responsive digital wireframes and optimized them for different screen sizes and user needs.

digital-wireframes
UI Design

Hi-fi Mockups

mentor-mockup
contact