The initial loading screen for Thyme Cooking App.

An Integrated Recipe Platform

Project Context

For the course "User Interface Design", I was tasked with creating a smartphone application that extended some of its functionality to a smartwatch (like an Apple Watch or LG C).

Key Assumptions

1. People will likely use the smartphone or the smartwatch to complete a task (not used together)

2. The smartwatch has a crown that can be pressed or rotated forwards or backwards (and no other buttons)

The Challenge

Create a mobile & watch application that allows people to search and follow recipes at home. The application must have the following functions:

  • Open a recipe from a list of favourites (mobile & watch)
  • See the recipe's steps (mobile & watch)
  • Set a timer for timed steps (mobile & watch)
  • See the list of ingredients for a recipe and add to a shopping list (mobile)
  • Find a recipe by both category & search terms (mobile)
Design Process

Here is an overview of the design process I followed to create this hybrid mobile/smart watch application.

An infographic detailing the specifics of the design process, from scoing the problem, to doing the initial customer research, card sorting, validating & prototyping, to finally finalizing the prototype.
1. Determine User Context and Core Needs

I first crafted a simple persona of an ideal user for this application, who I named Asha. Following this, I used the Jobs to Be Done framework to flesh out they key task she wanted to accomplish. You can see the specifics below:

The Jobs-To-Be-Done Framework for my proto-persona (created on Miro).

With this framework, I determined the three core needs for Asha:

1. Asha needs step-by-step visual guidance that she can control (such as a video she can play or pause).

2. Asha needs to quickly assess the level of difficulty and the amount of time it will take to cook a recipe.

3. She needs clearly worded instructions that she can quickly see and understand while performing other cooking tasks.

2. Competitive Analysis

In researching similar applications, some common interaction patterns became discernible. This lead to the creation of this initial diagram of a user flow.

Flow chart of what the key steps and decisions in the application would be
3. Ideating Potential Solutions

Determining an initial user flow helped inspire some low-fidelity prototyping. In particular, I drew some sketches of the first few mobile and smart watch screens: 

Mobile
FIrst three screens of the mobile application (browse and follow recipe screens).

Watch
First three screens of a smartwatch application (browse and follow recipe screens).
4. Prototype and Test with Potential Users

Following some sketches, I created a medium-fidelity version of the prototype.

User flow (medium fidelity) of the mobile screens.

User flow (medium fidelity) of the smart watch screens.

Utilizing this prototype, I then did guerilla testing with university students to gather some feedback.

Some key concerns they noted were:

  1. The text and icons on the Smart Watch were far too small, and would be difficult to read from a distance.
  2. Navigating on the mobile application was confusing, as there was no discernible way to go back a step in the recipe.
  3. Participants wanted the option to change the timer during a timed step, instead of using a preset timer.
Key Lessons
1. Start With Minimizing Copy At The Outset

With the  Apple Watch in particular, it became clear that copy had to be both clear and minimal in order to communicate the recipe steps effectively. As the interface is quite a bit smaller on the watch, I had to rely on less text and use more expressive icons. This differed from the smartphone, where I was able to incorporate more detailed graphics and text.

2. Focusing On The User In Context Matters

The jobs to be done framework changed my thinking and approach to design. Prior to it, I always used personas to inform what was being designed. However, with the Jobs-To-Be-Done analysis, I was able to go beyond a general persona and be more intentional in terms of what sort of tasks the user wanted to get done.  

Using the persona approach in conjunction with the job stories framework allowed me to focus what people do when faced with certain situations and challenges. As a result, I learned to approach my design work differently, by being able to specifically hone in on how people react and shape the environment that they live in.