With the risen interest in matcha, Cuzen Matcha is here to promote the use of freshly ground matcha. They also offer a variety of recipes that people can create in their own kitchens, and different forms people can consume matcha based on their preferences. However, the number of active users is low. I tackled the process of curating a better experience on the recipe page.
How might we Cuzen Matcha's recipe page to increase user engagement and create an informed experience for matcha enjoyers to browse new recipes.
I tested and interacted with Cuzen Mathca's current design of the recipe pages, noting potential elements which may arise as pain points for users. This initial observation also helped me get a feel for how users may navigate through the website.
To begin the redesign process, I wanted to get further insight into the user's perspective on the recipe page. I conducted a survey that asked about their thoughts on recipe pages in general, and changes they wished to see to Cuzen Matcha's recipe webpage.
wanted to see changes to content
agreed the webpage was unneccesarily complex
agreed functions were not well integrated
I also received and compiled further insights to particular features users wanted to see in recipe pages and on the Cuzen Matcha page itself.
Based on the survey, I narrowed down and created a cohesive image of Cuzen Matcha's target audience and their wants, needs, and frustrations.
I decided to redesign and include five features that users wanted to see changed, based on their feedback regarding content and layout.
| Layout | Revise layout of recipes to include larger photos emphasizing the food |
|---|---|
| Search and Filter | Enable users to easily search and locate the desired recipes |
| Context to Terms | Assist understanding in the terms "blend" and "level" used by Cuzen Match |
| Dietary Information | Allow users to identify recipes that meet their specific dietary requirements | Measurements | Allow users to switch between US customary or metric measurements |
I began brainstorming the implementation of the suggested features individuals wanted to see. While keeping some previous features, I quickly sketched out my vision for the redesign.
To get a more structured detailed idea and visualization of the recipe page, I refined the design in Figma.
To help users navigate the wide variety of recipes, categories (by meal, diet, matcha level, mood) are provided to help the journey.
With a grid layout, larger photos are shown to emphasize the visual appeal of the recipes. Categories are also simplified to prevent overcrowding.
To simplify and improve user experience, the recipe page is sectioned by ingredient, preparation, tips, and storage. Similar recipes are also shown if users want to explore more tastes.
Every kitchen is different. Users can switch between US Customary and Metric to chose the unit of measurement they are comfortable with.
To prevent visual overwhelm, learn more about Cuzen Matcha terms by hovering over the highlighted text. Click the link to be redirected to a tutorial.
To find specific recipes that cater to the user's needs, a filter feature is used to easily narrow down and filter recipes.
This project was my first solo UX/UI design project. With full creative control over the redesign, I quickly learned the importance of time management and structured planning. With only myself to guide the project, I became more responsible for timelines and maintaining a diligent to-do list with self-imposed deadlines. This experience fundamentally improved my organizational skills and my ability to work at an effective pace with design projects.
While the survey feedback helped identify specific features to include in the redesign, I also received requests to experiment with the format of the webpages. Initially, envisioning the UI design was challenging as I could only envision generic recipe website designs. However, during the low-fidelity and wireframe stages, I shifted my approach. I actively studied various websites, noting what worked and what didn't in their designs. This studying helped me improve my initial sketch and vision for the webpages. Learning from other designers expanded my design perspectives and inspired diverse UI structural ideas.
