← back to portfolio

MOBILE APP • USER RESEARCH

From scratch to screen: building the first iteration of MySous.

Leveraging research, visual design, and user testing skills to lay the foundation for a gourmet cooking app.

★ SUS Score: 86.25 Usability Rating

ROLE

Lead UX Designer

TIMELINE

8 Weeks

TOOLS

Figma, User Testing

FOCUS

Home Chefs

Introduction

MySous is a recipe app geared towards cooks with higher level skills and experience. The concept needed a prototype to steer development of the product’s first iteration. For a target audience with a higher baseline skill level in the kitchen than most, a simple collection of recipes would not be enough; I needed to build an experience that catered to their enthusiasm of cooking, rather than hold their hand through making a meal. I took lead on the project and touched on every part of the design process, including research, visuals, paper prototyping, user testing, and data analysis.

Background

The competitive landscape for cooking apps is vast and diverse. NYT Cooking app is seemingly the gold standard for what a recipe app could be However, social media also plays a big part in recipe discovery for users, with a majority of Gen Z users stating they use social media to help with meal planning. Where NYT Cooking sets itself apart in this regard is the content curation and quality control; recipes are created by staff writers, as well as sourced from NYT’s archives, as opposed to anyone with a social media account being able to post something without much content moderation.

Looking into features and functions revealed some interesting things I hadn’t initially considered or took for granted based on my own lived experience; things such as share buttons, serving modifications, and always-on display modes are seemingly must-haves. Perhaps most interesting to me, though, came from discussing my research with my fiancee. She is an avid NYT Cooking user, and her favorite function is the Instacart integration. Users are able to import ingredients from a recipe into a grocery order, which is a huge time-saving convenience.

The Personas

Six personas were provided for this project, but I focused on three to guide development: Gourmet Gabriella, Party Pete, and Seasoned Sally. Gourmet Gabriella chosen as the ideal target user, while Pete and Sally have traits that made up the “outer orbit” of target users.

Object Mapping

An object map was developed to help define the core components of the app and a baseline scope for early prototyping.

CTA (Call-to-Action Matrix)

From object map, a CTA matrix was created to give definition to the expected interactions for the users.

Reverse Journey Mapping

To make sure I was going down the right path, I found a recipe online and compared its contents to the object map. I wanted to make sure that the metadata and core content that a user could potentially need for discovery was in line with how I had defined it in the object map, as a misalignment with reality could potentially have a negative impact on the user journey.

After validation, I created a reverse journey map for Gourmet Gabriella, paying special attention to the pain points. Generally, Gabriella’s biggest issue would be navigating through the bloat that commonly accompanies recipes in the digital space (story time, ads, bad photos, etc.).

Exploration Sketches

I took some time to do some task and function ideation sketches that I felt could be useful or interesting to users. While I’m not the most artistically inclined, these sketches were helpful in getting the creative flow rolling.

Features & Functions

I also compiled a list of functions and features, put them into a survey, and polled a small group of individuals to gauge interest. Using that data, I was able to perform a MoSCoW analysis so I could begin to start narrowing my focus for the development phase.

With the MoSCoW analysis complete, I then pivoted to input and output mapping so I could determine what the interactions for the functions actually looked like.

From there, it was on to building task and user flows around those inputs and outputs.

The scope of the app was mostly defined, so I directed my efforts towards getting the visual of things off the ground. I started with getting an elements template together so I had a shared language to work from for the UI. Once that was in place I then started to develop the iconography.

Prototyping, Refinement, and Testing

I used Figma to create wireframes for paper prototyping that I was planning to conduct. It was somewhat easier than building a digital prototype in the sense that I only had to build and print the assets, but at the same time, being able to visually track which interactions are connected makes it easier to know what screens may have been missed.

In parallel with the wireframes, I built another survey, this time to help determine the name of the app. I had 5 personality traits I used to describe the feel of the app, and had participants rank how strongly each proposed name conveyed those words. Ultimately, MySous won out pretty convincingly as the best fit.

With the paper prototype testing, I was primarily looking to confirm that the navigation of the app was logically structured; I also wanted to see if the “Gourmand’s Globe” feature concept was a viable one, as it was conceived as the main thing that would set the app apart from others on the market. I took a video recording of the test from a top-down view and had the participants go through three tasks. We also had some discussion before and after, which provided some great insight. The testers felt that pretty confident in the usability of the app, and granted the protype an SUS of 86.25.

After paper prototype testing, I built out another survey to collect user feedback. This time the focus was on the visual elements of the app, such as the color palette, icon design, and page layout. Each survey participant was screened with a set of background qualifier questions, and then additional questions regarding cooking skill, frequency, and experience with recipe apps.

The visual samples supplied to participants were received mostly as expected, with some opinions split on things such as iconography style and color palettes. What was most interesting to me, however, came from the demographics – the majority of the respondents had no prior experience with cooking apps.

Next Steps

For future development of the MySous project, I’d like to some additional rounds of surveying, specifically with a pool of participants that’s more experience with cooking apps. I’ll also be implementing some of the feedback received from paper prototyping, as well as developing a high-fidelity prototype of the Gourmand’s Globe feature to explore how I could further flesh it out.

NEXT CASE REVIEW

Care Compass

view next review →

let’s get in touch.

Available for UX & product design roles, consulting, and advisory.

contact Damon →

Create a free website with Framer, the website builder loved by startups, designers and agencies.