sweetgreen

Online Ordering & Native Application

The Opportunity

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.

My Role

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.

PRODUCT MANAGEMENT

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

Journey Mapping

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

Collaborative Exercises

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.

Production Guidelines

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 (Gordon Sexton & Joseph Bergdoll) to rapidly sketch & build out motion prototypes in keynote.

Keynote Prototype

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

Dietary Restrictions

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.

The Requirements

Tools to manage inventory, monitor demand, and optimize throughput.

Content & Inventory for Local Managers

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.

Intensive Analytics for Global Ops & 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.

Phase 2

Going Native

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.

Information Architecture

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.

If they’re ordering in-store, users can pull up their personal barcode from any screen in the app with a shake 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.

Real-Time Rewards

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.

Quantified Salad

For customers that are health & fitness focused, the app integrates with Apple's HealthKit, allowing customers to track the dietary impact of their meal through their platform of choice; like Lifesum, MyFitnessPal, or UnderArmor's UA Record.

Co-Founder Nathan Ru talks technology at sweetgreen.

The Impact

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.

"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.

"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.

"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.