Main Goal
To design a responsive web app for recipes that meets the needs of its users and solves the problems they are facing with existing recipe apps.
Analyze
To begin, I looked at two competitor recipe apps currently on the market: Yummly and Supercook.
Yummly benefits in having a strong recommendation engine and a prominent online search presence (when looking for recipe websites and apps).
However, their Pro version can be off-putting as the paywall can often appear randomly. Additionally, there does not seem to be a way to substitute ingredients in a recipe or alter them in any way within the UI.
Supercook allows users to view only the recipes for which they already have ingredients (or ingredients that fit their diet). However, their UI simply directs users to other websites where recipes are hosted. The user has to constantly adjust between various recipe website UIs.
Discover User Needs
In order to define user needs, I conducted a survey with a pool of friends and colleagues. Overall, my research found the following key points:
- Replacement options for vegan foods would be useful. This makes me think having a substation option for every ingredient would be a useful feature
- Personal stories, ads, and other content that hide the recipe instructions are frustrating users. Here’s a quote that showed one user’s persistence in dealing with this issue to get their task done:
“It can be annoying but I still tend to use websites for finding recipes
unless it's really really hard to find the actual recipe.”
Reviewing this feedback allowed me to create three unique user personas...
Ideate
Via the “Crazy 8s” method, I began drawing solutions on paper. Using the Marvel app, I created a paper prototype and completed a usability test.
These drawings were then brought into Adobe XD where I drafted low fidelity digital wireframes based on the user feedback from the test.
Once my wireframes were laid out, I moved on to create a mood board for the overall look and feel I wanted to communicate with this app.I wanted to focus on clean imagery and foods that are easy for anyone to make that look elevated.
I continued improving my wireframes into the mid-fidelity category by adding images and text, along with initial ideas for colors and button styles.
Throughout the wireframe processes, I sought feedback in various ways from my peers, including an A/B preference test to decide on the best home screen layout.
The test concluded that the second screen was more appealing as it focused the user’s attention on one main recipe and freed up space for a rating.
I then worked to ensure that each screen can be displayed at any screen size by creating multiple break points.
Each screen has been designed to be optimized on mobile and desktop devices for the best experience.
Create
The next step in the process was to solidify my design choices.
The style guide I created to do so lists common values for colors, shadows, and other measurements. It also defines common headings and other type styles.
The style guide I created to do so lists common values for colors, shadows, and other measurements. It also defines common headings and other type styles.
Present & Reflect
Overall, I am quite pleased with my work throughout this project. I was able to successfully research user frustrations and act on them accordingly, all while building skills in responsive UI/UX design. Description
