Anthony's Recipe Website 

Overview

This project has 2 different requests such as Design Sprint and High-Fidelity Design

1. Design Sprint: The Anthony's Recipe Website has 2 problems that need to be solved.

Problem 1 (User Side): Collecting Recipes

The case study explained that the website owner needs an efficient way to collect recipes from readers. Currently, recipes are submitted via email, creating a significant backlog, and making it difficult to store and filter submissions. To resolve this, he wants the website to include a feature allowing users to submit recipes online.

Problem 2 (Admin Side): Categorizing, Editing, and Publishing Recipes

The website owner also wants an admin dashboard where he can log in to manage submitted recipes. This dashboard should enable him to edit, categorize, and publish recipes once he has completed cooking them.

2. High-Fidelity Design composition for Anthory's Recipe

This project focuses on achieving the owner's goal: to design a landing page that engages visitors and encourages them to regularly use the website for their recipe needs.

Skills and Techniques

  • Design Sprint
  • Figma
  • Adobe Photoshop
  • Design System

Working Process

1. Design Sprint

Following the design sprint framework, I developed solutions for each problem by defining the long-term goal, creating design sprint questions, and mapping the current user journey. Based on this information, I sketched three possible solutions and created a storyboard.

Using the storyboard as a foundation, I designed a low-fidelity prototype to test the functionality of the website for both the admin and user sides. With the first draft of the prototype, I conducted tests with three different audiences. After validating through the testing phase, I refined and enhanced my prototype to align with the long-term goal established at the beginning of the project.

This project has helped me deepen my understanding of problem-solving for a website, focusing on both design and functionality to ensure usability and achieve the intended goals.

Story Board

The story board of the solutions for the case study

Mobile Wireframe

The mobile wireframe for the user side problem

Desktop Wireframe

The mobile wireframe for the user side problem

2. High Fidelity Design Composition for Anthony's Recipe

I developed a prototype for the landing page based on the problems identified during the design sprint on the user side. From this prototype, I created high-fidelity design compositions for small, medium, and desktop devices.

Next, I needed to prepare a design system for the development stage. This design system includes a grid layout setup with information on spacing, typography, and font scales for different devices to ensure responsiveness and user-friendliness. It also encompasses the color palette, as well as effects like rounded corners, box shadows, and overlays. Additionally, I defined the button and link designs for various states, such as default and hover. I included dos and don'ts for the developers to ensure that the final product matches the design and functionality of the high-fidelity wireframes and prototypes.

For the landing page, I incorporated as much information as possible that Anthony wants for his website. Users will be able to find trending categories based on seasonal selections. The call-to-action buttons encourage users to explore more recipes, sign up for an account, and become members so they can submit their recipes to Anthony. I also created a navigation link to weekly quizzes to engage users and make their experience enjoyable, not just focused on finding recipes.

Desktop High Fidelity

High fidelity wireframe desktop version

Mobile High Fidelity

High fidelity wireframe mobile version

Final Thoughts

One of the techniques that I applied for this project was design sprint. It allowed me to focus on understanding user needs, sketching solutions, and validating functionalities. Using the storyboard during the design sprint helped me understand how the website's flow could impact user experience and engagement. This step was invaluable when I moved on to developing the high-fidelity design.

The purpose of user testing during a design sprint is to validate design concepts before moving into development. It also helps me understand how users interact with the functionality and flow of the website.

In this project, I practiced design sprint skills, including defining long-term goals, mapping challenges, sketching, prototyping, and creating both low- and high-fidelity wireframes. These skills are essential in web design, as they help improve usability, creating a successful and user-centered product in the future.