ÑAMI-VEGGIE is a Vegetarian/Vegan cooking recipe website that offers tons of various and enjoyable cooking recipes with fresh and reliable organic ingredients. The typical user is 19-40 years old, and most users are college students or family caregiver with job. ÑAMI-VEGGIE goal is to make cooking fun and easy for people of all ages through our website.
July 2023 to August 2023
UX designer, UX researcher leading the ÑAMI-VEGGIE website design
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Available online cooking website have cluttered designs, inefficient systems for browsing through recipes, relevant products and ingredients, In some cases, they focus too much on monetization, which is inconvenient for users to limit their use.
User-friendly design that can be easily enjoyed by people of all ages and abilities with various abilities and backgrounds by providing easy and clear navigation and a simple and fast checkout process.
• I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users who care about their and their family’s heathy diet treat online cooking website as a fun and an activity that is enjoyable and relieves them by allowing them to enjoy healthy food for themselves, cooking their dishes following the recipes through their daily life. However, many cooking websites are overwhelming and confusing to navigate and to search the recipes they want to cook, which frustrated many target users. This caused a normally enjoy able experience to become challenging for them.
Cooking website designs are often busy, which results in confusing navigation
Many online cooking websites have too wide a gap between cooking demonstration videos or photos and recipes, so users complain of fatigue when referring to recipes by dragging them.
The majority of online cooking websites seem to overlook the part about accessibility.
website doesn't provide an engaging browsing experience
I created a user journey map of Santiago’s experience using the site to help identify possible pain points and improvement opportunities.
I created a user journey map of Jia’s experience using the site to help identify possible pain points and improvement opportunities.
Difficulty with website navigation was a primary point for users so I used that knowledge to create a sitemap. My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
I sketched out paper wireframes for each screen in my website, keeping the user pain points about navigation, browsing, and checkout flow in mind. The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Because ÑAMI-VEGGIE’s customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the homepage was a key part of my strategy.
Because ÑAMI-VEGGIE’s customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
• To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the the cart and checking out.
At this point, I had feedback on my design from my peer about things like placement of button and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Unmoderated usability study
Canada, remote
5participants
20-30minutes
The location of the search box is at the bottom, resulting in a decrease in user usability and accessibility.
The need for a timer has emerged in the user's cooking process.
discovered that the design direction, which was focused on selling ingredients, should be more faithful to recipes, the essence of cooking websites.
Based on the insights from the usability study, I made changes to improve the site’s searching flow. One of the changes I made was changing the position of the search bar to the top of the page and fixing that position when scrolling. This allowed users more freedom to search the recipes and products more directly and conveniently.
Based on the insights from the usability study, I made changes to improve the site’s usability. One of the changes was adding a timer that users could use while cooking while looking at the recipe. This allowed users more freedom to check exactly how much time they need to cook in real-time.
Based on the insights from the usability study, I made changes to improve the site’s usability. One of the changes was adding the cooking process with recipes through the web pages and adding recipes to the 'My recipe' page. This allowed users more freedom to freely use recipes in the direction they want.
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users browse from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
My hi-fi prototype followed the different user flow than the lo-fi prototype with the addition of a recipe user flow and included the design changes made after the usability study, as well as several changes suggested by peers
Ensure visibility within the app by allowing the size and thickness of the text that composes the menu to be adjusted, ensuring accessibility for a variety of users.
Providesa function to reduce transparency or increase contrast, as well as a colorfilter function and a screen reader function, considering the accessibility ofall users, including users with visual impairments.
Securing ease of access for users of various languages by allowing various languages to be added
Our target users say they want to enjoy our intuitive and seamless cooking recipe website on a variety of screen sizes and enjoy their healthy dishes with their loved ones.
I learned that even a small design change can have a huge impact on the user experience, for example, giving users easy access to a search bar at any moment. The most important take away for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Conduct additional usability research to see if the user's pain point has been truly resolved and whether the improvement of the design formed through the two usability studies is appropriate.
Based on the feedback obtained through additional usability studies, we conduct a design iteration process to make the design more attractive and solve the user's pain points.
After the design iteration process, try the process of handing over the design data to team members such as engineers working together.