Home Cooking

Role

Role

Role

UX/UI Design

UX/UI Design

UX/UI Design

Project Type

Project Type

Project Type

Recipe Web App

Date

Date

Date

June 2024

June 2024

June 2024

Overview

Home Cooking is a source for recipes that inspire dinner at home. In this project, I designed a responsive web app that helps cook solve the everyday problem of what to cook for dinner. As the UX/UI designer, I completed this project from start to finish involving a thorough UX phase and UI branding and application phase.

Home Cooking is a source for recipes that inspire dinner at home. In this project, I designed a responsive web app that helps cook solve the everyday problem of what to cook for dinner. As the UX/UI designer, I completed this project from start to finish involving a thorough UX phase and UI branding and application phase.

Challenge

This recipe web app needed to be enjoyable & easy to use, and support home cooks in the process of planning and preparing dinner. In order to stand out from the rest, it would offer a dinner-focused alternative to other apps which have recipes for all types of food. User research also needed to be collected and turned into insights for a truly user-driven design.

This recipe web app needed to be enjoyable & easy to use, and support home cooks in the process of planning and preparing dinner. In order to stand out from the rest, it would offer a dinner-focused alternative to other apps which have recipes for all types of food. User research also needed to be collected and turned into insights for a truly user-driven design.

Process

USER RESEARCH

I performed a competitive analysis, including competitor overviews, marketing profiles, SWOT analysis, and UX analysis. I also researched applications of user psychology principles in these competitor apps. Then, I conducted in-depth interviews with actual users of recipe apps to discover common goals and frustrations, and translated these into user personas.

IDeation

In this stage, I created a user flow diagram, wireframe sketches for mobile screens, and applied principles of Lean UX and Minimum Viable Product (MVP) to keep the project's progress moving along efficiently.

User Testing and Rapid Prototyping

I ran user testing early in the design process to observe whether participants could easily navigate the basic initial functions, such as logging in, creating an account, and saving a recipe. Rapid prototyping led to three iterations of basic flows at the low-fidelity stage. I gathered feedback from 3 participants and improved user flows based on feedback.

I created a user flow diagram to outline the steps a customer would take in the shopping experience to browse, select items, and checkout easily and intuitively. Low fidelity wireframe sketches were required to demonstrate how the steps would look on a simplified screen. These progressed into a more fleshed-out set of mid-fidelity wireframes.

UI Design and application

Inspiration slide deck collecting patterns such as UI cards, icons and buttons, typography, language, textures and shapes, and inspiring interactions. Multiple options for style direction, shown with moodboards. A clear rationale for the style direction chosen. I conducted preference testing using Lysnna to ensure user feedback in driving design choices.

Wireframes

Mid-wireframes at four breakpoints. Each screen has a unique layout which is appropriate to its size. The next step was to apply style guide for set of high fidelity wireframes.

I created a user flow diagram to outline the steps a customer would take in the shopping experience to browse, select items, and checkout easily and intuitively. Low fidelity wireframe sketches were required to demonstrate how the steps would look on a simplified screen. These progressed into a more fleshed-out set of mid-fidelity wireframes.

Mockups

Final mockups included responsive design at 4 breakpoints (phone, tablet, laptop, and dekstop) to ensure design was functional on all screen sizes.

Final Designs

Login & Create account

The above user flows show log in and create an account. These were two key jobs to be done (JTBD).

Save A recipe & search

These demos show the user can save a recipe once logged in, and also search for recipes with keywords.

Next steps

Expanded Ui flows

Build out the UI flows more extensively to cover a wider range of user interactions and scenarios.

Custom imagery

Further improve the imagery to convey a more beautiful and homemade quality, enhancing the app's visual appeal and authenticity.

tweAk responsive design

Continue refining responsive design skills to ensure optimal user experience across all device types.

…Check out this case study:

Sincere Tea is an online store offering unique handcrafted tea wares. As the UX/UI designer for this project, I designed the brand identity and an e-commerce responsive web app where customers can easily and intuitively browse and purchase goods from the online store.

…Check out this case study:

Sincere Tea is an online store offering unique handcrafted tea wares. As the UX/UI designer for this project, I designed the brand identity and an e-commerce responsive web app where customers can easily and intuitively browse and purchase goods from the online store.