Le Pain Quotidien:
Mobile and desktop app

In Covid times, many restaurants realized the need for digital ordering functionality. LPQ was one of these businesses.

The Approach

Re-skinning existing designs

The team at Beta Acid had already designed and developed three other quick service restaurant apps under the Aurify brand. LPQ was the most recent restaurant acquired by the group.

Our strategy was to keep the core of all the apps the same, but re-skin them with LPQ’s branding. The core functionality that we had already designed and developed included screens such as the hamburger menu, rewards, account, restaurant locator for pickup and delivery.

New Features

We kicked off design with a few brainstorming sessions with LPQ to determine what new features would align with the brand’s business plans.

Coffee Customization

The business wanted to be able to compete with other major coffee players in the industry. While we worked on the app, they were working to re-vamp their coffee menu entirely to include customizable espresso drinks.

Problem: Many competitors kept customization controls vague. For example, Starbucks will let you choose how much milk you might want in your beverage. Your choices are: light, regular, extra. As a user, my definition of extra milk may be different than the barista’s.

Solution: To elevate LPQ’s customization controls, I included language that would be specific to let the user know exactly how much of something they’ll be adding into their drink.

Recents & Favorites

LPQ highly valued their business bringing in regular customers.

The ask: include features in the app that would allow regular customers to quickly re-order or save customizations

The solution:
• Customers would be able to save products to their favorites list with their customizations included.
• They would be able to re-name their favorites in the list to what they desire.
• Once items are favorite’d, they would appear as a large card during the menu browsing flow in the related product category

Contactless Dine-In: Opening a Tab

To prepare for restaurants re-opening after the pandemic, LPQ asked our team to explore contactless dine-in flows.

One concept we proposed was allowing users to open a tab so they would be able to order dessert or a coffee to go after they’ve finished their meal. Customers could also use this feature to request extra service items for the table, such as extra utensils and keep face to face interactions with staff as minimal as possible.

Unfortunately, the concept would require an overhaul of the restaurant staff training and potentially the POS system, so it did not make it past the wireframe stage.

Online Ordering on Desktop Site

How was this project built?

👉Full component library built out on Figma

👉Detailed designs handed over on Figma

👉Our team was small and agile: myself and a few developers. Hand-off consisted of walking dev through the designs and quickly pinging each other on Slack for any support

Lessons

• Give users full confidence to know what they’ll be getting, as demonstrated by the coffee customizations controls

• Involve SME’s and stakeholders early
While not shown here, there were many use cases that we had to think through and come up with solutions for. What happens if there are no LPQ locations in your vicinity? What happens if your LPQ location is closed currently? What happens if in the middle of the flow, a customer wants to switch from pick-up to delivery, which may change the entire menu they can order from? As one designer, I may not be able to come up with all of these solutions and early conversations with stakeholders put these issues on my radar early.

Room for Improvement

If I had all the time and budget in the world to iterate, a few improvements would be made:

• Color contrast: Unfortunately, yellow is a tough color to work with and this is LPQ’s brand color. There are instances in the app, such as buttons and selected states, where I would add borders around components to improve accessibility.

• Remove all caps copy: We know that all caps is more difficult to read than title or sentence case, but the brand was really pushing for this aesthetic. With more a11y knowledge under my belt now, I would have pushed back on this much harder to improve readability.

• Testing: Aside from forwarding the beta app to our networks to test before launch, there was no budget for any type of testing during the design process. In an ideal world, I would have loved to have been testing my lo-fi prototypes outside just the stakeholders.