sweetgreens

reimagining healthier communities by connecting people with real food

Role Designer Type Project Skills UX Research, UX Design
Sweetgreens mobile redesigns mockup

with humble beginnings, sweetgreens is a restaurant brand serving healthy foods at scale that does not compromise quality for convenience. sg create experiences that connect food and culture.

Sweetgreens mobile redesign mockup

THE INTRODUCTION

sweetgreens is rooted in delivering healthy, fast, affordable, seasonal, and environmentally sustainable food accessibly. they strive to tell the story of real food and be a bigger part of that conversation. with intimacy at scale core to its identity, sweetgreen strives to serve healthy foods and seasonal, curated experience at scale while still keeping its beloved sweetgreen brand intact. sweetgreen addresses the struggles with finding options that are fast, affordable, and healthy.

despite its physical space takes reign, their digital presence has grown drastically. according to sweetgreens, "nearly 50% of orders in the last year came through its mobile app, which has more than a million users". sweetgreen wants to enhance their order-ahead app experience its customers has across all touchpoints of its digital space particularly in truly representing the sweetgreen experience, expanding storytelling around food, and bridging the gap between bowl and app. Their internal design culture is lead with two essential design principles in mind: content forward and personalization.

essentially, sweetgreens wants to

revamp their mobile order-ahead app that enhances their brand experience to connect with their customers and best support their user's lifestyles as sweetgreen embraces modularity.

RESEARCH

What is sweetgreen’s digital facing?

sweetgreens wants to elevate their customer's digital experience that reimagines and meets their customers where they are at. I set out to optimize and transform the sweetgreen digital food ordering experience of connecting people to real food. By redefining the experience of sweetgreen’s mobile ordering application, I am delivering the essential sweetgreens cultural experience where people and passion and purpose come together. I want to understand the core problems sweetgreen's digital is currently facing.

i wanted to understand the following regarding customer's mobile ordering experiences and their sweetgreen experience:

  • identify what motivates and demotivates people from ordering healthy food options

  • understand what makes healthy food inaccessible for people

  • understand their food ordering habits and decisions (particularly for general food ordering experience, in ordering healthier options, and in ordering bowl mixes)

  • understand their sweetgreen experiences

 

5 user interviews

affinity diagram

5 user interviews quotes from participants screenshot
Affinity diagram on Figma screenshot
 

with the existing sweetgreen's interface, i wanted to analyzed the existing mobile app and identify any core usability issues from visual to interaction. the feedback review (reviewing more present from 2020 - 2021) reviews to gather feedback from a wider customer base. a competitive analysis was completed to identify design opportunities that are currently inexistent within healthy mobile ordering and inform valuable design features and mobile ordering flow.

 

interaction map

Interaction map on Figma screenshot

app feedback map

App feedback map on Figma screenshot

competitive analysis

Competitive analysis on Figma screenshot

HERE’S WHAT I FOUND:

sweetgreen customers are lost throughout their mobile ordering journey. they feel misled, under informed, and underwhelmed. customers do not feel they have autonomy over their online orders, and as a result, spend longer than expected to complete order. hence, sweetgreen customers are demotivated and not empowered to eat healthy.

Why is that?

 

01

INCONSISTENT PICK-UP / DELIVERY TIME STATUS

When users are notified that their order is complete, users would go to store to pick up their order only to realize their order is not ready and have to wait longer. Sometimes users are not informed of order completion.

 

02

MISLEADING & LACK OF INFORMATION ON INGREDIENTS

Customers find it difficult to know what ingredients is included to make their items. In addition, there is misleading and lack of information regarding quantity of each item added.

 

03

BARRIERS TO MODIFICATION

When modifying an order, customers have to restart an order when changes are made or when they reach the max number of modifications.

 

04

EATING HEALTHY IS INACCESSIBLE

Not only is eating healthy costly, unhealthy options are easily available and offered more often time-wise. On another end, healthy food may not be as appealing or preferable over unhealthy foods.

sweetgreen users face several pain points from searching for healthier options to completing their order. to better understand their frustrations and experience across all high-level stages, a journey map was done to visualize their end-to-end ordering experience and to map out their pain points, emotions, and motivations across key stages of ordering for identifying design opportunities and optimization to address these pain points. overseeing every channel of their journey holistically is keeping to sweetgreen's design goal: to ensure authenticity across all touchpoints.

insights to analysis & empathizing.

how will we address this? - let's explore through ideation.

from the journey mapping, key areas for design improvements and opportunities were identified. the ideation process began with generating all ideas through creative brainstorming to address sweetgreen customer's frustrations so they are motivated and fully informed throughout their entire mobile ordering journey. prioritization of key features were based on key stages sweetgreen customers face the greatest pain points.

 

a user flow was created to organize the structure of the mobile app that will guide users in navigating to reach their end goal of ordering a sweetgreen's bowl and in presenting content.

 

sketches were done to begin visualizing the design solutions and approaches to optimize for a fully informed mobile-ordering experience that excites sweetgreen customers with key features.

 
Sweetgreens sketches pictures

design iterations

Sweetgreens low-fidelity mobile redesign on Figma screenshot

01

shorten the items to bowl information hierarchy

02

make quantity change more visible and clarify the process

03

clarify the purpose of icons (e.g. question mark icon primarily)

04

address variability of timing of receiving order

brand identity

keeping intact sweetgreen's brand identity was core in creating the style guide. sweetgreen's brand identity has evolved and is precedence to sweetgreen's design. particularly with highlighting sustainability is at spotlight with sweetgreen's effort.

HERE’S THE

VISUALIZED DESIGN SOLUTION

 
Sweetgreens mobile redesigns mockup

expanding personalization

 

preference filters

A “made to fit your lifestyle” feature to provide a more tailored experience for users and to provide users (particularly user groups with unique personas) with a more informed mobile ordering journey.

 
Sweetgreens mobile redesign prototype GIF of preference filters
 

quantity change

Amplifying personalization to tailor the ordering experience and bowl sweetgreen customers receive. This includes providing autonomy through quantity changes of items, so customers can adjust the amount they want per ingredient.

 
Sweetgreens mobile redesign prototype GIF of quantity change

content forward

 

ingredient list

Driving a content-forward experience is a goal of sweetgreen’s digital and will provide customers with more details throughout their mobile ordering journey. Viewing the ingredient list will provide further transparency.

 
Sweetgreens mobile redesign prototype GIF of ingredient list
 

nutritional benefits

Elevating the importance of healthy eating and strengthening what sweetgreen has to offer to customers will draw and provide a more informed experience for sweetgreen customers. Providing nutritional benefits allows customers to know and help make their ordering decision.

 
Sweetgreens mobile redesign prototype GIF of nutritional benefits

tapping into culture

 

livin’ the sweetlife

Bringing sweetgreen’s culture to the digital app will make healthy eating and the experience more exciting through a sweetgreen’s culture page. This further establishes and heighten’s sweetgreen’s brand.

 
Sweetgreens mobile redesign prototype GIF of livin' the sweetlife

With more time, evaluating designs

01

Increased online mobile order (increased conversion rates)

02

Higher rates of user satisfaction on the following:

Mobile browsing experience

Mobile ordering experience

Pick up and Delivery time

Received order

In retrospect

01

Designing for e-commerce is complex

Designing for e-commerce has multiple layers involved from considering each and every microinteractions for simplifying transaction to organizing content for the most effective navigation. as important is getting users to buy products is, an effective, seamless user experience for user retention and continous interaction is equally as important and crucial for ecommerce business.

 

02

Keeping your ground as a designer in process, value, and experience

As the solo designer for this project, taking charge and direction of my own design process and decisions is core to its success. The variability of a ux design process calls for a defined ux design process and strategy approach. In several ways, from translating insights to design decisions to scoping the project, leading and standing for my decisions is critical to delivering an optimal user experience. this speaks in volume to not only for articulating and communicating my own design decisions, but for intentionality in my design decisions.