top of page

Sautéed Mushroom 

Sautéed Mushroom is a website catering to individuals of all ages, providing accessible and healthy recipes for those interested in cooking with fresh and nutritious ingredients. With a wealth of tutorials and ideas available, Sautéed Mushroom caters to a diverse audience of cooking enthusiasts looking to experiment in the kitchen.

Project Overview

Product

Sautéed Mushroom is a website that provides a variety of easy and healthy recipe tutorials for food enthusiasts of all ages. The website is designed to be responsive, ensuring that it operates seamlessly and provides a user-friendly experience. The broad audience base includes individuals who enjoy experimenting with cooking and eating nutritious foods. Visitors to Sautéed Mushroom can explore recipes and discover new ideas for creating flavorful, delicious, and healthier meals for themselves and their families.

Project Duration

Nov 2023 - Present

Tablet-HomePage1.png
Mobile home page1.png
Home Page - 1 – 1.png
The Problem

There are numerous food recipe websites and blogs already available. Why another website one might ask. The available websites usually do not have video tutorials for all the recipes. Recipes are usually unhealthy and complicated. The available websites are also cluttered, not intuitive and difficult to navigate for older people.

The Goal:

Design a responsive website offering healthy and easy recipe tutorials with easy navigation.

My Role

UX UI designer in designing the responsive website from concept to delivery.

Responsibilities:

Conducting user researches, storyboards, low-fidelity wireframes and prototypes, Hi-fidelity mockups and prototype, conducting usability studies, iterating on designs and accounting for accessibility.

Understanding the User

User Research - Summary

Based on primary research conducted on the internet, the primary user group for the product being evaluated are students and young families who are looking to incorporate easy and healthy cooking into their daily routines. An empathy map was created to better understand the mindset and needs of this user group.

Initially designed for students and young families, my app evolved to cater to anyone interested in healthy eating. I found that most available websites are cluttered and lack video tutorials for recipes. With limited options, my app aims to fill the gap.

User Research - Pain Points

Video Tutorials

Many websites lack video tutorials for their recipes, making it more difficult for users to understand the cooking process.

1

Cluttered Websites

Websites often suffer from an excess of unnecessary information and advertisements, leading to a cluttered and overwhelming experience for users.

2

Serving Size

Many online recipes lack the flexibility of adjusting serving sizes.

3

Persona : Ashish Mathew
Persona - Ashish.png

Problem statement:
Ashish is a Busy Professional and a foodie who needs a go-to website for tasty and healthy recipes with video tutorials because There are too many recipes online and it is confusing to choose one.

User Journey Map
User journey map - Ashish Mathew.png

Starting the Design

Sitemap

The goal was to have an intuitive and clutter free website. I wanted users to easily find recipes and use filters to categorize their recipes. The website also has options to save and share recipes. 

sitemap-recipe app.jpg
Paper Wireframes

Based on the sitemap, I created wireframes on paper and iterated through various designs/layouts, selecting a few from each iteration to create the final design. One prominent feature is the use of a hero image layout, where a large image is positioned above the main content. This process was efficient and allowed for multiple iterations, resulting in a sleek and effective final design.

IMG_7053_edited.jpg
IMG_7051_edited.jpg
IMG_7052_edited.jpg
IMG_7050_edited.jpg

Final Wireframe

IMG_7054_edited.jpg
Screen Size Variation

To cater to the diversity of devices used to access the Turmeric website, a fully responsive design was implemented in various size variations. This ensured that all users can have a seamless experience regardless of the device they use. This approach provided a flexible and adaptable solution that accommodates different screen resolutions, orientations, and input methods. The result is a user-friendly website that gives an optimal viewing experience and quick loading times on various devices, from smartphones to desktops.

Tablet Screen

IMG_7055_edited.jpg

Mobile Screen

IMG_7056_edited.jpg
Digital Wireframe

The transition from paper to digital wireframes allowed for easier visualization of website dimensions and functionality. One notable change was the placement of the search option on the navigation bar, providing users with convenient access to recipe searches.

Home Page - Turmeric V0 - Webpage_edited.jpg

Search bar for easily finding recipes

Hero image showing trending recipes

Digital Wireframe - Screen Size Variation

The search bar in the website's mobile and tablet version has been relocated from the navigation bar to the top of the hero image. This updated design improves accessibility and makes it easier for users to search for desired content on the go.

Turmeric - Homepage - Tablet_edited.jpg
Turmeric homepage - mobile_edited.jpg
Lo-Fidelity Prototype

The main user journey involves browsing through recipes and selecting one to view. Users can customize their experience by adding recipes to their favorites, adjusting serving sizes, and using the search bar to find specific recipes. The platform also allows users to use filters to narrow down their search results.

Image 10-20-23 at 10.07 AM.jpeg
Usability Study - Parameters

A combination of moderated and unmoderated usability study was conducted. The study was conducted in the United States and remotely. The duration was 20-30 minutes with 3 participants. 

Usability Study - Findings

Filter

The filter option is not working properly. The screen does not change while choosing a filter.

1

Search Bar

2

Search bar is not intuitive, Pressing enter on the keyboard after selecting something is difficult.

Serving Size

The serving size option might be difficult for some people to find as it is in the bottom. The screen also does not change when a different serving size is selected.

3

Design

Mockups - Iteration 1

The website has been improved with a new feature that will simplify the search process for users. A dropdown sorting menu has been added to the homepage to help users find recipes more easily. This addition was made based on feedback from a usability study, which showed that users were not satisfied with the filter option provided only after searching. With the new sorting menu, users can quickly and easily sort recipes by various criteria, making it much easier to find what they're looking for.

Before Usability Study

After Usability Study

Image 10-20-23 at 2.15 PM.jpeg
Image 10-20-23 at 2.12 PM.jpeg

In response to user feedback during the usability study, the refined website now features an updated serving size function. Previously, when users selected a different serving size option, the screen did not reflect any changes. This caused confusion and frustration among users. Now, the website's ingredient quantities accurately reflect the selected serving size, resulting in a more intuitive and user-friendly experience.

Before Usability Study

After Usability Study

Image 10-20-23 at 2.25 PM.jpeg
Image 10-20-23 at 2.24 PM.jpeg
Mockups - Original Screen Size
Home Page HF_edited.jpg
Pasta Recipes_edited.jpg
Web 1920 – 5_edited.jpg
Mockups - Iteration 2

After presenting the mockup iteration to the client, they provided feedback suggesting changes to enhance the website's usability. In response to these insights, a set of new mockups was meticulously created, incorporating the specified requirements to improve the overall user experience. This iterative process aims to ensure that the final design aligns seamlessly with the client's vision and user experience goals.

The client's feedback highlighted specific areas for improvement:

  1. Recipe Cards lacked sufficient information.

  2. Request for a website name change.

  3. Desire for a different color palette.

In response, adjustments were made to address these concerns, enhancing the comprehensiveness of Recipe Cards, implementing a new website name, and applying a revised color palette to align with the client's preferences.

Image 1-17-24 at 5.11 PM.jpeg
Quick Pasta explore.png
Recipe details – Black Bean.png
Recipe details – Black Bean.png
Mockups - Screen Size Variations

The website was meticulously crafted with a focus on accommodating various screen sizes, considering the significant number of users accessing content while cooking on smaller devices. The homepage incorporates tailored variations, featuring a hamburger menu specifically designed for smaller screens. Additionally, the search option remains easily accessible, allowing users to swiftly find recipes with convenience.

Mobile home page1.png
Mobile home page1.png
Tablet-HomePage1.png
Mobile home page.png
Tablet-HomePage.png
Mobile home page.png
Tablet-HomePage.png
High - Fidelity Prototype

The hi-fidelity prototype has undergone minor changes after the usability study while maintaining a similar flow as the low-fidelity prototype. The changes have been made to enhance the user experience and include better navigation, improved visual design, and reduced complexity. Overall, the hi-fidelity prototype aims to offer users a more polished and refined interface while retaining the simplicity of the original design.

Accessibility Considerations

Clear visual hierarchy with different heading sizes. Rich contrast between the background and the headings. 

1

In order to cater to users who may struggle to read large amounts of text, I have included an audio file for each recipe.

2

Website is available in different languages for users from different backgrounds.

3

Takeaways

Impact

Users can find healthy and easy recipes for everyday cooking on this user-friendly website. Whether they have certain accessibility needs or come from diverse backgrounds, this platform makes it simple to discover nutritious meals. From step-by-step cooking tutorials, to a variety of recipes, this one-stop-shop has everything one needs to cultivate healthy eating habits. 

What I Learned

In the course of this project, I delved into the intricacies of website creation and responsive design, and it was truly fascinating to witness how content could dynamically adjust to various screen sizes. This exposure has fueled my interest in further expanding my knowledge and skills in frontend development, particularly focusing on creating responsive web designs.

In addition, this project provided me with valuable experience in collaborating with a real client and navigating the associated processes. The project involved multiple iterations aimed at enhancing the overall user experience. Through these iterations, I gained insights into refining and expanding the project to meet the client's requirements and user expectations.

Overall, the experience with this project not only honed my technical skills but also equipped me with a deeper understanding of client collaboration, iterative development, and the significance of user-centric design.

Next Steps

I would like to create an ecosystem of like minded users who would like to cook and eat healthy food. A community of cooks who can share recipes with each other and have a healthy lifestyle.

1

I would like to conduct more usability studies with diverse users to keep the website up-to-date with user preference. Additionally, creating a mobile app for users who prefer accessing the website through their phones can improve accessibility and convenience.

2

To enhance the accessibility of the website, I would like to add more features to accommodate a wide range of users.

3

bottom of page