• My Work
  • About Me
  • Say Hello

Kristy Kelly

User Experience Researcher

  • My Work
  • About Me
  • Say Hello

The Project

Product Design

As a new startup aimed at assisting high school students in their search for a college, the founders of Upperclassmen.co needed help designing their MVP. My team and I had three weeks to strategize and create a prototype.  

My primary contributions:  wireframing the low-fi prototype, usability testing and project management. 

Scroll down to see my process or view the wireframes and prototype.

 

The Approach

Getting to know our client

The founders of Upperclassmen.co came to us with a passionate vision, a business model and detailed research. Their main project goal was to obtain a clickable prototype to further test their concept and show to developers. Given our tight deadline, we decided to apply lean UX methods and move quickly through research into analysis, wireframing and prototyping.   

 

The Discovery

Personas and the competition

After reviewing the research and insights provided by our stakeholders, we performed some of our own online research and then created personas based on the assumptions we derived. We determined that there are two primary types of users for the website - the high school student searching for a college and the college student needing extra income. There were also two other invested parties - the parent of the high school student and the college Admissions department.

Next, we tested our assumptions through user surveys. We also performed a competitor audit to better understand the landscape. One surprising finding indicated a preference by students to connect via video chat.  

Personas
Personas
User Survey Questions Prep
User Survey Questions Prep
User Survey
User Survey
Survey Results
Survey Results
Online Research
Online Research
Competitor Heuristic Review
Competitor Heuristic Review
Personas User Survey Questions Prep User Survey Survey Results Online Research Competitor Heuristic Review

 

The Analysis

An informal, personal, dynamic engagement

All our users desired a means for the potential college student to obtain a personal insight into colleges that will ultimately aid in the college selection. This goal was in line with the business goal of differentiating from the competition. One surprising finding indicated a preference by students to connect via video chat.  

Intersection v 4.png

 

The Vision

A personal, reliable connection via a phone call  

Although the research indicated a preference for video chat, the stakeholders and design team collaboratively agreed to design for a phone call solution, with possible future expansion into video chat and/or instant messaging. A phone call would provide a quick, safe and reliable means to have an honest and in-depth conversation about a college. 

We brainstormed and created a mind map to start the ball rolling.

concept-map.png

 

The Requirements

Once we laid the groundwork, we conducted a requirements workshop with our stakeholders. We also created a high schooler scenario, sketched user flows and performed a task analysis for a complementary product. Involving our stakeholders in the process was crucial to creating the list of requirements for the MVP.

Given our lean approach, we decided to focus on the user flow for the customer, the high school student. Our goal was to provide the student with an easy process to:

  • Create an account
  • Search for a student at a particular college
  • Book a call
HS Scenario v3.png
Card Sort - Stakeholders.jpg
Features Sort Close up.jpg
Mentor Flow.jpg
high school flow.jpg
user flow - hs.png
Revised clarity flow analysis.jpg
HS Scenario v3.png Card Sort - Stakeholders.jpg Features Sort Close up.jpg Mentor Flow.jpg high school flow.jpg user flow - hs.png Revised clarity flow analysis.jpg

 

The Framework

Next, we held a design studio session which led to more detailed sketches, wireframes and a low-fidelity prototype.

Sketches and Wireframes

upper_design-studio-sketches.png
overview.jpg
wires on wall.JPG
1 Home Page - proto.png
2 Home Become Upper 1.png
3 Home Become Upper 2.png
5 Select Field - proto.png
4 Select College - proto.png
6 Select Interests.png
7 Sign Up.png
upper_design-studio-sketches.png overview.jpg wires on wall.JPG 1 Home Page - proto.png 2 Home Become Upper 1.png 3 Home Become Upper 2.png 5 Select Field - proto.png 4 Select College - proto.png 6 Select Interests.png 7 Sign Up.png

 

The Refinement

Click on the image below to watch an in-person usability test session.

 

Click on the image below to watch a remote usability test session.

Testing insights

Overall, our design tested well for usability.  Users liked its clean look and simple processes. The main critiques were regarding the lack of clarity for the navigation icons, which we revised with a flyout menu.    

Upperclassmen Revision Slides.001.png
Upperclassmen Revision Slides.002.png
replace.001.png
Upperclassmen Revision Slides.004.png
Upperclassmen Revision Slides.001.png Upperclassmen Revision Slides.002.png replace.001.png Upperclassmen Revision Slides.004.png

The Results

Along with the wireframes and a low-fidelity prototype, we were also able to create the first iteration of a high-fidelity prototype to help the stakeholders advance their business to the next level.  

Wireframes

Home Page.png
Enter College.png
3 Select Field - proto.png
4 Select Interests.png
Full List_Dash in.png
Full List_dash out.png
Sign Up.png
Book Call.png
confirmation.png
Home Page.png Enter College.png 3 Select Field - proto.png 4 Select Interests.png Full List_Dash in.png Full List_dash out.png Sign Up.png Book Call.png confirmation.png

Low-Fidelity Prototype

Your task: Find an Upperclassman named Jodi and book at call with her at 1pm.  

Click Here To View The Prototype

Hi-Fidelity Prototype

Click on image to view the prototype.