top of page
rm355-pf-s73-card-device-03-google-mockup.jpg

HeathManic

December 2022

HealthManic is a healthy food recipe website located in Pakistan. HealthManic strives to provide all healthy dishes recipe in video and written format. They offer a wide spectrum of screen types. HealthManic targets customers like students studying abroad and young adults who lack the knowledge of how to cook healthy food.

Role

UX designer designing a responsive website for HealthManic from conception to delivery.

Target Audience

Students Studying Abroad & Young Adults

Challenge

Students studying abroad and young adults who lack the knowledge of how to cook healthy food.

Goal

Design a website for social good to teach people how to cook healthy food at home.

User Research

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research about students studying abroad and young adults who lack the knowledge of how to cook healthy food.

This user group confirmed initial assumptions about HealthManic customers, but research also revealed that time was not the only factor limiting users from learning cooking. Other user problems included obligations, interests, or challenges that make it difficult to get knowledge of cooking healthy food.

Personas

Problem Statement

Ali is an engineering Student who needs to learn how to cook healthy diet because he gets sick after eating unhealthy outside food.

Screen Shot 2022-12-09 at 4.23.42 PM.png
Screen Shot 2022-12-09 at 4.24.11 PM.png
Personas

Problem Statement

Aqsa is a doctor who needs to maintain healthy diet because she is a doctor and have a very busy schedule.

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

Screen Shot 2022-12-09 at 4.28.54 PM.png
Screen Shot 2022-12-09 at 4.28.33 PM.png
Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low- fidelity prototype. The primary user flow I connected was selecting a dish and watching and downloading the recipe, so the prototype could be used in a usability study.

High-Fidelity
Prototype

The final high-fidelity prototype presented cleaner user flows for for finding a dish and following its recipe to cook food. It also met user needs for video option while cooking as well.

Screen Shot 2022-12-09 at 4.26.57 PM.png

Usability Study: Parameters

Study Type

Unmoderated Usability Study

Participants

3 Participants

Location

Lahore, Pakistan

Length

30-60 Minutes

Usability Study: Findings

1

Video Feature

User want video feature for the recipe in order to cook smoothly.

2

Download Option

User want recipe download option.

3

Direct Video Access

User want direct access to watch video on website rather than YouTube link.

Results

Early designs allowed for some customization, but after the usability studies, I added options to watch recipe videos while cooking the relevant dish. I also revised the design so users can download PDF and take screenshot of the recipe.
The second usability study revealed that user wanted direct access to watch video on website rather than YouTube link, so I added video on the item rather than image.
Screen Shot 2022-12-09 at 4.25.17 PM.png
Screen Shot 2022-12-09 at 4.26.17 PM.png
Screen Shot 2022-12-09 at 4.25.56 PM.png

Accessibility Considerations

1

Used icons to
help make
navigation easier.

2

Used detailed imagery for recipes to help all users better understand the designs.

3

Provided access to users who are vision impaired by adding video feature through which they can easily listen recipes.

Screen Shot 2022-12-23 at 5.21.22 AM.png
Site Map

With the website designs completed, I started work on designing the responsive mobile website. I used the HealthManic sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Screen Shot 2022-12-23 at 3.02.23 AM.png
Screen Shot 2022-12-23 at 3.04.36 AM.png
Responsive Designs

The designs for screen size variation included mobile, tablet, and desktop. I Optimized the designs to fit specific user needs of each device and screen size.

Impact

The website makes users feel like HealthManic really thinks about how to meet their needs.
One quote from peer feedback:

“Wow. I can watch recipe easily while cooking”

Conclusion

While designing the HealthManic website, I learned that the first ideas for the website are only the beginning of the process. Usability studies and peer feedback which influence each iteration of the website’s designs.

Screen Shot 2022-12-23 at 3.05.59 AM.png

Next Steps

1

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed or still need to be addressed.

2

Conduct more user research to determine any change needed to upgrade design.

3

Conduct more user research to determine any new areas of need.

bottom of page