About: This is a hackathon submission for the PoweringSTEMHacks 2022. The theme of this hackathon was "Medical Innovation".
Project duration: December 29, 2022 – January 2, 2023 (5 days)
Project Overview
The problem:
People may want/need to start diets, whether that be due to personal health reasons or prescribed by a doctor for upcoming medical treatments. Regardless of reasoning, it can be difficult to find a diet-specific recipe page.
The solution:
Diet Helper, as the name suggests, helps people when they are on a diet, regardless of it being medically-prescribed or for personal health reasons. This web app allows the user to discover multiple recipes for certain diets, all in one place! They can also restrict certain ingredients to their liking.
Team:
1 Back-End Developer
1 Designer
1 Front-End Developer
1 Researcher
My role:
UX Designer
My responsibilities:
Conducting interviews and competitive analysis
Paper wireframing
User Research
I conducted multiple interviews to understand the users and their needs when looking through a recipe web-app.
Some initial assumptions I made was that the primary user group looking for diet recipes are cooking enthusiast, people going on diets, or diet-prescribed patients.
Interview questions asked:
How often do you cook? When you do, do you cook food you are familiar with or look for new recipes?
Have you ever been on a diet? If so, why?
What challenges do you face finding or reading recipes? How does it make you feel?
Is there any way in which you feel these challenges could be resolved?
Would you prefer watching a video or reading recipes to make the food? Why?
Major insights after interview:
▶️ Most users look for recipes only when they have free time, otherwise, they cook food they are already familiar with.
▶️ Most users prefer video instructions if the recipe is complex, but written instructions if the recipe is easy.
Discovered pain points:
⛔ Users need to use external sources to convert ingredient measurements from one unit to another.
⛔ There are usually no ingredient restriction section within the filters of recipe website.
⛔ It is inconvenient when ingredients are shown after users click into the recipe, as there could be a certain ingredient they do not have or are unable/unwilling to eat.
Paper Wireframes
Some paper wireframes were drafted for the homepage and recipe page. This helped the team discuss what elements are crucial to include in the web app, both to address the users pain point and to see whether the front-end and back-end developers would have enough time and resource to produce the product.
Stars were used to mark the desired elements that would be used in the web app.
For the homepage, I tried to prioritize ingredient restrictions and instant diet choices. For the recipe page, I made sure to include an ingredient unit converter, so users can choose what units they work in (ex. grams, cups).
Design Hand off
After completing my responsibilities, I handed off the wireframes to the developers. We were able to create our first functional web app within the span of five days.
Takeaways
As my first ever hackathon project, this was an exhilarating experience. I believe that the concept of Diet Helper could greatly benefit the health field within society, as doctors can direct patients to an easily accessible diet recipe web app in preparations of medical treatment or for health reasons. Throughout this process, I learned how important team time management skills are. I felt that most of my steps were rushed because I was unsure of how much time the developers would need to produce the web app. I would have liked to give myself more time. Regardless, I believe that the web app addresses the problem and user pain points. While Diet Helper may be on its first iteration, it is clear that we directed our designs to optimize most user experiences.
Thank you for your time looking through my web design of Diet Helper!
If you would like to get in touch, feel free to reach out.