The Vitamix Perfect Blend™ Smart Scale
Interactive recipe app which allows blender owners to follow step-by-step instructions without measuring tools.
overview
The Vitamix Perfect Blend™ is an interactive recipe app for iOS/Android devices which allows blender owners to follow step-by-step instructions and measure ingredients precisely via a connected Bluetooth scale and blender to get repeatable results and accurate nutrition information. The system includes the app and a smart scale.
my role + responsibilities
My main task was creating wireframes, user interface & interaction design, and style guide. I was responsible for the designs from concept to shipped product.
-
Product Manager
-
Researcher
-
UI Designer
-
3 Software Engineers
-
Hardware Engineer
-
Quality Assurance
TEAM
timeline
Using a combination of Agile/scrum method and Lean UX, we had 6 months to ship.
background
This project was a Perfect Company partnership with Vitamix®. Perfect Blend™ was an evolution of Perfect Drink®—a cocktail recipe app, the first product created by Perfect Company. Perfect Company also launched Perfect Bake® following Perfect Drink®.
perfect drink®
The first app created by Perfect Company that connects to a kitchen scale to guide consumers to create perfect cocktails!
1. Choose recipe
2. Pour ingredients
3. Shake or stir
THE PROBLEM
-
Blender owners do not use their blenders to their fullest potential. Blender owners do not know that there are many types of recipes that blenders are capable of making.
-
Blender owners are also often health conscious and want accurate nutrition information.
THE solution
Create an app that:
-
Shows owners other types of recipes that can be made in a blender.
-
Provides accurate nutrition information of the actual recipe they have made.
-
Makes it easier to make the recipes by eliminating measuring cups/spoons and using a scale instead.
challenges
-
New work had to fit within existing framework.
-
Having a base to start from invited an aggressive deadline (since the work was already “done”).
-
The original app was designed without an explicit design system.
-
We had six months and two other projects to support at the same time.
USERS
Our users were people with blenders who would spend the money to buy high performance blenders, people interested in calories intake, and health conscious individuals.
Our users helped us decide on features to be included in the app that relates to nutrition information such as tracking and serving sizes.
BREAKING DOWn
THE PROCESS
WORK ENVIRONMENT
We had a test kitchen on site with three chefs developing recipes and testing the product constantly so we could iterate rapidly.
My main task was designing the user interface based on previous app, interaction, and design systems within the framework that was already in place.
It was very important for me to work very closely with the engineers to make sure the framework can support new designs and features.
A lot of the screens were repurposed from the previous app since the core of the app was similar, but some needed to either be adjusted or created to accommodate for blender features.
We used Git for version control with SourceTree as the client and ActiveCollab for project management.
what i did
I will talk about six specific sections of the app we added and/or modified from the previous app and discuss what we did to improve those sections.
The sections are:
-
Onboarding
-
Serving size chooser
-
Real time nutrition information
-
Blending step (instead of shake or stir)
-
Stand alone (using the blender with the app independent from the recipe)
-
Style guide
blending flow
Below is a simple flow of the app to illustrate how the the app works.
TITLE OF THE CALLOUT BLOCK
1. ONBOARDING
Being able to connect and troubleshoot is the first and most important step.
Phase 1 of Perfect Drink did not have onboarding. It did come with a printed instruction manual, but it was not a very intuitive way to troubleshoot. It created frustrations for a lot of users.
Common problems:
-
Bluetooth not enabled on phone.
-
Bluetooth not enabled for the app.
-
The scale isn’t listening for bluetooth.
Before: printed instruction did not help with troubleshooting.
ONBOARDING flow
The Perfect Blend™ app can be used without connecting to a scale. Users can browse recipes and go into the recipe creation steps. Users can choose to do the connection later.
The most important step of onboarding is to connect the scale with the device that the users are using. Once connection is established, the app asks the user to select blender model and container type in setting up as it helps with recipe creation later. For example a user wants to make 4 servings size, but they are using a container that is too small. The app can alert the user if it knows the container type—each type has different maximum volume it can hold.
Onboarding flow. Users can still go into the app without a scale.
Step-by-step instructions to connect
Onboarding helps users connect their devices to the scale.
setting up
Once connected, the app needs to know the blender model and container type information to help with serving sizes and the blending step instruction.
Each blender has different programs and controls — the blend step has different instructions based on which blender model the owner has.
Serving sizes can only be adjusted within the size of the jar — that’s why this was an important step before going into the recipe.
2. serving size chooser
To support nutrition conscious users, serving size need be adjustable by: number of servings, volume, calories.
Serving size option for Perfect Drink® was very simple, users only need to pick a number of drinks. Serving size option for Perfect Blend needed to allow users to adjust by servings, volume and calories, and because of that, the adjust serving option needed to behave differently. There was a lot of additional information we needed to present to the users on this screen, not just number of servings.
For Perfect Drink®, the only option was to change the number which was done using a picker (see screen capture below). For Perfect Blend™, there were three possible inputs that could be changed. We could have done it the same way, using a pop-up and make it bigger, but then we would need another pop-up—within that pop-up—to change the value. Not a very good interaction. Besides needing more space for more information, to solve for too many pop-ups, we decided to dedicate a full page for adjusting serving size where users can choose to adjust by.
Another piece of information the users needed to see was the volume indicator. The volume indicator would show the volume range the container could hold ranging from 20–64 fl. oz, and an indicator of the current volume. This was useful when adjusting serving size either by number or calories since it would not be obvious to the users what the volume would be.
The third piece of information was the graph showing the blender program (speed) for the recipe. This feature was only for connected blender— it shows feedback. Users needed to see that the app and the blender were talking to each other when they started the blend process.
Serving size chooser for Perfect Drink is very straightforward—just choose a number.
Redesigned serving size chooser that allows users to adjust by number of servings, volume or calories. Range and total volume is also shown so users don't make more than what the container can hold. To accommodate connected blender users, a program graph is shown which serves as feedback when the program is running.
Picker displays in context. This is also the main reason why we decided to have a full screen for serving size adjustment—do we don't end up with too many pop-ups. Imagine a pop-up for the previous screen then another pop-up for the number picker.
3. add nutrition information
Real time information of calories, fat, carbohydrates and protein needed to be prominent.
The Perfect Drink® did not have any nutrition information. Perfect Blend needs to display calories, fat, carbohydrates, and protein as the ingredients are being poured. This was necessary as some users would want to be very accurate on their caloric intake.
Real time totals for nutrition categories are displayed at the top of the screen while calories for the current ingredient are displayed in the ingredient box.
4. blending step
Guiding users in the blending step to get the best result every time.
Recipes require different speeds of blending to be made optimally. We had to support users with non-connected blenders to communicate the instruction, as well as users with connected blenders which the app could send programs to.
WHAT NEEDED TO HAPPEN in this step
-
Guide users with non connected blenders through the optimal blending speeds when making a recipe
-
Communicate to users with connected blenders that the blender and app are working together in the recipe.
In Perfect Drink®, the blending step is the mixing step (shake or stir) with a timer with an instruction. The example below tells users to add ice to the shaker, remove from scale, stir for 40 seconds then pour into glass. Users will tap start to start the timer, they can also pause and reset.
Built-in timer and simple instruction for the mixing step for Perfect Drink®.
“Blend until smooth....”
Most blender recipes will say: Blend until smooth. This was not very clear to a lot of users. To achieve the best blended recipes, Vitamix® have exact instructions as to how long to blend and at what speed or for connected blender owners, which program to use.
connected blenders
Users of connected blenders just needed to press a button on the blender to start blending. The blend step also needed to show the users which button(s) on the blender to press to start the blending. Users did not need to concern themselves with starting a timer and adjusting the blender speed.
We knew that visual feedback was very important for the users so that they could see that the app was communicating with the blender. Users needed to see that their blender was doing what it was supposed to be doing. “Is it blending? Is it doing it at the right speed?” That was the reason why we thought it was important to show the graph with the speed variation during the program and show an overlay of the actual speed in progress.
Initially we wanted to do too much, because we had the data for both blender power and speed, we thought of showing both. We also thought using a spinning Vitamix®’s logo—the vortex—was a clever idea, but it was a breach of their branding guidelines. A simple line graph with just the speed was what we ended up with.
Early sketches of the blend step with both power and speed.
Using the icons from the blender faceplate in the blend step instruction for one to one mapping to removes confusion of what to press.
A few mock-ups of the blend step graph. The pulse and start/stop illustrations mimic the ones on the blender. Showing actual speed while blending is in progress reassures connection.
“Users need to see that their blender was doing what it was supposed to be doing. ”
final design of the blend step
Connected blender owners only need to press the buttons on the blender and it will start, stop and use the correct settings the recipes requires. The graph helps the user see that the app and the blender are communicating with each other.
non-connected blenders
For non-connected blender users, what they needed to know were:
-
How long to blend
-
When to change the speed
We decided to show an animation so the users can follow what to do (change speed or setting) and when to do it (when to speed up and when to stop). We also added an audio alert when the settings need to change, which in most cases it starts slow and speeds up after a few seconds.
We needed to accommodate all Vitamix® blenders. The control panels for all models need to be created for this step.
The different blend step control panel illustrations depending on what model blender is being used.
5. stand alone
Using the app as a stand alone flow.
Stand Alone wireframes. Users can skip the recipes and go to the blender program menus from the home screen bottom navigation. If the app does not detect a scale, it will guide users to connect.
final design for stand alone version
Vitamix® connected blenders (Ascent Series Blenders) only come with five default programs, using the app allows users to get more programs. The idea was also that there would be more programs in the future and to be able to push the new programs through the app was exciting.
Connected blender users can use the app to send blending programs to the blender without following a recipe.
Using the app, users of connected blenders can access a full range of Vitamix®’s blending programs beyond what comes with their blenders.
6. style guide
I created the Perfect Blend™ App style guide using the existing Vitamix® guidelines.
Perfect Blend™ style guide based on the existing Vitamix® branding guide.
outcome
Perfect Blend™ launched on October 6, 2016. The product was available for purchase at the Vitamix® website and Costco stores where Vitamix® did a lot of demonstrations.
Vitamix Perfect Blend™ was demonstrated at multiple Costco locations throughout the country.
APP store images
App store images.
Vitamix® made a great promotional video for this product. Perfect Company also made a lot of how-to youtube videos for Perfect Blend™.
Perfect Blend™, together with Perfect Drink® and Perfect Bake®, Perfect Company
sold over 500K units with $12.5M revenue
lessons learned
NOT ENOUGH TIME
Based on app reviews, a lot of users had difficulty using the app to create their own recipe. If there was a phase 2, that is what I would have liked to have time to work on. We didn’t have enough time to work on this part, we reused this feature from the previous app.
As a recipe book, the app has done well to execute them, but we did not know that recipe creation is what a lot of users were more interested in.
ORGANIZE DOCUMENTs
As I was writing this case study, I realized that there are a lot of sketches that I did on pieces of loose paper that probably got recycled. Going forward I need to be more organized so my case studies can be more complete. I also need to take a lot of behind the scenes photos.
what i might do differently/if there's more time
allow filter recipes in browse
When users create their account, the dietary preferences is set in the beginning which makes this a user setting. If a user needs to change this they have to go into the profile which is quite burried.
Users can turn off the dietary preferences which will give them all the recipes, but there is not an easy way to search for a special diet unless they change their settings, which is located in:
More » Profile » Diet »
Users can find recipes based on categories, and also their personal settings by toggling preferences.
How users would change dietary preferences which is in the profile settings. This was also done via profile to get users to login or create an account if they have not done so.
Adding a Filter option would help users find recipes based on specific diets easier without needing to go into Profile.
simplify adding new recipe creation
The decision was to make the new recipe creation screen looked similar to the blending/making recipe. However this is not very user friendly. Perhaps just entering new recipe with text would be easier since people are already used to seeing written recipes.
Existing Add New Recipe Screen.
Possible simplified text based Add New Recipe Screen screen.