Suvie Smart Meals

Simplifying Online Subscriptions

pexels-photo-265667.jpg

Click/tap image to expand

Summary

Suvie is a smart, all-in-one cool-to-cook dinner making machine. In addition to their appliance, the company also sells a companion meal subscription service, Suvie Smart Meals. In March and April 2020, Suvie approached our team to redesign the Smart Meals portion of their responsive web app, so that it could match the style, sophistication, and ease of use of their product. We focused our efforts on the onboarding & meal selection pages. We completed this project entirely remotely, due to COVID-19.

Tools: Sketch, inVision, Miro, Zoom, Figma

Duration: 3 Weeks, 2020

Our Team

I was lucky to be able to work with two other talented UX Designers on this project. While all three of us contributed to the research process and our design's sketches, wireframes and high fidelity prototypes, we each worked on different sections of the user flow, and divided up the higher level group responsibilities between the three of us. 

The Researcher

User Interviews & Usability Testing

Created Delivery Summary Page

The Communicator (Me)

UX Writing, Team Meeting Facilitation, UI Elements

Redesigned Product Onboarding

The Finisher

UI System, Packaging Deliverables & Dev Transfer

Redesigned Meal Selector Page

As The Communicator, my high level focus was on using visual and verbal language to make sure our designs were as intuitive as possible for our users. I also facilitated most of our meetings with our cross-functional team of Suvie's leaders, which included Marketing, Operations, IT, Customer Service, and the Suvie Test Kitchen.

 

Research

Business Problems & User Problems

In our initial consultation, the Suvie leadership presented us with two problems they'd seen with Smart Meals:

Smart Meal Signups

A significant portion of customers who purchased the Suvie appliance were not signing up for a Smart Meals plan.

Meal Selector Complaints

Suvie's Customer Service team received a large number of complaints about the Smart Meals Selector's functionality.

The insights that Suvie provided us were a great jumping off point, but we needed to understand our users and the problem better. We decided to approach the research in three ways: 

  • A Usability Audit of the current state to identify problems for ourselves.

  • User Interviews to learn more about users' wants, needs, and motivations.

  • Competitive Analysis of other meal subscription services, to see how they addressed similar issues.

Usability Audit

Our first step in the research process was to familiarize ourselves with the current state of the platform. Suvie provided us with dummy logins, so that we could go through the entire end-to-end process from the user's perspective. As this is a responsive site, we each went through the process on a different device: desktop, tablet, and mobile

We took screenshots as we went, and noted all pain points, inconsistencies, and errors we came across. We compiled our findings and presented them to the Suvie team.

Screen Shot 2020-05-04 at 4.37.32 PM.png

Click/tap image to expand

The three biggest areas of improvement we found during our audit were 

Naming Conventions, Functional Redundancies, and Interface Visibility

Naming Conventions

The naming conventions for used during onboarding were inconsistent across the different plans.

Functional Redundancies

We noticed that there were screens that didn't serve a functional purpose, and limited flexibility on the site.

Interface Visibility

Elements that were crucial to the site's functionality were hidden, either by line breaks or lack of contrast

User Interviews

The next task in our research was conducting User Interviews. We conducted 6 interviews with current Suvie customers from across the country. While 6 seems like a small number of interviews for a project of this scale, we were using the interviews more for validation of our findings from the Usability Audit, and to create a proto-persona of the Suvie customer. If we had been conducting generative research, we would have required more.

I conducted one of the six interviews, and participated in a remote Affinity Mapping exercise with my two other teammates using Miro. 

Screen Shot 2020-05-05 at 10.30.37 AM.pn

Click/tap the image to expand

Our interviews yielded two overarching themes from our users:

Praise of the Company

Overall, these customers were very satisfied with Suvie, and wanted the company to succeed. 

Many were early Kickstarter backers, and have supported the company since its inception. 

Confusion about the Website

Almost all of our interviewees mentioned some kind of workaround they use, either on the Suvie appliance itself, or the website and ordering platform.

Users were understanding, but were also hopeful for change.

Using all of the information we gathered from the interviews and Affinity Mapping exercise, we created the Proto-Persona for Suvie's primary user, The Superstar Provider. She is a busy professional, family oriented, and an early adopter to technology. She believes in the value of small business, and loves innovative tech.

Suvie,

Click/tap the image to expand

Competitive Analysis

I was primarily responsible for our final piece of the Research puzzle, our Competitive Analysis. The Meal Subscription space is very crowded, so we had a lot of competitors to choose from, with varying degrees of similarity. I decided to specifically focus the Competitive Analysis on the pain points we discovered from our Usability Audit and our User Interviews. 

Suvie's Meal Card

Meal Cards from (clockwise from top left) Hello Fresh, Freshly, Chef's Plate, and Sun Basket.

The main challenge with the Competitive Analysis was that most companies' meal selectors were hidden until you subscribed to one of their plans. To get around this, I enlisted some contacts to take screenshots of their services' systems, and the team used our own subscriptions to companies like Freshly, Home Chef, and Hello Fresh.

The Competitive Analysis was not a single step in our process. Rather, we ran several different comparisons based on specific elements we needed more information about. In the above example, you see the meal cards from Suvie and four of its competitors. We used this information later in our process to inform our UI designs and button copy

Our Problem Summary

Suvie customers need a more efficient and delightful way to manage their Smart Meals because they expect premium quality and convenience from their investment.

Our Solution

By redesigning the onboarding process and Smart Meal Planner to have fewer steps, clearer language, and more intuitive navigation, we will make the entire Smart Meals experience better for Suvie customers.

 

We will know this to be true when we see a reduction in customer service complaints and an increase in the use of Smart Meal plans.

 

Ideation

Putting Research to Work

Before jumping in to our ideas, it's important for us to know exactly what parts of the site we are designing for. Below is the User Flow for the current state of the site. If you hover over the image, you can see a summary of the changes we made. 

These three screens represent the Onboarding Flow for Smart Meals. This was my primary focus.

These screens are for the Meal Selector, which my teammates were in charge of.

This is the purchase flow for the Suvie Appliance, which leads customers to the Smart Meals portion of the app.

Current State

The Onboarding Home Screen

As I mentioned earlier, my main task for Ideation and Iteration was the Onboarding Flow for Smart Meals. While not as visually complex as other portions of the site, the Onboarding Flow had some complex functional and writing problems that needed to be addressed. Below is a screenshot of the original onboarding screen.

Click/tap the image to expand

As I mentioned in the Research section above, there were several issues that needed to be addressed here:

  • Naming Conventions - Both the section headings and the plan names were inconsistent.

    • E.g. "Protein Box" is not a Frequency. "Flexible" and "Protein Box" can be delivered every 2, 4, or 6 weeks.

  • Icons - Both "Flexible" and "Protein Box" are frozen plans, indicated by the snowflake.

    • The icons are not indicative of what you actually receive, requiring the user to read further.​

  • Flexibility in the System - To find out more about the plans, a user has to go several screens in to the process​.

    • When you click or tap a card, it only selects that card, then a user has to hit the "Next" button to proceed.​

I began addressing these issues with my first sketch that I presented to my team for feedback:

Click/tap the image to expand

I decided to keep the three card layout from the original design. However, I changed the heading to be more of a summary of what the user was doing on this page, with some options to keep the language flexible. 

I changed the name of the first plan from "Weekly" to "Fresh". The reason behind this was that while this plan is the only one that is delivered weekly, the most important difference from the others is that it has fresh ingredients.

I also began working on icons for each plan, to be more indicative of what was included in each, as this was a major deciding factor for users. I also began iterating on the copy in each card to be more reflective of the differences between the plans, avoiding redundant and irrelevant information.

After our team meeting, the team decided that the Meal Plan icons were helpful, but that the same icon should be repeated for each element across the plans, for the sake of consistency.

 

Our team's Finisher took our sketches and created the digitized version above, which we presented to the Suvie leadership. They really liked our ideas, except that the icons for Fresh and Flexible plans should include sauce. I made the update on our next iteration.

The vertical card layout is also easily adaptable to mobile, which was important for us to keep in mind. 

Refining the Onboarding Process

In the current state, the remaining onboarding process happens across three more screens, where the user has to make a decision, select that option and then select the "Next" button. We learned from our research that this was not ideal for two reasons:

  • It's a lot of clicks - Having to select two things on each screen was annoying

  • It's not very flexible - If you want to learn about a plan, you have to go through the entire process. Then, if you change your mind, you have to hit the back button until you're at the appropriate screen again. 

Click/tap the image to expand

To address these concerns, I decided to create a single modal that would provide all of the information for each of the plans on one screen. The user would be able to get all the information they needed at one glance, and could easily look at different plans by closing the box. 

This design was successful in allowing users to understand all of the differences between the plans, including frequency, size, and price. In this low fidelity sketch, I still needed to work out the details on the language and imagery associated with the questions. 

Order Summary Page

Through our Competitive Analysis, we found that Suvie was missing a page that listed a user's order summary, which almost all of the competitors had, in one way or another. The Researcher on our team took this on as his main responsibility. Below is his sketch fo the new page. 

The Your Deliveries page contains a series of carousels containing the meal cards that are in each upcoming order. It was important to us that users were able to get a snapshot of their future orders, as well as clear messaging for being able to change meals in a given order, or skip the week if they didn't want to receive a delivery. 

Our interview participants also told us about the importance of knowing when the cutoff time for ordering meals was, so we indicated that under the date in each order. 

Meal Selector Page

The Suvie Meal Selector page is the most robust part of the current site. However, our research showed us that there were several issues that needed fixing, including UI visibility and visibility of system status to know how many meals wee currently in an order and know when an order was saved. 

One other element that came up in our research was the importance of being able to add more meals to your order than your plan allowed, for the sake of being able to organize your meals more efficiently. To accommodate this, we allowed the user to add extra meals, though provided clear messaging that they were not able to save their order until they selected the appropriate number.

 

Testing & Iteration

Validating Our Designs

Our Researcher was in charge of organizing the Usability Testing, though each of us took an active role in testing. We used Zoom to meet with our testers, having them screen share while they went through the tasks on our prototype on inVision.  

We knew it was important to get the input of both current and prospective Suvie customers. Our Researcher conducted the interviews with current customers, and I was responsible for recruiting and running the tests with prospective customers. We each conducted tests on desktop and mobile. We rated the users' ease of completing each task on a scale of 1-5, and took qualitative notes on observations and suggestions. 

Scenario: Suzie Gets a Suvie

We prompted users with the following scenario: "Your name is Suzie Sample. You just bought a Suvie appliance to make your life easier. You've heard Suvie also offers a meal subscription service to go along with the appliance and you're interested in learning more about it."

Click/tap either of the images to expand

We began testing on the above high fidelity prototype, because our current Suvie users were already used to the branding and functionality of the site. We wanted to work within those systems that were already present.

 

For the prospective customers, I did a brief walkthrough of the product and Smart Meals system before presenting the prompt. The reason for this was to give users some context, since it is highly unlikely that a user would make the significant investment in the Suvie appliance without at least first looking through main talking points on the homepage.

Feedback: Make It More Obvious

The first few rounds of testing showed us that users were receptive to the changes we made. However, it still took some time for users to be able to scan and understand the information presented on the cards. To address this, I added some bolding to key words in the cards, particularly items that differentiated the plans from one another.

I added some redundant information to the cards about the frequency and what's included, since users had some difficulty understanding this, even with the explanations.

Users also expressed an interest in seeing more about the actual food included in the meals. To address this, we implemented photos of an example that encompassed the meal plan on the card. We received a lot of positive response that not only was this more informative, but the bright photography was more appealing and appetizing.

Click/tap either of the images to expand

Okay... A Little Less Obvious Than That

In the first version of the prototype used for testing, I wanted the users to be able to click or tap through all of the possible choices in the Onboarding screens. One of the key tests was whether or not the user felt flexibility and freedom to explore within the system. 

I also wanted to design with accessibility in mind. The user would click or tap into a card for the plan they were interested in, and use the toggles on the card to make their choices.

Click/tap either of the images to expand

Overall, users found the screens easy to navigate and understood the information being conveyed. However, due to a combination of overzealous attempts at accessibility and not paying close enough attention to my layout grids in Sketch, the cards and toggles were proportionally too large, and ended up detracting from the experience. 

On the final iteration of my Onboarding screens, I adjusted the proportions of the text and buttons to be more appropriate, and incorporated the UX Writing changes that I described in the previous section. 

See the GIF below for a walkthrough of the onboarding screens in the final mobile version. 

Upcoming Deliveries & Meal Selector

In our Usability Testing scenario, we instructed the user to run though a series of tasks to test the interface on the Upcoming Deliveries summary page and the Meal Selector page. For Your Deliveries, we had the users:

  1. Choose the Fresh Plan, 2 servings, 4 meals per week.

  2. Skip/Unskip your next delivery.

This page was originally titled Your Deliveries, and our original intent was to list both past and future deliveries. However, users and the Suvie team responded better to just showing future orders, which is why we decided to change the page title to Upcoming Deliveries. Users could access their past orders from their account page.

The Meal Selector went through a series of changes, particularly crucial on the mobile version. For this portion of the user flow, we asked users to complete the following tasks:

  1. Add "Pulled Pork" to your delivery and try to complete your order. 

    • At this point, the user would see that the Save Selection button is greyed out​

  2. Remove the Spinach Frittata, and save your selection. ​

With such limited screen real estate, it was particularly imporatant that we gave users lots of clues regarding their selections, and how they could modify those selections. Through our testing, we landed on the designs you see above. These include:

  • Highlighting a selected meal card with a contrasting border

  • Indicating that a cart was overloaded with the red indicator at the top-right

  • Making sure users knew the indicator also opened the side panel by highlighting it with the green outline

  • Making the most recently added selection appear at the top of the list in the side panel

  • Allowing users to remove selections from the main screen or the side panel depending on their preferences

The above images show our iterations our design for the cart indicator on the upper right corner of the mobile version. The first version is a copy of the current state. The middle example shows how many meals have been added, but users did not know they could use that iteration to open the side panel. We then created the final iteration on the right, which users said was much more intuitive. 

 

Conclusion

Development & Future Steps

Working on this project has been an incredible opportunity. I worked with an incredible team of designers, and we were fortunate to work for a client who was smart, responsive, and receptive to our suggestions. Being able to work within a strict set of branding guidelines was a unique challenge, but I feel very confident in the work we were able to accomplish in just three weeks. 

When we completed the project, we handed off our assets to the Suvie team. We converted our files from Sketch to Figma and granted editing access to our prototypes. As of writing this, the Suvie team has started to implement some of our designs on their live site. See the screenshot below.

Given the scope and timing of this project, I feel really proud of everything we accomplished for Suvie and their team. If we had the chance, I'd love to focus on the user experience of other parts of the website. Plus, our users made several suggestions around adding additional meal options or ordering more than your plan's limit. When we were working with the Operations team, we learned that there would be complications with incorporating these into our current ideas. However, I would love to learn more about how UX and other departments like Operations, Marketing and even the Test Kitchen could work together to make a better overall experience. I would also love to get into the software of the appliance itself to see how that experience could be improved. 

I'd love for you to check out more of my work.

Let's Connect!

dylanjuscher [at] gmail [dot] com