Frictionless fast-casual dining, designed for the digital age.
Gin Lane and sweetgreen formed a digital product partnership in 2012, working together to build technologies and platforms that power their business, production processes, and overall customer experience; in-restaurant and out.
The first target was a complete overhaul of the fast-casual salad chain's online ordering experience. Then, we moved on to create a native application to draw the restaurant's digital and physical experiences closer together.
Over two years, I lead a cross-disciplinary team of strategists, designers, and developers through strategic discovery, product design, development, launch, testing, and iterative national rollout of two products; an online ordering web-app and native iOS application.
CUSTOMER INSIGHTS & In-STORE EXPERIENCE DESIGN
I conducted customer interviews, time-and-motion studies, and worked on sweetgreen's back-of-house salad production line to get a complete understanding of how the sweetgreen dining experience comes together. I also worked with sweetgreen’s operations leadership to gain a full understanding of front-of house, kitchen, and back-office logistical needs and developed technology solutions, strategies, and platforms to support them.
PRODUCT & PLATFORM STRATEGY
I created frameworks and user narratives to illustrate a vision for the digital platform to sweetgreen's executive leadership, and how it fit in the overall brand experience.
UX DESIGN & INFORMATION ARCHITECTURE
I created user journeys, content strategies, wireframes, and motion prototypes to outline the complete structural and experiential requirements for the app.
From initial scope definition through discovery, design, implementation, launch, and ongoing iteration, I served as project manager, primary point of contact, and product owner. I managed a team of 12 resources across strategy, design, and development over a period of 18 months.
The Discovery Process
Going Behind the Greens
Through an intensive period of strategic discovery, I dove head-first into sweetgreen’s digital infrastructure, day-to day business operations, and core brand values.
The goal was to create a platform that would streamline Sweetgreen’s entire operation, so I went "behind the greens" to live a few days in the life of the typical Sweetgreen employee, management, and customer.
MIXING IT UP
STORE VISITS & CREW SESSIONS
I conducted a series of store visits, interviewing “Head Coach” store managers, shadowing Line-Prep employees, taking salad orders, mixing salads, and of course interviewing customers. I also performed a comprehensive audit of sweetgreen's existing platform, focused on technology and UX.
MAPPING IT OUT
Synthesized into a comprehensive Journey Map, we visually outlined the dual experiences of the sweetgreen consumer and employee during the typical lunch rush at one of the brand’s busiest stores, forming the foundational insights that would drive the design of the web platform, as well as the roadmap for future products.
WORKING IT OUT
To build an experience that felt authentic to sweetgreen's brand, it was crucial to develop a richer understanding of the principles that underpinned the visual decisions made to date. With the design team in tow, I straight to the source, meeting with Sweetgreen’s most key stakeholders; its three founders, operations leadership, and head of marketing.
MAKING A SYSTEM
STYLE TILES & DESIGN PRINCIPLES
Through a series of exercises and activities, we gained a fuller understanding of the values that would drive the brand’s past, present, and future. “Semantic Differentials” identified the key attributes that underpin how the Sweetgreen brand is intended to be experienced, while collaborative moodboards help capture the feel of the brand through rich photography, inspirational quotes, and mood music.
CONTENT & PRODUCTION DESIGN
Deconstructing The Salad
As we prepared to kick off a UX & Visual design process, I was eager to tackle the most complicated part of the experience first: the Salad Builder. Unlike the existing platform, I wanted our experience to give users full control over their salads, whether they started from scratch, or with one of sweetgreen’s signature combinations.
In a salad, I thought, no ingredient is the “star” of the show. Instead, a salad is quite literally the sum of its parts. This insight lead to a daunting but exciting challenge; shooting each of the (more than 60!) ingredients that compose sweetgreen’s salads.
I worked with Gin Lane's design director to develop a system of photo guidelines to structure a three-day shoot, focusing on the fine details that would make the interface vision come to life.
We shot each ingredient on white, adjusting focus and lighting for maximum attention to detail. We also shot each signature salad, fully composed, arranging ingredients in a “pie chart” configuration to showcase how they work together to create sweetgreen’s flavor profile.
EXPERIENCE & INTERACTION DESIGN
Rapid Sketch & Motion Prototyping
The entire ordering flow is designed to orbit around that crucial moment, but balancing a highly visual layout, simple controls, and powerful customization options was no easy task.
The salad builder would need to empower users to choose multiple portions of each ingredient (within business constraints that I'd defined with sweetgreen's team), investigate it's sourcing information, all while communicating the impact of each choice on calories and dollars.
Users should feel free to choose the salad that they want, but also, one that sweetgreen could actually build (and fit within its containers!).
I lead the efforts around information architecture and user experience design, working side-by-side with Gin Lane's interaction designers to rapidly sketch & build out motion prototypes in keynote.
Surrounding the salad builder, the app also provides tools for users to find the right restaurant, quickly build their order, and receive a rock-solid promise time. When users return to the site, they’re given the option to quickly re-order their favorite orders, or individual custom salads that users can name & share with friends.
LAUNCH & ITERATION
A Careful Rollout
The newly overhauled ordering platform launched its first beta at the newly opened TriBeCa location (sweetgreen's first in New York City!).
Using tools like Inspectlet, Chart.io, and good 'ol fashioned Google Analytics, I closely monitored how users were engaging with the platform, keeping an eye out for sticky areas in the digital and physical aspects alike. I ordered salads almost every day to get a full sense of the end-to-end experience, and to help sweetgreen find opportunities to refine its operations as it rolled out to more stores.
FIND YOUR FIT
For customers avoiding ingredients that contain meat, dairy, gluten, nuts, and others, Dietary Restrictions filters highlight potentially problematic ingredients in each chef-designed salads so that users can re-configure to suit their needs.
MAKE IT YOURS
The Salad Builder
The salad builder lets customers make their perfect salad, tweaking portions for each individual ingredient, and even learning about the local farms that they're sourced from. Price and calories are calculated in real time with every choice.
Tools to manage inventory, monitor demand, and optimize throughput.
FOR LOCAL MANAGERS
CONTENT & INVENTORY
Simple controls let "Head Coach" modify sourcing information and availability for products - all the way down to the individual ingredient. Managers can also set their hours, bring their stores on and offline, and modify content in real time.
FOR OPERATIONS LEADERSHIP
Analytics tooling helps sweetgreen's operations leadership make decisions for the future of their menu and platform; providing real-time insight into operational data-points such as hour-by-hour throughput, impact to customer wait times, menu item affinity, and popular modifications to each.
As sweetgreen's operations team focused on rolling out the new online ordering experience across the country, our product team turned its eyes toward the future. I defined a scope and process for the team to begin work on a Native iPhone Application that would take nearly a year to complete.
Along the way, we helped sweetgreen bring its ordering and rewards experiences closer together, overhaul its store ops to speed up the pickup experience, and build its own in-house technology team.
More Rewards, Less Friction
The next crucial steps along the roadmap were to integrate sweetgreen's popular rewards program more closely into the online ordering experience, and to create a more frictionless flow from app-to-restaurant.
A Single-Sign-On flow invisibly merges users' accounts for Online Ordering and Rewards into a single identity.
SHAKE TO PAY (IN STORE)
If they're ordering in-store, users can pull up their personal barcode from any screen in the app to quickly scan & pay.
TACTILE, FUN & FLUID
Zooming into individual salads, swiping favorite items, and gliding through swappable salad ingredients, the app's design takes advantage of native iOS technologies to give the user with a more intuitive sense of place, depth, and responsive tactility.
Users can pull up a quick overview of their rewards status, including progress toward their $9 perk.
FAST FAVORITES & RE-ORDER
We made it easy for customers to set any menu item (including customs!) as a favorite to quickly re-order.
Today, digital transactions make up nearly 40% of sweetgreen's business.
The new sweetgreen iOS app launched in January of 2016, to rave reviews from customers and news publications alike. Today, digital transactions make up nearly 40% of sweetgreen's business, and a few locations are even experimenting with going completely cashless.
sweetgreen is continuing to build along its digital product roadmap, knitting the in-store and digital experiences more closely together with each new feature, version, and opening store.
"Most chains have an app, but Sweetgreen has set a new standard."
It allows customers to flag dietary restrictions, add or subtract 86 ingredients (and instantly see how that affects calories and nutrition), pay in advance and know exactly when their meal will be ready for pickup at one of Sweetgreen’s 42 locations on the East and West Coasts. I customized my Sweetgreen favorites and now I can reorder them in a few clicks. The app launched in January, and the company reports that already 25% of sales come from smartphones.
"The app’s design is sleek and streamlined, with a simplistic feel reminiscent of Uber."
The app’s design is sleek and streamlined, with a simplistic feel reminiscent of Uber. Perhaps not surprisingly, you can even summon Uber to pick you up and take you to your salad.
"It’s the closest to frictionless you can get."
Sweetgreen’s digital customer experience purposefully emulates its in-store one. The layout mimics picking out the ingredients of your salad in line at the restaurant with high-res images and self-explanatory cues that walk you through the process like a Sweetgreen team member would. A counter calculates the total number of calories in your meal as you click — providing health-conscious customers with the straightforward insights they need. The best part: You can seamlessly order and pay on the site or through the app, then pick up your meal without waiting in line.
This digital experience feels like it solves for all the common annoyances one finds ordering online elsewhere: a confusing ordering process, lack of customization and a cluttered, opaque interface. That’s no accident. Sweetgreen’s digital efforts are created with real people in mind.
The best food ordering experience ★★★★★
This app is beautiful, functional, and highly intuitive. I've used it in store and its much quicker than the old level up app, which is key. All food ordering apps should be like this. I had no issues and didn't see any bugs - in fact, the log-in process was super simple and there was great on-boarding at the beginning.