SUVIE RESPONSIVE WEB APP
Making sense of meal deliveries
Suvie offers a personalized meal subscription service integrated with a Wifi-enabled countertop appliance. To reduce customer support escalations related to their website, my team conducted a UX redesign of their online meal planner.
The problem
After buying Suvie’s state-of-the-art countertop appliance, customers can also sign up for home-delivered Smart Meals that are custom-made for the Suvie oven. Suvie offers customers three different meal plans to opt into and customize based on their family size and preferences.
The problem is that Suvie’s meal planner webpages had some serious usability issues. A steady flow of customer complaints suggested that the web app was not on par with other popular meal kit services—especially on a mobile device—and needed a redesign.
Suvie’s website needed to be more usable across various devices, particularly mobile.
Our design process
In an initial Discovery session with Suvie’s VP of Marketing, VP of CX, and Director of Operations, and CTO, we discussed the current state of the website, business goals and background, and defined our final deliverables: clickable prototypes of the mobile and desktop site in InVision and a set of high-fidelity screens in Figma.
Next, my team developed a rough timeline for our 3-week sprint. The 5 phases of our project were designed to answer several questions. Who are Suvie’s users? What are their needs and goals when it comes to Suvie’s meal planner? How can we build a more intuitive and delightful experience for users selecting a meal plan and managing their meals?
Project management
In the role of PM, I was responsible for the building the project plan, managing deadlines, and distributing work across our team of 3. I used a Trello’s kanban structure of task management to keep our team synced on deliverables and on track to deliver a stellar final product.
Our Trello board for Suvie.
Getting to know Suvie
As a part of our research, I wanted to build empathy for Suvie’s customers by becoming one. I decided to test out Suvie’s Flexible Plan, which consisted of flash-frozen meats, grains, and sauces. While I don’t own a Suvie appliance, I was still able to cook some delicious meals in my own oven, like salmon pesto with farfalle pasta.
Assessing Suvie’s website
We had initially set out to kick things off with a round of usability tests on the area of the website that had a high drop-off rate, in order to uncover key pain points and usability issues.
However, after reviewing a log of customer complaints that had been compiled by Suvie’s VP of Customer Experience and clicking through the planner ourselves, we were able to get a pretty good idea of what parts of the website needed most attention without any usability tests.
Our annotated click-through of Suvie’s meal planner.
What we heard from users
Affinity mapping helped us build a clearer picture of who our users were and what they wanted.
We conducted interviews with Suvie customers to learn about who they were and what their experience had been of the area of the website we were tasked with improving.
We focused our initial interviews on current customers, but we knew that later in the project it would be critical to have both current and potential customers test the redesigned site.
We found that Suvie’s customers loved the Suvie appliance, the Suvie brand, and wanted to see the company succeed. That being said, we also learned that they were frustrated with aspects of Suvie’s website.
A note about scope: In our interviews, we heard a consistent desire for greater flexibility, variety and customization within meal plans. Some of these concerns were outside the scope of this particular project. Aside from the limited period of time we had, there were existing operational constraints to consider—around meal packaging and shipment, delivery windows, and even the technology of the appliance itself. With this in mind, it was important to remind ourselves that our job was to improve the website based on the meal plans as they currently existed, rather than what the plans could potentially look like.
Quotes from user interviews
“It's very hard to understand what you've actually ordered.”
“I never check my personal email, so I need to know my order cutoff right on the website.”
“I don’t know how many weeks in advance I can plan my meals.”
Our proto-persona
We developed a proto-persona to summarize our user research and guide our design decisions going forward. The Superstar Provider is someone who purchased Suvie to get time back—time to spend with their spouse, time to spend with their kids, time to relax and unwind. With the little free time she has, she doesn’t want to spend it planning, shopping for, and preparing meals.
Her intense work schedule means that she might have very limited windows of time to be using Suvie’s website, and would often be accessing it from a mobile device.
Competitive analysis
We took a magnifying glass to everything from user flows, key features, cart structure, and components such as individual meal cards, all the way down to the “add a meal” button.
To set ourselves up to develop the strongest solution, we conducted a thorough competitive analysis. Something we heard consistently throughout our interviews was that Suvie users had used many other subscription meal services already, and often were using other meal services concurrently with Suvie’s. So, we knew that incorporating the strengths and learning from the weaknesses of competitors would be fundamental to our redesign.
Some of our takeaways from the competitive analysis:
The button to add and remove meals on Suvie’s meal cards could be much more visible
A summary page with multiple weeks of orders displayed could help users plan their weekly meals better
Research synthesis
We stepped back from our insights, and articulate themes that would frame our ideation process.
How might we make the distinctions between the different meal plans more clear to users?
How might we allow users to sign up for and manage their meals in fewer steps?
How might we give users better feedback on where they were in the meal ordering process?
These opportunities intersected with the business goals of the project, which were to increase the percentage of customers who immediately order meals after ordering the Suvie Appliance and continue to drive revenue from these customers over time.
User flows
We kicked off our ideation process by sketching out Suvie’s current user flow, and looking for redundancies and inefficiencies. With customer feedback in mind, we wanted to adjust the flow in several key ways:
Simplify the onboarding process from three screens to one
Add a summary page (“Your Deliveries”) which allows customers to view and make changes to their upcoming orders on a single page
Adjust navigation around the meal planner page to make it easier to make changes and save selections
A user entering this flow has already purchased the Suvie appliance, which is represented by the left half of the user flow diagram. Areas of the flow that we changed are highlighted in green.
I focused on the order summary page
On Suvie’s current site, you can see in the purple callouts how each week of deliveries was managed on a separate page. Users had to click the green arrow to navigate to a delivery, and had no way of seeing a snapshot of all their orders in one place.
After coming to a shared understanding of the changes we were making to the user flow, each member of my team took on a different section of the flow to develop from low-fidelity to high-fidelity. I was responsible for creating a brand-new dashboard summary screen.
So, why did we need a summary page? On Suvie’s original site (see image), users had to click through different pages to review multiple weeks of upcoming deliveries. There was no bird’s eye view. We’d heard from users that they disliked eating the same meals multiple weeks in a row, and so seeing a snapshot of multiple weeks could help them avoid this.
The websites for several of Suvie’s competitors—including a company called Home Chef that came up in our user interviews—welcomed users with a summary page containing all their upcoming orders in horizontal carousel format on a single page, and we wanted to bring this feature to Suvie.
Wireframes
The new dashboard page, called “Your Deliveries” (changed to “Upcoming Deliveries” after user testing) allowed users to see a snapshot of—and manage—multiple weeks of upcoming deliveries.
Some key features of my first iteration of “Your Deliveries”:
Button to CHANGE MEALS at the top of each order carousel. We wanted to make it easier for Suvie’s customers to customize and create variety in their deliveries across multiple weeks.
Button to SKIP WEEK. We’d heard from Suvie' customers that their need for Suvie shifted frequently from one week to the next (family vacations, desire to cook from scratch, etc.), so it was important that they be able to skip weeks (and unskip) easily.
Prominent display of the exact cutoff time and date to make edits to their orders. Suvie customers told us that they wanted clarity on this, down to an exact hour, so that they were never left wondering.
A button for users to change meal plans. Suvie users wanted more flexibility and fluidity in their meal plan experience. Making it simple to modify their plan could address that need.
A sketch of the “Your Deliveries” dashboard.
My teammate Dylan was responsible for revising the onboarding process. He developed a modal card system that would pop up over the initial cards on the screen. This way, the user could easily click in and out of plans to learn more about them without leaving the page.
Luis was responsible for improving the meal selection page. He introduced simplified, more visible buttons to add and remove items. The revision also allowed users to add more meals to their order than their plan allowed, but then prompted them to remove a certain number of meals in order to save the order successfully.
Building on-brand UI
We presented our wireframe concepts to a diverse cross-section of the Suvie team (marketing, operations, and customer service) and received positive feedback—we had the green light to begin testing our designs with real users.
We decided it would be best to use a higher fidelity prototype than our early wireframes for our user testing. Our decision was based on two factors:
Suvie already had a well-developed set of brand guidelines and marketing assets, which they were committed to using for the foreseeable future
A significant number of our user tests would be conducted with current Suvie customers— already accustomed to Suvie’s website—so testing them on a lower-fidelity prototype could result in unnecessary confusion
Suvie’s brand manual.
Mobile screens were key
As we developed our the UI, we knew from discussions with Suvie leadership and users that the mobile interface was as critical as desktop or tablet. As a result, we had to be very disciplined about the amount of information we displayed on any given page, given the small amount of screen real estate on available on phones.
For the deliveries summary page on mobile, I designed each week of deliveries to display one meal card with another peeking from off-screen to invite horizontal scrolling through the carousel. Users could scroll down vertically to see additional delivery weeks.
Mobile
Desktop
Usability tests
We conducted a total of 10 usability tests with a mix of existing customers and potential customers that had passed our participant screener. Using InVision, we set up clickable prototypes of the desktop and mobile interfaces.
Test Scenario: 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 them.
After presenting the scenario, we asked participants to complete 7 different tasks, including: selecting a meal plan, skipping a week of deliveries and editing their meal selection. We rated users’ ability to complete tasks on a scale of 1 - 5.
New and current users were able to complete the tasks fairly easily. That said, we also heard many ideas on how we could refine our prototype. On the meal plan selection page, for example, we had developed a set of icons representing proteins, sauces, grains, and vegetables to illustrate the components that came standard with each plan. Alas, users told us that these felt a little too abstract, and that high quality photographs of actual food would be more descriptive to them. With this update, users told us they felt more confident in making a selection.
Before
After
Final prototype
Our final clickable prototypes (desktop and mobile) demonstrate how a user could go about:
Learning more about Suvie’s Fresh, Flexible and Protein Box meal plans
Selecting a meal plan
Reviewing upcoming deliveries
Skipping (and unskipping) a week of deliveries
Customizing their meal selection
Saving the updated selection
A major point of concern for users we had interviewed was that the original app did not tell them that the changes they’d made to the meal plan were saved. To provide better feedback, our design included a confirmation page to communicate to users where they were in the process.
Reflection
Illustration courtesy of humaaans and Pablo Stanley.
At multiple points in the project, we nearly fell victim to scope creep, tempted to try to solve problems that extended beyond the specific deliverables we had agreed to. Working with a startup that had a lot of room to grow and evolve its services, many of the ideas we heard from users (and Suvie team members) involved significant adjustments to their operations outside of the considerations of our UX redesign.
In order to managing our limited time and energy, we referred frequently to the original statement of work and our problem statement. This ensured that we stayed on track to meet our project goals with quality, while also gathering insights that could be addressed in projects down the line.
Thanks for taking a look at the Suvie project!