Mission: Mentor
Overview
Role
UI/UX Designer
Team Members
Zach Stevenot - Andrew Tang - Vicky Lin - Erin Naylor - Stephanie Urch
Mission Statement
Mission Mentor is an EdTech nonprofit founded by Harvard students building a free, virtual college counselor for high school students. Recommends scholarships and summer programs through eligibility matchmaking.
Goals
Design a mobile and desktop website
Design the users dashboard
Design the user onboarding process
Create a comprehensive design system
Tools
Figma, Trello, Zeplin, Notion, Google, Slack
Challenges & Solutions
Challenges
How to recommend a scholarship to a student in under a minute
Revamp the dashboard, database and landing page
Use multiple gradients in the design system
Create a mobile version of website
Solutions
Created a “Tinder match” feel to the recommend matches for intuitive matching process
Organized the database and created match criteria for filters
Made the landing page have a narrative feel, leading the user through process of their prod
Used the gradients for highlights and in overlays
Ideation
Landing Page Mini Onboarding
The user needed to the value in the Mission: Mentor website and the ease of which finding a scholarship match with a quick onboarding process matching them with scholarships based on interests and test scores in a few easy steps.
Dashboard Scholarship Cards
The recommended scholarships cards needed top priority on the dashboard, so that the users could quickly save, apply or remove for quick access to potential scholarship matches. Used the “Tinder Match” feel of liking and disliking potential matches for an intuitive matching process.
Color Pallet
The color pallet was chosen to be light and colorful and use gradients for highlights to attract a younger Gen Z audience to using the product.
Database
The database is designed to filter through the users profile and determine which scholarships have a greater acceptance rate. Which is represented by color green is highly likely, blue is a good chance and the pinkish-red is a low chance of acceptance, As well as having the brand blue representing not signed-in for match eligibility and gray for ineligible.
Fun Hover Interactions
I wanted the user to have some fun when using the website so I created some hover interactions for the scholarhsip cards with vector icons representing the subject.
Testing
Usability Testing - Dashboard Scholarship Cards
A/B Testing - Landing Page
I participated in a round of A/B testing with six of users to determine which landing page would work best with our users. We tested a more conventional landing page with a narritive style landing page and the users found the narrative style more inviting and playful which was our goal in designing the landing page.
