mr-topborder

A web-responsive app to allow users to personalize and organize recipes saved for meal prepping and gatherings.

mr-firstlook

Overview

When I find a recipe I want to try, it becomes a tedious task flipping from one screen to view the ingredients and another screen to track the items required from the store.

Hypothesis

People want an app that allows them to easily search through recipes, save them into their own personalized groupings, to know the exact ingredient measurements for their party size, and to be able to flag which ingredients they currently have vs. what is still needed.

User Research

During the initial analysis phase, I conducted interviews with participants who love exploring and learning new recipes. This was an important step as it help highlight key features and uncover user painpoints with existing recipe apps.

User Personas

Based on the interviews conducted, user personas are created to represent a real target audience. Key quotes were capturedto understand a typical user’s needs and desires which in turn helps us build more successful products and solutions.
mr-evelyn
mr-richard

User Flow Diagram

Creating a user flow digram helps to visualize the various app flows as it maps every step a user takes.
mr-user-flow

Rapid Prototyping

Rapid Prototyping helps to tranfer ideas from my mind onto paper. After completing a few rounds, I chose the best one to digitize.
mr-sketches

Low-to-Medium Fidelity Wireframes

Using the sketches from the Rapid Prototyping exericse, I transfered them to low-to-medium wireframes.
mr-wireframes

Mood Board

Researching photos, key words, and colors helps to bring life into the designs. Consolidating these components together helps convey the mood.
mr-moodboard

Style Guide

Consolidating the defined color palette, typography, iconography, imagery, and UI element styles into a guide helps others to ensure brand consistency.
mr-colors-typography
mr-elements-typography

High-Fidelity Mockups

High-fidelity mockups were created using the style guide to cohesively present the look-and-feel and functionalities of the app.
mr-mockups-top
mr-mockups-bottom

Web Responsive App Mockups

Creating web-responsive app mockups helps visualize the app layouts and breakpoints for each screen resolution whether you’re using the app on phone, tablet, laptop, or desktop.
mr-web-responsive

View Other Projects

other-pp