Sage

Enhancing the mobile meal ordering experience for a local business

Overview

Sage is a local meal delivery service that aims to deliver ready-to-go cooked meals right to their customers’ doorsteps. It is currently owned and operated by Carrie, a former cook and chef at a local catering company.

This project was a part of a capstone project during my time as a student at DesignLab.

Challenge

As the company continues to grow, Carrie would like to have a quicker way to take orders and payments. In addition, it would be great to have a better way to show customers how the business work. An icing on the cake would be providing a seamless ordering process for the user.

Objectives

  • Create a responsive e-commerce website
  • Build a more robust order page so that users can customize their meals
  • Find a more seamless way to take payment instead of a third party app like Venmo
  • Update the copy of the website as it is currently causing confusion among customers

01 Research

For research, I conducted market search to look at the current trends of meal delivery services. I opted for a quick competitive analysis to look at some direct competitors that are also located in the Seattle area. Then I moved on to gathering more specific insights through a survey and user interviews.

The goal of the research phase is to hopefully answering some of the following questions:

  • Get a grasp of how potential and current customers feel about Sage's delivery services
  • Unearth any frustrations they have with current meal delivery services
  • How do they feel about a third party app (e.g. Venmo) to take payment?

Understanding how other competitors are dominating the market

Many meal delivery services have an emphasis on specialty meals and dietary restrictions. With the rise of electronic ordering of grocers for pick up and delivery and online sales of grocery items from e-retailers and major grocery stores, meal deliveries have exploded over the past few years.

Revealing insights on how users feel about meal delivery services

I sent out a survey and conducted user interviews to understand why people signed up (and cancelled) a meal delivery service.

I used the survey to gather quantitative data on how they generally feel about a meal delivery service while the user interviews gave me detailed insights on their goals and pain points.

Survey results at a glance
  • Only 5 out of 17 respondents cook more than 5 times a week and only 4 cook more than 3 times a week at home
  • 13 out of 17 respondents have tried a meal delivery service a few times; only 1/17 have an active meal subscription
  • 11 out of 17 respondents thought it was important for the website to provide a menu
  • 9 out of 17 respondents would love to have the option to customize their meals
What went wrong with Hellofresh?

I conducted 4 user interviews. All four interviewees had experiences using HelloFresh. Price seems to be the most important factor for when people are choosing a meal delivery service.

  • All 4 participants said they no longer have a meal delivery service because of the price
  • 1 out of 4 participants had experience ordering from Sage and likes the flexibility of it because it is not a meal delivery subscription
  • 1 out of 4 participants have some sort of dietary restrictions but she never had a problem with a meal delivery service before
  • 3 out of 4 participants said they actually enjoy doing their own groceries so a meal delivery service isn’t necessary

Creating the persona

After doing the initial research on the users, I created Hayley. The majority of the users that I interviewed and survey are between the ages 23 to 35. I also listed out the goals and needs and pain points that I can refer to as I move along the phases.

02 Define

After conducting user interviews and the surveys, I was able to outline more defined features and create a user flow that would best suit this project. I only had a timeline of 4 weeks to complete this project so it was important to prioritize what features to add onto the responsive website.

I created a short list of features based on the findings and believed these would also help Carrie solve some of the problems she was facing with the current Sage website.

Conversting users to customers

I tried to put more emphasis on the ordering process since I am anticipating more people to do that and it’s a process worth more exploration.

What features do users wish to see on Sage's website?

For the redesign of Sage, I decided that it wasn’t exceptionally crucial to have a lot of features. Here is the list of the features I ended up building out.

ā€˜Unofficial’ product roadmap
  • Important: Menu Options
    The menu will be presented with pictures so that people can get a general idea of what they will be ordering. According to the interviews, this was a preferred method
  • Important: Dietary Restrictions Selections
    Although the majority of the users do not have any dietary restrictions. I did have a user that would do intermittent fasting. It would be a good feature to have in the case that someone does have a dietary restriction.
  • Important: Integrated Payment within Website
    When I first started this project, Carrie (owner of Sage) didn’t want to pay a fee for an e-commerce website. I initially had this as a ā€˜nice to have’ but after conducting a few usability tests. I find it super important to include it as part of the website.

03 Ideate

After defining the important features that must be implemented and also defining the user flow, I moved on to sketching out wireframes and looked at how various sections and pages would seamlessly sync up with the others. I explored a few different options here.

Wireframing the homepage

I didn't do a lot of ideation for this project. After a few rounds of initial sketches, I went ahead and started creating wireframes on Figma. Even though I initially wanted to focus more on the ordering and payment, I explored some layouts for the homepage as well.

Focusing on the mobile experience

Use the arrows to navigate:

Slide 1 shows the first iteration of the ordering process which is essentially an infinite scroll.

Slide 2 shows the second iteration of the same process but this time, I decided to separate each time into individual steps.

Styling the components

The website is built on Squarespace, instead of replicating the components on squarespace, I created a basic style guide that would help me create high fidelity prototypes later on for usability tests.

I picked the colors based on her current brand and also color-picked a few accent colors from the primary images used throughout the website.

04 Prototype

I explored different layout options and defined the styles for the website in the Ideate phase so it made sense to move on to building out the actual prototype that I will later use to conduct usability tests. I really do enjoy testing with high fidelity prototypes if time permits that because I generally am able to get better feedback and insights.

High Fidelity Prototypes

Use the arrows to view steps 1 through 4 of the ordering process.

05 Testing

I was able to do two rounds of testing with the prototypes I built. The first one was a moderated usability test session. From that, I was able to gather insights of how users might proceed to order meals off the Sage website.

Due to time constraints, I ended up using Maze to do a remote, unmoderated testing session. I decided to try to utilize Maze because I thought it would be helpful to try to test out different softwares that I might encounter in the future.

What are we trying to test?

I set out a few basic objectives for the usability test.Ā The main goal is to find out how people feel about having a third party payment (instead of an integrated one). Also, I wanted to see if people feel delighted about the overall experience.

Test Objectives:
  • The overall ease of use and flow of the ordering process. Payment is separate - would this hinder the user experience?
  • Determine if users are able to find out how Sage delivers
  • Observe how users might order menu items and select their dietary restrictions
  • Observe how users might order menu items and select their dietary restrictions

Well...?

In short, the first iteration didn't fare so well. Nonetheless, I did gather valuable feedback. It was good I 'tested' early and decided to do a second round of usability testing.

Results at a glance
  • 4 out of 6 participants did not know what portions they are ordering. To make matters more confusing, when asked how many people are eating, it sparked even more questions about portions and concerns about a picky eater as well
  • 5 out of 6 participants did not know what portions they are ordering. To make matters more confusing, when asked how many people are eating, it sparked even more questions about portions and concerns about a picky eater as well
  • 5 out 6 participants were hoping to see a CTA to direct them to Venmo or PayPal (since Sage does not have an integrated payment within the website) if they were to follow through with ordering and confirming
  • 3 out of 6 participants navigated the website with the menu button, the other 3 scrolled down the homepage to eventually find the ā€˜Learn More’ CTA under How It Works
  • All participants were doing the math in their head to figure out when an order needs to be placed in order to get a Monday or Friday delivery. Some suggested it would nice to have an actual date they can refer to

Prepping for round 2

I used an affinity map to help visualize the feedback I gathered from testing. I like using affinity maps because they allow me to group similar thoughts from participants.

This activity helped me narrowed down changes I needed to make for my second iteration.

Prototype 2.0

Selecting meals and dietary restrictions.

Use the arrows to see the difference between the first and section iterations.

Review and Payment

Use the arrows to see the difference between the first and section iterations.

Moving forward

For this project, I went down a pretty standard design process. Nonetheless, I do realize that I’ll have to check back on my own documentations more frequently. A lot of the hiccups I encountered during the design process (and the usability test that came after) could have been mitigated if I actually referred back to the documents that I created.

Overall, I think having two testing sessions was helpful because I was felt like I was really designing to solve the pain points of users. I think this project is somewhat difficult because without considering the marketing aspect of things, just having good UX is probably not going to help the business grow. But I think having good UX would at least make users feel delighted and confidently choose Sage as their meal delivery service šŸ†

← Previous Project

Amazon Go Green

Next project →

Kaus