Citrus Cooking App Prototyping Process

Overview

In my graduate Prototyping and Implementation class, I worked in a team of four to prototype and test “Citrus”, a cross-platform application that provides home cooks with a personalized culinary experience for the recipe finding and cooking process.

Citrus is designed for use in mobile, tablet, and desktop channels. Home cooks can find recipes by name, author, ingredient(s), and/or category. Users can also avoid recipes with ‘blacklisted’ ingredients so that they only see recipes relevant to their dietary preferences. After finding a recipe, users can then save and categorize the recipes as they please. Citrus also provides best practices and tips to help both experienced and beginner level chefs build their cooking skills through short tutorials and demo videos.

Design process for Citrus:

Ideate on the goals of the application & sketch preliminary lo-fi wireframes
Iterate into a mid-fidelity prototype
Conduct usability testing on the mid-fidelity prototype
Iterate into a high-fidelity prototype, ready for another round of usability testing

My Role: My primary role was conducting usability testing and analyzing our qualitative results. I also created our mood board and assisted with mid-fi prototyping.

Step 1: Ideate & Sketch

We started this project by ideating on what the core functionality of this application would be. In this process, we leveraged a design charrette where we each sketched individually and then came back together to find commonalities and jointly sketch a set of lo-fidelity wireframes.

In this phase, I put together a mood board (which later served as direct inspiration for our color palette) and conducted a preliminary assessment of possible competitors.

To see more of our application foundation, including our Key Persona , check out our Digital Narrative Presentation on Google Drive.

Step 2: Mid-Fidelity Prototype

Armed with our application foundation, competitor analysis, and moodboard, we put together initial mid-fidelity mobile (https://p2qvpd.axshare.com/) and desktop prototypes (https://6vqkde.axshare.com/).

Step 3: Usability Testing

Using these prototypes, I conducted interviews with users after they completed the following tasks:

Adding ingredients to the virtual pantry via mobile application,
Using the recipe recommendation feature via mobile application, and
Comparing recipes via desktop application.

All users were able to successfully complete all tasks, yet the results of user testing also showed:

Users did not know how to access their pantry,
Users did not find the search functionality to be intuitive,
Users want to import & export recipes & tutorials from other products, and
Users want tailored recipe recommendations.

Step 4: Hi-Fidelity Prototype

With the usability testing results and application foundation, I helped to design hi-fidelity prototypes for mobile, tablet and desktop channels (https://wfas4d.axshare.com).

We used the following style guide for our hi-fi prototype.