cover-pretfeature_v3.png
 

Pret A Manger App +
”Treat Store” Feature
-

Pret or more formally, Pret a Manger translating to “ready to eat”, is one of the world's most popular fast casual chains with over 450 locations worldwide and an annual revenue over $1B. Pret positioned itself as the do-gooders of the restaurant world, through actions like donating 700k meals annually and giving their delicious (omg) chocolate chip cookies to patrons having a rough day. These charitable behaviors support the company’s mission of “doing the right thing,” however, with the expansion of digital and tech into the restaurant space, Pret wanted to build a feature-filled app that could uphold and channel these altruistic goals.

THE PROBLEM:

building pret a custom feature-filled app, on a limited budget, that also acts as a medium for kindness.

Designing apps, features and products is truly my bread and butter, having designed products and UIs for hundreds of clients, specifically in the restaurant space. However, attaining Pret’s business was a lengthy process, with an all-hands-on RFP due to them being protective of their mission. Pret ended up choosing LevelUp, now Grubhub Agency, because of its robust platform, quality of team members and caliber of design work (that was me!).


 

designing a semi-custom app and a completely custom feature

lead ux/ui designer and developer

 

UX Design

UI Design

Prototyping + Wireframing

HTML

SASS / CSS

Video Editing / Conversion

 

Bite-sized
summary
-

Famous for their white-labeling solutions, Grubhub Agency has branded their native mobile SDK 500+ times. These apps (iOS and Android) have differentiating typefaces, colors, button styles, features and copy, yet are all powered by Grubhub’s back-end templated code. The Pret app included completely bespoke code; Grubhub layered the SDK with my custom designed UIs to produce Pret’s desired digital hub of spreading kindness. These custom features contributed to making Pret the most successful client launch at Grubhub Agency:

  • Two new features designed and built (then added to the Grubhub SDK for resale)

  • 90-day customer acquisition goal achieved in 36 days

  • 4.7 star rating across thousands of downloaders

  • App delivered with features on time and within tight budget

  • 70% more orders per store per week

  • and more

 
 

Objectives
-

Design and test customer journeys

Design an app within the confines of an SDK,
but also layer in custom dev for bespoke features

Acquire 50,000 app users within 90 Days

Extend the mission of spreading joy to a digital product

Work with Pret’s branding agency for UI approval

Showcase Pret’s menu

Final product should act as an experimental model for Pret UK

Initial Designs, annotations and goal-setting for the Treat Store feature

Initial Designs, annotations and goal-setting for the Treat Store feature

 
 
 
Sample feedback between Pret and LevelUp (Grubhub Agency)

Sample feedback between Pret and LevelUp (Grubhub Agency)

 
 

Challenges
-

Budget unclear

Tight timelines

Scope / feature creep

Requirements constantly changing

Branding agency doesn’t understand UX vs. branding design

 
 

Visual Overview
-

Brainstorming and Annotating Sketches

PResenting Screens and an InVision prototype for the Pret RFP

brand guidelines and assets received post winning Pret’s business

Branded assets were created and exported for development

Pret’s Branding Agency struggled with understanding the limitations of the SDK, so I created a Silver and Gold system. Anything in silver was standard in the SDK and anything Gold was premium: taking more time, budget and custom code.

screen by screen user-journeys for pret’s marketing team

The Pret app launched and is rated 4.7 stars in the App Store

Wire-framing and Evaluating UX/UI Decisions

pixel perfect designs

pixel perfect designs

visual qa feedback between pret and grubhub agency (levelup)

branded payment screens with a custom donation feature ui that was ultimately removed due to budget

challenges with Pret’s Branding Agency making poor UX recommendations and pushing project scope

Prototype to discern which screens and elements could have custom animations

hi-fidelity treat store feature screens laid out in sketch

Full designs for final treat landing

Full designs for final treat landing showing alternate state of “no treats available”

UX and final gift card picker ui (instead of Pret’s suggested amount slider)

photography produced for app promotion and press releases

 

Project Breakdown
-

 
 

Examples of UIs and features including a dynamic “homescreen” navigation I designed for clients like: Bobby Flay’s Bobby’s Burger Palace, Caffe Nero, and Sweetgreen

 

getting the account

Finding the Right Partner
I was introduced to this project during the lengthy RFP process. Pret was looking for the right partner to extend their mission of “spreading joy.” This meant that both the tech and the team had to be a great fit.

Grubhub, previously LevelUp, brings me on or assigns me to projects because of my skillset and my ability to connect with clients; it’s common for me to both create designs and work directly with clients since I know how to defend my design decisions while negotiating what’s best for the business and the project. That’s why Grubhub assigned me as the Lead Designer for the Pret RFP.

Work Experience and User Experience
Having designed hundreds of client’s apps and custom features, specifically within the food space, I had already acquired all my knowledge of the restaurant-app-user-experience (which is pretty consistent across all Grubhub products). The difference with Pret and this RFP was how to extend the interpersonal relationship you experience in-store to digital form.

Luckily, I had been a loyal patron of Pret for years, having received chocolate chip cookies on my off days, having been to three local launches getting free food and experiencing the full joyful Pret effect, and even being given free hard-boiled eggs for my well-behaved dog!

With my design experience in this specific industry, my ability to connect with clients and my deep love for Pret in tow, I presented my RFP design to their team…I crushed it. I was the final piece to the RFP, sealing the deal with my designs and charm. They loved my work and we got the account.

 

Wireframes and Hi-Fidelity Mockups for the Pret RFP - these were completed without any branding guidelines and were based off of the Pret website aesthetic

Treat Store Landing Wireframe

 

branding the sdk and building custom features

Working with Pret’s Agency
Fortunately, Pret loved my initial design proposal from the RFP, so I had a great foundation with which to brand their app. My initial designs adhered to the aesthetic of the website, using lots of white, fun food-filled photography and clean medium gray type. Unfortunately, Pret’s UK branding agency co-owned design approval, constantly pushing the scope of the project with little regard to budget, making poor UX suggestions and not understanding the confines of working within an SDK.


Graphic Design != UX/UI Design
It was not uncommon for clients to bring their branding agencies into the picture when I was designing client’s apps. Clients don’t necessarily know how to tell if designs are “on brand,” so they look to their asset creators for approval. I often straddle many areas of design including branding, UI, UX and development (which I consider to be a part of the design process), and found it to be more common that graphic design skills rarely translate to UX/UI. It was my job, understanding both realms, to take Pret’s agency’s feedback and keep the designs on track. I developed a system of labeling screens “silver” or “gold.” Anything that was silver was in the confines of the existing SDK, anything gold required more time, custom code and budget. This helped all parties discern what features and changes should be MVP for the app launch.


Branded SDK Layered with Impactful Features
With the budget and the project’s requirements being unclear during the design process, the best strategy was to distill what features would be most impactful, cost-effective and related to the set project objectives. Like all Grubhub Agency apps, the existing SDK was branded; Pret’s typography, background images, button styles, icons, and colors would wrap the payment, rewards, locations (shops) and account screens.

I used Sketch templates (I created them years prior as the base wireframe for all branded app designs) that use symbols and text styles to duplicate branded components across various screens. Outside of these branded screens, I had to design the specific features that would have completely custom UIs:

  1. Menu

  2. Treat Store (which I focus on in this case study)


Custom Designs with Thoughtful White-labeling
Designing custom UIs usually follows these three steps:

  1. Inspiration, researching UX principles, scoping competition and reviewing data

  2. Sketching, annotating, wire-framing and iterating

  3. Prototyping, exporting and scaling

When designing custom UIs or new products at Grubhub, I always designed for hypothetical scale. Almost every feature designed presented the opportunity to be resold; each element in the UI was designed for white-labeling. When a client requested a new feature, they paid for design and development work to be built into Grubhub’s SDK. This allowed Grubhub to resell and scale their product offering to future clients.

 
 
 
 
 

When designing custom UIs or new products at Grubhub, I always designed for hypothetical scale. Almost every feature designed presented the opportunity to be resold; each element in the UI was designed for white-labeling.

 
 
 

process

Inspiration, Researching UX Principles, Scoping Competition and Reviewing Data
I have a few main sources of inspiration I go to when tasked with designing a new UX:

  1. Dribbble

  2. Pinterest

  3. Behance

  4. Medium

  5. Instagram

  6. Various blogs and articles related to the specific UI

Since I had already designed seemingly endless rewards screens, and hadn’t seen a restaurant competitor having a space to redeem rewards, I realized that Pret’s Treat Store UI was effectively an e-commerce UI. I analyzed mobile interfaces from companies like Wayfair, Amazon, Google, Apple and checked out templates on Squarespace.

As I always do, I referred to Google’s Material Design guidelines for a refresher of interactions and UI components.

I worked with Product Managers to review the influence of campaigns on conversions, and did a deep dive of Grubhub’s API. One of the reasons I’ve achieved success is because of my knowledge of development. I often see beautiful interface designs on the internet, that I imagine would be incredibly complicated or almost impossible to produce. I do my best to understand the code base and its capabilities when designing, asking myself the following questions questions:

  • Where is your data coming from?

  • What types of images and specs are available?

  • Are your UI components built from an SDK or is it completely custom code?

  • Does the code support your design decisions? (Drop-shadows, kerning, etc.)

  • Are you designing for multiple device specs?

It was imperative I understood how to design this feature efficiently, since we had such a tight timeline to strategize, design and build the Pret App and its custom features. This Treat Store UI would be used as the primary acquisition tool for Pret’s app launch, offering free coffees to the first 50,000 registered customers. The goal was to acquire these users within a 90 day period.

Sketching, Annotating, Wire-framing and Iterating
Whiteboards and long-sessions of interaction design overview were key with the UI. It was important to understand the breakdown of components:

  1. Header (that I personally think take up too much real estate)

  2. “My Treats” and the treat sharing UI

    • Image

    • Title

    • Text

    • Redeem Toggle

  3. Gift cards and the gift card purchasing/sharing UI

Improving and iterating on the UX sometimes resulted from external OS changes: Grubhub had an existing SDK with buttons for Facebook, Twitter and Email. While designing, Apple launched its new (and improved) sharing interface modal which changed the user journey and replaced the existing Grubhub three-buttoned UX.

Pret’s Agency also chimed in with suggestions, like designing a screen-height carousel for “treats” awarded to a customer. I evaluated these types of design recommendations and explained that in this instance users don’t want to have to “work” for discovery, especially if it’s free - scrolling lists were the best option for quick exploration.

Prototyping, Exporting and Scaling
After these long sessions of sketching, white-boarding and negotiation, I converted my sketches to wireframes in Sketch, and exported them for the client in an interactive and annotatable Axure prototype.

It was essential to Pret that they understood the customer journey as well as they understood the journey of a customer in their shop. Myself, the Product Manager, and the whole development team worked very closely with Pret managing expectations, budget, design and execution.

The Treat Store UX and UI were ultimately beautiful, usable and functional, and the focus group’s response was positive.

 

An example of the the Treat Store feature being resold to Flour Bakery

 

scaling

Work Smarter not Harder
As aforementioned, the goal of most of my design work during my time as Lead Product Designer at Grubhub was to design features and products, paid for by the requesting client, that would ultimately be built into the SDK and resold to future clients. Quickly after being built into the SDK, the feature was resold to Flour Bakery and branded by a team of visual designers. Designing and building features into the SDK allowed for less custom code by already limited development resources and a larger product offering, making Grubhub Agency more efficient and profitable!

 
 
 
 
 
 

the most successful agency launch at grubhub

Marketing and a Team Effort
Like any new product or business, but especially for apps isolated to app stores, marketing was key to Pret’s success.

Pret prominently displayed in-store collateral including window decals, signage at the point of purchase and staff T-shirts. They also ran a comprehensive digital campaign that involved updating their website with a video and FAQ, announcing the app’s launch with press outreach, and advertising on Instagram, Facebook and Twitter.

As much as I designed a wonderful UX for Pret’s new features, negotiating with Pret to create beautiful, functional and data-driven interfaces, the entire Grubhub Agency team worked tirelessly to get this project completed.

Grubhub’s seamless integrations to Pret's existing tech stack and Grubhub’s 70+ person dedicated project and support team ensured a flawless launch

The Numbers
With the completion, launch and promotion of the Pret app and its custom features, the project achieved incredible success:

  • Pret acquired their 50,000 registrants in 36 days!

  • 70% more orders per store per week

  • 61% more monthly active users in the first three months (compared to other restaurants in the same vertical with an app)

  • 4.7 star rating on the app store


Final Thoughts
Pret aimed for this project to be experimental, possibly extending this US app to the UK market. As successful as the launch was, ultimately I don’t think Pret wanted the constraints of an SDK. Although it was more cost and time effective, I imagine that in the future, Pret will prefer something completely bespoke.