The Problem
People want to quickly find recipes they are able to make and fit their diet requirements
The Goal
Design a responsive website that provides clear information on recipes and can be used cross-device.
My Role
UX designer designing a responsive website for healthy recipes from conception to delivery.
Responsibilities
Conducting interviews, wireframing, prototyping, usability studies, Accounting for accessibility, Iterating on designs
Understanding the user
The initial assumption is that the users want to easily find recipes that fit their diet requirements which was also proved by the interviews. However, the research also found that the users would want to know more information about nutrition and the difficulties to make a certain dish. Base on 5 interviews, starting with User personas, I created user stories and problem statements for two different user segments.
Unclear Information
Users stated they want to know more about those recipes – including preparing time, equipments needs or nutrition details
Recipes for certain ingredients
Some busy ones look for recipes which just for the ingredients in their fridges.
Difficulty of the recipes
When the users find a recipe which looks nice, they also find the difficulty might be too high to make
Persona
Based on the interviews, two personas are created to represent different user segments. They differ in diet style, cooking skills, and the type of recipes they are looking for.
A busy, self disciplined health seeker
An enegetic work-out lady
A busy, self disciplined health seeker
An enegetic work-out lady
Starting the Design
Paper wireframes
I started wireframing with the Desktop first approach, as some interviewees stated that they prefer browsing videos and pictures and choosing the recipes to make. I started with desktop wireframes to ensure the information they care about are included, and then optimised the mobile version.
Digital Wireframes
and lo-fi Protoptye
As the initial design phase continued, I made sure the design was based on feedback and findings from the user research.
Rich in information was a key user needed to address in the designs, as well as the clear information structure.
Using the completed set of digital wireframes, I created a low-fidelity prototype, so the prototype could be used in a usability study.
Usability study and Mockups
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
- Users want to find recipes that fit their diet and ingredients they have
- They want to find recipes that they are able to make
Round 2 findings
- Users want to know the actual time to cook including time for preparing
Users want to keep or print out the recipes
Before & After the usability design
Early design only shows the cooking time. However, the users stated that they care more about the total time spent.
The share and printing button are added on every recipes page, so the users can keep it or print it out.
Accessibility Considerations
Icon
Use both icons and texts to let users find the functions they look for easily
Visual
Use consistent colours, size, font to let users can easily get familiar with the app
Images
Use images help all users better understand the designs.
Mockups
Based on the users’ feedback, the final version of mockups has been completed. In order to cater to different screen sizes, every element was adjusted so the users will view the website in an easier way.
