recipeasy_logo_vectorized

Role: Product Designer
Type: Design Concept
Timeline: 1.5 months

At a glance

Recipe users want two things. They want an idea of how the final product will look, and they want the recipe itself. Recipeasy focuses on those needs and brings modern design principles into the kitchen.

Responses

I optimized content above the fold, improved scannability through visual hierarchy, and created a scalable design system.

What I did

Defining Product Vision, Design System, Information Architecture, UI/UX Design, Wireframing, Interactive Prototyping, User Testing, User Research, Visual Design, After Effects Mockups

Phase 1: Research

4

Qualitative interviews

15

Quantitative interviews

4/4

Users employ workarounds

Research results & analysis

In my quest to help the average home cook, I interviewed 19 self-identified intermediate monthly recipe users. Notes from those conversations were segmented into themes to identify opportunities. A research plan guided my efforts.

Key findings

  1. Users will skip a recipe if reviews or pictures aren't immediately apparent. Decisions happen fast; first impressions are key.
  2. 4 of 4 interviewees used workarounds to keep track of their progress. Clear delineation between steps is lacking on recipe sites.

The final result of the discovery phase was a research report with recommended actions.

Phase 2: Ideation & Prototyping

Pen and paper user interface drawings
Initial drafts of interfaces drawn with pen on paper. A Sketching for Design course helped gave me a sensible visual vocabulary.

Aligning with real needs

Both key research findings stem from issues of information architecture. That fact gave focus to my ideation sprints. I used a value-cost grid to discern features that could provide the greatest impact with consideration to deadlines. A comparative analysis determined boilerplate features.

med-recipe
med-steps
med-technique

Iteratively building the prototype

Given the constraint of 1.5 months to deliver, priority went to the 2 most impactful objectives. 

  1. Optimizing the experience above the fold
  2. Developing information architecture of cooking steps

Mid-fidelity wireframes came together after a crazy eights workshop and a dot-voting straw poll. Annotated frames can be seen here. Then, to keep everything aligned with end-users, I ran 3 usability tests on Lookback. The second iteration did away with redundancies and points of clear friction. This usability report highlights the issues I addressed.

Phase 3: Building a Design System

Style guide including logo, brand colors, icons, fonts
Style guide including logo, logo variations, brand colors, iconography, typography
Pattern guide including navigation, radio buttons, review modules, menus, buttons
Pattern guide including search box, navigation, radio lists, review stars, menus, buttons
Pattern guide including navigation, radial lists, review modules, menus, buttons
Pattern guide including navigation, radio buttons, review modules, menus, buttons
Pattern guide including techniques, author box, recipe completion, reviews
Pattern guide including techniques, author box, recipe completion, reviews

A formalized design system

Defining the atoms of the application gave me a north star and allowed me to focus on contents and interactions. Google's Material Design dark mode guide acted as the baseline. 

Designing key interactions

Interactions were designed to fulfill the two goals of the project: optimizing the experience above the fold and improving cooking step information architecture. Above the fold, pictures, reviews, and servings convey key information. Tabbed navigation helps users skim. 

Improving information architecture

Visual hierarchy was the primary tool I used to create distinctions between cooking steps. Each step is distinguished by a text heading and an illustrative picture. Participants universally preferred more pictures - using them to delineate steps was a natural development.

Outcome: Key Takeaways

The final prototype excels in the areas research highlighted as essential. It provides an overview of the recipe and its details immediately so that users can decide fast. Information architecture avoids confusion through a clearly defined visual hierarchy.

Reddit screenshot with 94.2k votes expressing frustration with recipe websites
Reddit screenshot with 94.2k votes expressing frustration with recipe websites
Cartoon from the New Yorker satirizing recipes with long irrelevant stories appended.
Cartoon from the New Yorker satirizing recipes with long irrelevant stories appended

Key Takeaways

  1. Users know what they want. Keyword stuffing for the Google algorithm creates short-term gains at a cost. User experience, bounce rates, and loyalty suffer.
  2. Speaking with users opened my eyes on every occasion. It kept the product focused on real needs.
  3. Exploration fuels growth. The dark theme, animations, and the scroll-to-action workaround came from a desire to explore.

What I Would Do Differently

  1. Actions, states, and general usability would be better communicated with better UX writing. Any style of writing takes practice - there's always room for improvement!
  2. In creating my final dark mode draft, I nixed my first light draft. Implementing a light/dark toggle would be closer to reality.