Project Summary
June 2021
As a part of General Assembly’s UX Design course curriculum, I designed a high-fidelity prototype for a mobile app I called RecipeSaver. I selected cooking as my topic since it is one of my hobbies, and I have yet to find a cooking-related app I truly like. I have several family members and friends who enjoy cooking as well, 4 of whom I interviewed for this project.
Deliverable
High-fidelity prototype
Program
Figma
Certificate
UX Design - General Assembly
Remote 40 hours
Process
01. Empathize
Methodology
User interviews
Subjects
n = 4
Demographics
Age range: 25-60 | Gender: Female | Residence: Seattle, NYC | Race/Ethnicity: White/Caucasian, Asian
I learned…
not to ask leading questions.
to take detailed notes.
not to jump to conclusions.
02. Define
Identify Goals
Using interview notes, I identified the subjects’ wants, needs and frustrations and formulated a problem statement. We learned how to create an affinity map, but for this project I just reviewed my notes.
Create a Persona
The persona represents the average user of the product. I created a user story and scenario based on information gleaned from interviews.
Prioritize Features
Using interview data, I identified and categorized desired features on a matrix of low to high impact vs. cost/time.
Chart User Flow
I charted each step the user would take to complete one specific task: saving a recipe found on a website.
I learned…
to identify my assumptions.
if I’m proven wrong, I’m doing my job right!
03. Ideate
Sketch
Sketched each screen a user would see in the process of completing one task: user onboarding. Solicited feedback from teammates.
Wireframe
Used Figma to create a basic black/white/grey V1 of some key screens the user would interact with as part of the onboarding and recipe saving process.
I learned…
I need to sketch! It turns out I cannot visualize and memorize every screen.
04. Prototype
Low Fidelity Prototype
Used Figma to create a black/white/grey V2, clickable prototype including icons, minimal images, and copy.
I learned…
to focus on utility, not on perfecting the graphic design at this stage.
05. Test
Define Test Goals
01. Users will be able to make a new account in less than 2 minutes with no more than 1 error.
02. Users will search for and save a recipe within 1 minute with no more than 1 error.
.03 Users will find the recipe they saved within 8 seconds with no more than 1 error.
Remote Usability Test
Used Maze to set up a usability test for 5 users, with 3 tasks:
01. Complete the onboarding steps to create a new account.
02. You are planning to host brunch at your house next weekend. Search for a brunch recipe and save it for later.
.03 Where would you expect to find the recipe you saved?
I learned…
to use easily recognizable icons and titles.
less is more!
06. Iterate
Analyze Test Results
Search bar was too small. One user scrolled past it and initially had trouble finding it.
Missing a back button or interaction to return to landing page from search bar.
Ideate, Prototype…
Enlarged search bar and hero. Made sure to include interaction to return to landing page from search bar.
Test…Again!
During this course, we did not have time to do another formal test. However, 2 users ran through the tasks again for me.
High-Fidelity Prototype
Finished adding images and adjusting spacing, copy and colors. Prepared to demonstrate Log In, recipe save, and recipe access to the GA class.
I learned…
to embrace the revisions, and to not expect perfection!