UX/UI Case Study

Yumrecipes:
recipe website concept

This project’s focus was on providing a personalised and accessible experience by building an intuitive interface targeting users with diverse dietary restrictions and preferences.

Project duration

9 weeks / 40+ screens

Tools used

Focus group insights​

To fully understand the problem, I have started off by conducting initial research by asking a group of individuals what they like and dislike when they look for recipes online.

Main takeaways

Further secondary research

Target audience insights:

Competitor analysis summary

While the most popular recipe websites provide a variety of features for users, they still pose usability issues and tend to not cater to users with dietary restrictions.

Additional findings

+10 findings

Problem

Recipe websites often lack the balance between simplicity and user-friendliness as users may find themselves overwhelmed by complex interfaces, lengthy ingredient lists, and convoluted cooking instructions.

Moreover, these platforms often fall short in catering to individuals with dietary preferences, such as vegetarians, vegans, or those following gluten-free, keto, or paleo diets.

Solution

This project aims to optimise the way users with specific dietary needs discover new recipes by presenting a streamlined and user-friendly platform. Recognising the challenges faced by individuals following various diets and dietary restrictions, my goal was to create a seamless solution that simplifies the recipe discovery process.

Personas & User stories summary

Scarlett Miller

Scarlett is a 32-year-old blogger and influencer from Poole that lives alone with her pets. She is vegan and wishes to lose weight by following a healthy plant-based diet plan. Scarlett also writes blogs about different vegan related news and diets.

Rober Johnson

Robert is 22-year-old a university student that recently moved out of his parents’ home. He is frugal and does not have a job at the moment. Robert is not particularly interested in cooking, but he needs to learn how to cook for himself without affecting his expenses. He will be looking for quick, easy, and cheap recipes.

Amy Chaya

Amy is a 46-year-old nurse, happily married, living her husband and two kids. She enjoys making food for her family and loves trying new recipes. She recently found out her youngest daughter has a gluten sensitivity and must now adjust her cooking recipes and cooking methods.

Tony Smith

Tony is a 55-year-old tennis coach. He recently got divorced and moved into a new apartment. He does not use the internet too often and is a quite impatient individual. He is not very likely to spend too much time on a page if he does not find what he is looking for quickly enough. Tony needs to find quick and easy recipes.

+ 2 personas

User scenario

Environment

Looking for recipes online is usually a task you do from home either before you go grocery shopping or before you start planning what to cook. The younger audience will most likely be using their phones or tables to both search for recipes and use the recipe’s instructions, but older users could use their computers to search on the website and wish to print the recipe afterwards.

Mental states

Users will be coming on the website for information and their moods may vary depending on their lifestyles, needs, environments etc. in the sense that some may be excited/curious/happy to browse the site for suitable recipes while other users may be coming to the site hungry and/or in a rush to find a quick recipe when they are out of ideas.

Brainstorming

Sitemap

User flow

Sketches

Desktop

Mobile

Low-fi wireframes​

Desktop

Mobile

Moodboard

Style guide

User testing #1

Method

Five testers were asked to participate in think-aloud sessions in order to evaluate the prototype in both mobile and desktop versions.

Before the study, participants were briefed on the purpose and details of the prototype, and were encouraged to be critical, with a reminder that there were no right or wrong answers.

Throughout the study, their actions and comments were observed and documented.

Results

The interviews found the initial design to be overwhelmingly successful, as they were not only able to easily navigate the site and effortlessly find the information they were looking for, but they also found the design and layout appealing and fitting to the subject. Regarding the features, they commented on how the site combined features from all competitors, in a package which they found more aesthetically pleasing and easy to navigate.

Participants also made recommendations for improvement regarding a few functionality aspects such as buttons. Lastly, it was observed that some aspects of the website weren’t noticed.

Iteration

Before

After

+4 screens

User testing #2

Method

The same method was applied a second time in order to test the changes implemented, build upon previous findings and address any new observations or conflicts that came up with the introduction of the high-fidelity prototypes.

Results

The second round of interviews led to the conclusion that the revised design satisfied all the participants’ expectations by maintaining an aesthetic that is appealing and delivering an experience which is effortless and featured increased visibility on key navigation-features.

Conclusion

With the use of the design thinking methodology, I successfully crafted a product that not only met the needs of identified personas but also resonated with potential future users. Testers found the product to be aesthetically pleasing, accessible, intuitive, and easy to navigate. The efficient navigation, highlighted buttons, and readability ensured users quickly reached their goals. The clean, friendly interface and color theme inspired trust and encouraged users to explore beyond the front page.

Notably, testers highlighted the unique aspects of the project compared to existing recipe websites, praising its combination of competitors’ features in a modern and user-friendly interface. Overall, the product stands out in the market, addressing a gap and providing a positive user experience, positioning it well for development into a fully functional website.

What I learned

What I would do differently

Thank you for reading!

Diana Cristina Iliescu