HEALTHY COOKING TOOL
The product:
heaAPP is an app and responsive website, that helps people learn how to cook healthier meals. heaAPP main goal is to make learning to cook healthy meals easy and interactive.
Project duration:
June 2022 to August 2022 (It is a fictitious project for Google UX Design Certificate studies)
The problem:
People all around the world like fast and unhealthy food, that negatively affects their health. Various recipes is placed all over the internet and it is hard to filter healthiest and easiest to cook.
The goal:
heaAPP main goal is to put all best recipes and articles in one platform and add some “game features” that makes using the app even more attractive.
My role:
UX designer leading the whole website design.
My responsibilities:
Conducting interviews, paper and digital wireframing, prototyping (both low and high fidelity), conducting usability studies, making mockups, accounting for accessibility, iterating on design and responsive design.
User research: summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that people would love to have an opportunity to have healthy recipes and articles on healthy lifestyle in one place as there are many good recipes and articles all over the internet, and it is hard to choose from.
After user interviews, I came up with two different personas:
UNDERSTANDING THE USER
I analyzed 2 direct and 2 indirect competitors. I wanted to know what features and value propositions they have. I also took into account their user flow, navigation, brand identity, tone and descriptiveness. Seeing their strengths and weaknesses helped me creating heaAPP website.
My goal was to put all the essential things to the home screen and make the key elements noticeable. Using Crazy Eights exercise tried various layouts before my final view.
User research. Personas. Problem statements. Competitive audit. Ideation
Competitive audit
Ideation
STARTING THE DESIGN
Digital wireframes
My goal was to put all the essential info on the home page. Website description, attractive hero image, recipes and articles.
Digital wireframes. Low-fidelity prototype. Usability studies
Some screens from low-fidelity app prototype
Usability study: parameters
Study type:
Unmoderated usability study
Location:
Lithuania, remote
Participants:
5 participants
Length:
30 minutes
Usability study: findings
Finding #1:
User think that Healthy Cooking Habit Level should be presented more clearly.
Finding #2:
Users wanted filtering option.
Finding #3:
Users were not sure if videos and shopping list option is necessary in such an app.
REFINING THE DESIGN
Mockups. High-fidelity prototype. Accessibility
Mockups for website
According to potential users and their thoughts from usability study, Videos and Shopping List were not necessary, so I decided to make website neat and simple and removed these sections. Included description about levels in that menu part. I also change the design a little bit.
Mockup before usability study
Mockup after usability study
Website mockups
High-fidelity prototype
Accessibility considerations
Headings with different sized text for clear visual hierarchy.
High contrast colors to help people with visual impairments.
RESPONSIVE DESIGN
Information architecture. Responsive design.
Responsive design
The main attention in the heaAPP is to recipes part. The main goal was that everyone could find their recipes according the day time and other priorities.
The main design was adapted to various screen sizes. Hamburger menu and bottom menu with icons were included in tablet and phone layout.
Sitemap
Desktop
Tablet
Phone
TAKEAWAYS
Impact:
My target users shared that the design was intuitive to navigate through and demonstrated clear visual hierarchy.
What I learned:
Users wants to reach main site functions in different ways so my website got matrix model view. Even small changes could led to huge usability improvement and I should always keep in my my potential users needs and possible pain points.
zbliujute@gmail.com
