PlusOne

Overview

PlusOne is a responsive web app for users looking for small portion recipes (1-2 servings). Users can create recipes and upload them to share with others or decide to keep them in a virtual recipe box. The platform also provides access to other recipes posted by others, also available save to the virtual recipe box.

Discovery

The project brief required a responsive web app for sharing, finding and saving recipes. To determine the niche audience to cater to, I researched the field and current recipe web apps. In today’s economy, more people are living with another roommate. With rising prices, people have made cuts where they can, including eating at home instead of eating out. The inspiration behind this app is to cater to this audience, people who live with one other person, as many recipe sites cater more to family-sized recipes.

Challenge

Create app that allows users to find 1-2 serving recipes
Create a way for users to save the recipes in an organized fashion

Solution

Create simple interface that allows easy access to information about recipes
Create easy, intuitive search functions to facilitate finding recipes
Create a way to file and save recipes, similar to physical recipe boxes

Define

After conducting research, I create user personas to represent the target audience. From these personas, I determine users' wants and needs, which determine necessary and preferential functions. I create user flows to represent the succession of screens needed to complete a function.

Design & Refine

At each stage of the design process, screens would be tested for efficiency and intuitiveness. Features deemed unhelpful were edited. Challenges users faced were addressed by adding new features or information. I first designed for mobile screens first. After working out the kinks on the mobile screens, I sketched the larger screens and tested those as well.

Discovery

Research

Competitive Analysis

Define

User Personas

User Flows

Design & Refine

Low-fidelity frames

Mid-fidelity frames

High-fidelity frames

User Testing

Visual Guidelines

Design Process

Reflection

I originally designed this app for a course. I took a break after turning it in and returned to update the design. Looking back, there are several questions I would have asked in the beginning surveys. I also would have expanded my audience. I would add more screens to show the other functions of the app, like the profile page, shopping list feature and recipe box.

With so many dietary restrictions, I might add tags for those (i.e. gluten free, dairy free, soy free, vegetarian, etc.) to help those users looking for those types of recipes.

From a branding standpoint, I would test the brand name more. Upon further reflection, "plus one" has romantic connotations so it might not be the best for the general audience.

What went well

Users were able to successfully search and find the recipes they were looking for. Great. That's the main function.

What presented challenges

While users were able to easily find the recipes they liked, the organization of saving recipes proved less intuitive. Users had difficulty saving recipes. The idea was to be able to save a recipe to a user’s recipe box or to post it as an entry for other users to see. There was confusion with the verbiage, which I changed. For the category page, I added white around the CTA to make it more visible and the process more intuitive.

Before furthering the design from low to mid fidelity, I conducted user testing. With the results from the user testing, I updated my screens. Because users will be using the app most often on their mobile device, I designed mobile screens first and created desktop layouts after working on the mobile first. Above are some of the screens with the errors that most needed addressing.

Errors

No way to leave screens or exit
Confusion in process of adding information to create recipe
Confusion on difference in file/share on recipe
Confusion with navigating website; inconsistent use of menu
Uncertainty from lack of reviews/ratings

Solutions

Add back arrows and exit icons
Add an icon along the line on the enter field. One user thought it was a hyper link
Change “file” to “save” and “share” to “post” or “publish”
Add menu options to all screens
Add star ratings to main recipe cards and on the individual recipe pages

Before furthering the design from mid to high fidelity, I conducted further user testing. With the results from the user testing, I updated my screens. After sorting out issues on the mid fidelity frames, I started adapting to larger screens.

Errors