CLIENT

Instant Pot (Spec Client)

PRODUCT

Instant Pot App

ROLE

Visual & UX Designer

YEAR

2018

Cooking up a better companion app for this year’s coolest new kitchen gadget.

I’m loving my Instant Pot Smart pressure cooker. This top-rated and highly-capable cooker returns consistently great results from a culinary standpoint, but the so-so iPhone companion app ultimately does not add value. I thought it might be a fun design challenge to see if I can a design a better app for it. I’ll document my design activities and outputs here and you can see how I work as a product designer on an end-to-end challenge.

 
instant-post-app-cutting-board.jpg
 

My Process

I followed a six-phase UX design template to re-design the Instant Pot app. It’s a variation of Csaba Házi’s Seven Step UX. I’ve used it for several projects and it’s served me well. It provides enough guidance to keep the team and myself organized, while being flexible enough to support the needs of a variety of projects. Keep in mind that this is not a strictly linear, waterfall process. Plan and Discover often run in parallel. And Validate can happen across the lifecycle of the project. 

 
 
Screen Shot 2018-05-18 at 11.55.10 AM.png
 
big-icon-plan.png
 

The Plan Phase is where we conduct all of our primary and secondary research and collect the information that will inform the design work we will be doing later. It’s also where we create the strategy behind the design. Simply put, the Plan Phase is about six things:

  1. Understanding the product, its value, and the market
  2. Understanding user needs & goals
  3. Defining the end-to-end customer journey
  4. Unearthing problems the design will solve for
  5. Mapping out stakeholder needs and business goals
  6. Capturing scope and resource needs
 Image Credit:  EatWell101

Image Credit: EatWell101

What is the product? How does it work? What is its value?

The first pressurized cooking pot was developed by a French physicist. It’s basically a pot with a tight-sealing lid and a steam valve, a pressure cooker traps the steam rising from the boiling liquid in the pot, which, in turn, raises the temperature at which that liquid boils. The higher temperature, combined with the pressure in the pot that forces the hot steam into the ingredients, cooks food much faster than traditional methods.

For a long time, stovetop pressure cookers were the only style available. As the name suggests, they’re heated on the stove,and set to high or low pressure. What makes this newest generation of electric pressure cookers different is that it is designed with a slew of self-regulating safety features, including sensors to monitor the unit’s temperature and amount of pressure. All you do is plug it in and tap a button, and it does everything else. It’s as user-friendly as a slow cooker—except that it gets dinner on the table a day or so faster.

 
 Image Credit:  Williams Sonoma

Image Credit: Williams Sonoma

 

This particular model—the Instant Pot Smart—has all of the features that the Instant Pot base model has—a pressure cooker, slow cooker, rice cooker/porridge maker, steamer, sauté/browning, yogurt maker & warmer. It also gives you additional information about what’s going on inside the pot also program and executes various functions remotely via a Bluetooth-connected smartphone app (iOS only). The cooker itself very ergonomic to use, with the large handled lid oriented to use a single hinge, and a center-mounted control panel with an easy to read LCD display.

It’s curious that Instant Pot chose Bluetooth over WiFi (given the range restriction of Bluetooth) and chose to create their own smartphone app (rather than adopting the popular WeMo platform used by other smart appliance makers). 

 The Instant Pot Smart Control Panel

The Instant Pot Smart Control Panel

What problems is it solving?

  • It multitasks. This single appliance has made cooking faster and more convenient—doing the job of a slow cooker, electric pressure cooker, rice cooker, steamer, yogurt maker, sauté/browning pan, and warming pot.
  • It saves space. It does the job of seven different kitchen appliances or tools freeing up counter space in the kitchen.
  • It saves time. The pressure cooker can cut cooking time in half. And because you are using one pot, there’s less time spent cleaning up.
  • It’s versatile. It can cook almost anything. 
  • It reduces your electric bill. It’s energy efficient. Swapping a slow cooker for an Instant Pot can save up to 70 percent electricity.
  • It’s relatively easy to use. There is a slight learning curve, however.

Who are its chief competitors?

The success of the Instant Pot has success has inspired competition from other kitchen appliance makers including Philips, Crock-Pot, and All-Clad. For the most part they are more expensive, less versatile, and less well-made. 

 Crock-Pot Smart Slow Cooker with WeMo. Image Credit:  Crock-Pot

Crock-Pot Smart Slow Cooker with WeMo. Image Credit: Crock-Pot

The Crock-Pot Smart Slow Cooker uses the popular WeMo application which gives you access to a variety of features. There are four main functions of the WeMo app. You can schedule, monitor, modify, and notify. This cooker is probably the closest competitor to the Instant Pot Smart with an app that genuinely useful. However, it is a slow cooker—not a pressure cooker. Remember, a pressure cooker can get much hotter, cook food faster, and can tenderize meats.

What are problems or known issues with the product?

This is a question that I do a deeper dive on during the customer research phase, but I did some digging on known issues with the Instant Pot—thinking that our app could potentially address or at least mitigate them for consumers. I spent a lot of time looking at reviews of the product online as well as the Instant Pot Community Group on Facebook. Here's what I discovered:

  • The Instant Pot interface is a little clunky and non-intuitive. It can be challenging to orient yourself and master the controls quickly.
  • Setting accurate cooking time was tough for some users
  • Closing the venting knob before cooking was forgotten by some users
  • The recipes included in the product manual kind of suck. Turns out that Instant Pot is notorious for this, so much so that it's rumored to be reworking its manuals.

What apps are currently available for the Instant Pot? 

Instant Pot has released a free iPhone app to support its Bluetooth-enabled Instant Pot Smart. The app consists of recipes, a grocery list builder, and “scripts” that you build and execute in order to operate the cooker.

 The Current State of the Instant Pot iOS App

The Current State of the Instant Pot iOS App

 
 

The app is also a pretty ugly affair overall and gets very low marks in the iTune App Store for its appearance, functions, and performance. I received this appliance as a gift, but if I had spent the additional money to buy this “smart” version of the Instant Pot, I would be pretty upset.

 Customer Reviews of the Instant Pot App in the iTunes Store

Customer Reviews of the Instant Pot App in the iTunes Store

 
 

Personas

Based on the results of my research, two persona types emerged that I defined as primary and secondary personas for target users. The primary persona was a cooking enthusiast that demands control and precision from her cooking appliances—but not particularly technology savvy. The second was a tech enthusiast and a smart home devotee, but not much of a cook. I like to use Xtensio’s User Persona Creator to build my personas.

 Our Primary Persona: Linda Tyler

Our Primary Persona: Linda Tyler

Linda is the chef here. She really loves cooking, discovering new recipes to make, and loves to fine-tune her recipes over time. She loves the precision the Instant Pot offers and loves how she can adjust things like temperature during cooking.

 Our Secondary Persona: Sam Wu

Our Secondary Persona: Sam Wu

Sam is not what you would really call a “foodie.” He hates cooking, but as a fitness nut, understands the importance of good nutrition. He loves how efficient and convenient the Instant Pot is. It saves him a ton of time, it’s easy to use and clean, and he gets a great, tasty meal every time. He’s comfortable with tech and would really love a feature that would let him turn on the Instant Pot before he leaves work.

Customer Journey Map

Once I finished with defining our personas, I created a customer journey map. It helped me to visualize the whole spectrum of the customer experience of the Instant Pot cooking experience, define some possible brand touch points where the app might add value, and understand additional possible obstacles and pain points.

 The Customer Journey Map for Our Primary Persona

The Customer Journey Map for Our Primary Persona

User Study Workshop

Given that this was not a work project, but a personal one, I assemble a cohort of friends and family members that were cooking enthusiasts, kitchen gadget collectors, and pressure cooker users. I elected to interview different types of users—both male and female, with different level of experience in cooking, people with different familiarity with technologies, people who cook often and occasionally.

     My Friends & Family User Study Group Gathers

    My Friends & Family User Study Group Gathers

     
     

    Highlights

    Here are some excerpts from the workshop. One pattern I noticed is that most users absolutely love the Instant Pot but almost universally loathe the companion iOS app.

     
     
     Some Customer Verbatims from Workshop

    Some Customer Verbatims from Workshop

     
     

    User Goals

    So I settled on five main goals that are crucial for Instant Pot users:

    1. Find recipes to cook in the Instant Pot
    2. Build shopping lists from recipes that can be managed
    3. Allow some base Smart Pot remote functions (temperature, pressure, cooking time)
    4. Offer monitoring of the Instant Pot while operating
    5. Help me if I have questions along the way

    Certain features that are prioritized in the current Instant Pot app (such as recipe scripting) were very low-ranked by users. It’s a great example of how important is to uncover real users needs instead of just assuming them. Certain other requested features (i.e., ability to turn cooker on from the office via Wifi) had technical engineering dependencies that would have to wait until a later MVP.

    big-icon-discover.png

    Once I got all of the findings of my research and interviews in the form of sticky notes, I needed to get a better scope of the qualitative and quantitative data I collected. I needed some methodology to group them to better reveal potential highlights, patterns, or opportunities.

    Affinity Mapping

    I used affinity mapping to find patterns in my observations and group them a little more logically. 

     Affinity Mapping Outputs

    Affinity Mapping Outputs

     
     

    Key Insights

    I analysed the research results and noticed users similar behavior and pain points:

    1. Everyone was absolutely bonkers over the Instant Pot. They loved how easy it was to use, how well it worked, and they how versatile and efficient it was.
    2. At the same time, they hated the companion app—almost unanimously. In fact some user were resentful that they had paid an additional $100 for the Bluetooth-enabled Instant Pot when those capabilities hardly justified the added expense.
    3. Lots complained about the lack of recipes and recipe management within the app. One user who uses a Pinterest board to save their recipes, wondered if it would be possible to add them to the Instant Pot app.
    4. Users liked how the app displayed data on temperature, and let you adjust parameters such as cooking time, but found the Instant Pot scripts cumbersome to use—preferring to just use the manual controls on the Instant Pot itself.
    5. One user pointed out how it was odd that Instant Pot opted for Bluetooth over WiFi—given the range restrictions of Bluetooth (30 ft. max). It would be a huge convenience to operate the cooker from outside the home—say the office—rather than just the couch. Especially given that most smart electric crock pots have this feature as standard.
    6. There aren't really use cases to support a lot of the features on the app. Building scripts to control the Instant Pot remotely, for example. And the high need use cases (like turning on the cooker remotely) were not addressed at all.
     
     Image Credit:  Intercom

    Image Credit: Intercom

     

    Job Stories

    I don’t really like using user stories. I prefer job stories. It’s pointless to try and make a product better without ever understanding why customers make the choices they do. Customers don’t simply buy products or services. They “hire” them to do a job. That job is not just about function (cooking a nice dinner) but about creating the right set of experiences for customers. Those experiences have social and emotional components that may be even more powerful than the functional ones. Job stories help me map out those experiences.

     
     

    Some Sample Jobs Stories

     
     
    Screen Shot 2018-05-15 at 10.03.11 PM.png

    With the ideation phase, we can begin to brainstorm a range of ideas that address the unmet user needs we identified in the previous phase. Based on these observations and insights, I brainstormed a preliminary list of features. This is obviously a lot to parse and needs to be prioritized so we can create a viable product roadmap in a future phase.

     
     

    Red Route Approach for Feature Prioritization

    I used a red route approach to outline critical features captured by the key personas. It helped me to concentrate on the main features of the app that users really need.

    I shared the feature matrix with the original workshop participants and asked them to prioritize these features by the frequency of use and importance to build a red route table. Mapping out the red routes helped me to determine what features are the most important for users.

     
     

    Red Route Mapping

     
     

    Defining the MVP

    We did a great job understanding customer needs, pain points, and goals. We brainstormed some features to potentially address those needs and prioritized them. Of course, we can't (nor should) include all of the features in our first release of the app. Most would go into a backlog. So how do we define our first MVP? Remember, we want to include the smallest set of features that delivers the highest value for our users.

    Story Mapping

    I like to use story mapping do this, leveraging some of the user journey work we did previously.

     Story Mapping to Help Define the MVP

    Story Mapping to Help Define the MVP

     
    Screen Shot 2018-05-15 at 10.03.23 PM.png
     
     

    I created a paper prototype to test my design ideas with my informal user friends & family user group. As tempting as it is to jump right into high-fidelity wireframing, I always have a great experience with paper prototyping and I was amazed by its benefits. It’s a great tool to test an app’s navigation and workflow, create a rough layout and quickly test your ideas.

     

    Some Early Pencil Sketches

     

    Testing with Paper Prototype

    After creating a paper prototype, I conducted a user testing to validate my ideas. I gave the participants a tas k: “Imagine that you came arrived home from work and want to make dinner using your Instant Pot Smart using the app.” I watched their behavior and took notes. 

    I asked the participant to speak aloud while performing the task. I noted all my observations on the stickers —one observation per sticker. Then I used the affinity mapping method to find similarities among my observations and to group them.

    Wireframes

    After analyzing the test results, I felt enough validation around my assumptions to move it was time to move onto wireframes for additional testing and user group feedback. I used Platforma’s wireframe stencil kit for mobile to save time and began assembling the wires in Sketch.

     
     My Sketch Artboards

    My Sketch Artboards

    Wireframe Details

     

    Functional Prototype

    Happy with the wireframes I developed, I moved into a functional prototype for further user testing and feedback. I used Mockingbot to create the first iteration of the prototype including my findings. This app has an awesome feature — it allows you to view the links between screens. It’s a good way to improve the navigation map of your product. MockingBot also integrates nicely with Sketch, so I can quickly import my visual design mockups back into MockingBot if I choose to. 

     
    Screen Shot 2018-05-15 at 10.03.32 PM.png
     
     

    After testing my prototype yet again with my amazingly generous friends & family user group (I think I owe these people another dinner), I started working on the visual design of the app. This is totally my wheel house, so I was eager to get started. But before I did, I spent some time on the Instant Pot website to get a firm grounding in the company’s branding and visual identity.

    Visual Language

    I then put together a visual language guide to help guide my visual design of the app. This will form the basis of a style guide deliverable later.

     
     
     Visual Design Toolkit

    Visual Design Toolkit

     
     

    App Icon Designs

    App icons are kind of like a visual anchor for a product, a tiny piece of branding that not only needs to look attractive and stand out but ideally also communicate the essence of your app to the customer. Here are some of the app icon designs I explored. I felt like the red colored "O" from the logo was visually distinct and interesting and perhaps could serve well as a unique visual device for the icon.

     
     

    App Icon Design Explorations

     
     

    Early Visual Design Concepts

    These are some of the early visual design explorations. Once I got all of the flats done, I moved them into Principle and started building a tighter functional prototype for more user testing.

     
    1.png
    4.png
    2.png
    5.png
    Visual -3.png
    7.png
     

    Functional Prototype

    I imported all of my completed artboards into Principle and set about building a functional prototype to model out some of the microinteractions.

     Prototyping in Principle

    Prototyping in Principle

     
    Screen Shot 2018-05-15 at 10.03.39 PM.png

    Once we have validated our visual designs the next step is the Build Phase. This is when developers start working with our designs and developing the final iOS App. Of course, development has been an integral part of this process from the very beginning, so there should be no surprises during this phase. And given that this is a spec project, no actual development will occur.

    The Handoff

    Some designers prefer to use Sketch’s built-in redlining capabilities to generate the specs needed to guide development and I still do this occasionally. But lately I’ve been using Zeplin—a collaboration tool for UI designers and front end developers. It plays well with Sketch and even integrates with Slack.

     Recipes Artwork Brought into Zeplin

    Recipes Artwork Brought into Zeplin