UI/UX Design · Product Design

Bean & Beyond

A coffee-shop app built around the one thing people actually want: their order, their way.

Ordering coffee on a phone is a customization problem pretending to be a menu problem. I designed for the customizing and let the menu get out of its way.

Bean & Beyond — the finished product
Role
Product Designer, User Experience Designer
Toolkit
Figma, Photoshop, Illustrator
Team
Soumya Sharma, Raj Chandak
Duration
Dec 2019 – Feb 2020

01 The brief

A coffee shop with an app to build, and a phone to build it for.

Bean & Beyond wanted the whole ordering experience to happen before anybody reaches the counter.

The task was an interface that makes ordering coffee simple enough that people do it twice.

Bean & Beyond was introducing a mobile app for its customers: explore the menu, customise the order, and satisfy the craving without queuing for it. The project was the UI and the UX of that app — intuitive, good-looking, and built for the way people actually hold a phone.

Five things had to be true on a screen that small.

  • Coffee enthusiasts
  • Working professionals
  • College students
  1. O-01

    Mobile-centric navigation

    An interface designed for the needs of somebody on a phone, with the menu organised where research says people go looking for it.

  2. O-02

    Streamlined ordering

    Browse, customise and complete a transaction with as little friction as the screen size allows.

  3. O-03

    Accessible by default

    WCAG 2.0 and mobile-specific best practice, so the app is navigable and operable by gesture, voice or screen reader.

  4. O-04

    A menu worth looking at

    High-resolution imagery and short descriptions, with swipeable sections and touch-to-expand carrying the browsing.

  5. O-05

    Customisation that feels like choosing

    Touch-first controls — sliders, buttons and gestures — so personalising a drink is quick rather than a form.

02 Research

I asked people to describe the order before I designed it.

The survey opened with demographics and closed with how people imagined paying.

I wanted the whole order described back to me before I drew any of it.

Respondents were asked to picture their path through the app from start to finish and tell me what they expected from the navigation, from the customisation options, and from the payment. To get at the visual side I put hypothetical design elements, colour schemes and font styles in front of them and asked which ones matched the way they think about buying coffee.

The last section was the cart: how they imagined adding items, changing an order, and completing a transaction without friction. That is the part of an ordering app that quietly decides whether anybody opens it a second time.

reference A Starbucks app drink detail screen: a photograph of a Frappuccino, its calorie count, three size options with Grande selected, a what's included list, and a green add to order button
Starbucks — the app I took apart screen by screen
I went through Starbucks, Panera and Dunkin' the same way each time: interface, navigation structure, visual language, menu organisation, personalisation, feedback mechanisms — then their user reviews and ratings, which is where the sentiment and the pain points actually are.

Where the incumbents actually stood

three incumbents, ten features

Where the incumbents actually stood
Feature Starbucks appPanera app Dunkin' app
Personalization Yes Yes Yes
Navigation Yes Yes Yes
Intuitiveness Yes Yes Yes
Accessibility Yes Yes Yes
Visual Appeal Yes Yes Yes
Gamification Yes Yes No the only gap in the set
Cart Management Yes Yes Yes
Feedback Mechanisms Yes Yes Yes
Quick Ordering Yes Yes Yes
Search Functionality Yes Yes Yes

Scroll the table sideways for every column

Starbucks and Panera have both landed a minimalist but visually engaging design that puts navigation and personalisation first. Dunkin' is user-friendly and still has room in places. The analysis gave me the best practice to adopt and, more usefully, the openings: gamification and cart management.

The incumbents had already solved looking good. What was left was the cart.

03 The design

One flow, eight frames, and a palette borrowed from the drink.

The flow first, then the sketch, then the system, and only then the screens.

The flow I designed to

opening page to checkout — and everything that loops back

Opening page log in, or create an account

  1. F-01 Coffee menu browse by category
    • Popular
    • Black coffee
    • Winter special
    • Decaf
  2. F-02 Customise the screen the app exists for
    • Size
    • Milk
    • Quantity
    • Add to cart
  3. F-03 Delivery and pick-up where, and when
    • Closest cafe
    • Pick-up time
    • The order, itemised
  4. F-04 Order placed confirmation, then tracking
    • Order placed notification
    • Current order page
  5. F-05 Back again the part that makes it a habit
    • Past orders
    • Frequent orders
    • Favourite drinks

Everything after the first order loops. Past orders feed frequent orders, frequent orders feed favourites, and favourites put the second coffee two taps from the home screen. The profile hangs off the end of that loop rather than the front, because nobody opens a coffee app to manage an account.

Eight frames, drawn before anything got expensive.

low fidelity The hand-drawn Bean and Beyond wireframe board: eight phone frames in two rows of four joined by arrows — the splash carrying a cup and a Get Brewing button, the Welcome Back log in, the drink menu with its category tabs, the same menu with the profile panel dropped over the top right, the drink detail with size, milk, a quantity stepper and add to cart, the cart with its total and Order button, past orders dated 4/8, 2/18 and 9/1, and the same three drinks again with their hearts filled in
the low-fidelity board — frames 1 and 2 are the way in; frames 3 to 8 run the menu to favourites
The whole app went onto one board of eight hand-drawn frames: the splash, the log in, the menu, the menu with the profile panel open, the drink, the cart, past orders and favourites. The sketch is where I settled the two decisions that mattered: the drink detail gets a full screen rather than a sheet, and the cart is reachable from every screen instead of being the end of a corridor.

A palette taken from what's in the cup.

the four-colour core

  • Roast

    type, icons, and the only near-black on screen

    #2D2D2D

  • Crema

    the one warm accent — it only ever means do this next

    #EB916B

  • Steamed milk

    cards, the tab bar, every quiet surface

    #FFF5E9

  • Paper

    the field the drink photography sits on

    #FFFFFF

I found the palette in coffee's own comforting colours — mocha and cream — and paired them with a clean modern face so the menu stays readable at arm's length. Warm enough to read as the brand, plain enough that the drink photography is the loudest thing on the screen. Accessibility and inclusivity were inputs to the palette, not a pass at the end of it.

And the parts that had to behave the same everywhere.

Three button states, one type ramp, and a tab bar that stays at four. Poppins throughout — regular 16 for body, medium 16 on the drink menu, medium 14 in buttons.

The tab bar is drawn once and used on every screen: four icons on the steamed-milk surface — home, cart, favourites, account — with a crema marker above whichever one you are on.

  • Poppins Regular 16 — body
  • Poppins Medium 16 — drink menu
  • Poppins Medium 14 — button
  • home · cart · favourites · account

The disabled state is the one people forget, so it is specified here rather than decided later by whoever builds it.

  1. C-01

    Normal

    The crema pill, #EB916B — the one warm accent, and it only ever means do this next.

  2. C-02

    Active

    The same pill a step deeper, #DF784D, for as long as a thumb is on it.

  3. C-03

    Disabled

    The pill drops to a flat grey, #E9E9E9, and the label goes grey with it — still there, plainly not available.

04 Final screens

The app, as it ended up.

Four screens carry the whole product: the invitation, the menu, the drink, and the reason to come back.

Everything the research asked for ended up on one of these four screens.

The menu leads with photography and short labels because that is how people choose a drink. The drink screen gives customisation the full width — size, milk, quantity and price all visible at once, with the primary action pinned where a thumb already is. Favourites exist so the second order costs almost nothing to place.

The tab bar stays to four destinations. On a screen this size, a fifth is a decision nobody wanted to make.

The Bean and Beyond launch screen: a photograph of three coffees held together above a dark panel carrying the cup mark, the name, the line Brewed to Perfection, and a Get Brewing button
the invitation
The Bean and Beyond menu screen: a search field greeting the customer by name, the question what would you like to drink today, category tabs, and four dark drink cards each with a photograph — iced americano, cappucino latte, silky cafe au lait and iced chocolate
the menu, photograph first
The Bean and Beyond drink screen: a photograph of a latte being poured, the name Cappucino Latte with a 4.5 rating, three size options, three milk options, the price of 4.95 dollars, a quantity stepper and an add to cart button
the screen the app exists for
The Bean and Beyond favourites screen: three saved drinks — iced chocolate, iced americano and cappucino latte — each with a heart and a count of how many times it has been ordered
the reason there's a second order

05 Testing

I gave them versions and let them make the call.

I recruited a diverse group from the app's own audience and ran usability tests on the same screen designed more than one way.

Rather than ask people what they thought of a design, I asked them to choose between designs.

I selected participants who represented the app's audience and put variations of the same screen in front of them — interact with each one, then tell me which reads better for usability, for clarity, and for how much you want to use it. Preference questions get honest answers in a way that opinion questions don't.

The cart got two versions and the home screen got three, each laying the offering out differently. What came back gave me a decision I could make with data instead of taste.

The cart, twice.

screen A Cart version A on a cream field: a row of recommended drinks at the top, then the closest cafe with pick-up times, then the itemised order and totals
screen A — recommendations first, on cream
screen B Cart version B on a dark field: the closest cafe and delivery address first, then the itemised order, with the recommended drinks moved below it
screen B — recommendations moved below the order, on dark
Two variables, changed together on purpose: where the recommendations sit relative to the thing the customer already decided to buy, and how much the background is allowed to compete with the photography.

The home screen, two other ways.

screen B Home screen version B: the same menu with the four drink cards drawn as white cards on the cream background
screen B — white cards on cream
screen C Home screen version C: the same menu with white drink cards sitting on a dark panel that runs behind the whole list
screen C — white cards on a dark panel
Three layouts of the offering went into testing; the dark cards on cream are the third, and they are the ones on the menu screen above. Same content, same order, three different answers to how much weight a list of drinks should carry.
I love how easy it is to order my coffee using this app's stylish design.
User review
Thanks to personalized recommendations, I've discovered new coffee favorites!
User review
I truly appreciate the inclusivity of this app; it makes my coffee runs hassle-free.
User review
Every morning, I rely on the quick ordering feature of this app to kickstart my day.
User review

Four reviews, reproduced word for word.

06 Reflection

What the work taught me.

The balance between how a thing looks and how it works is not a compromise you strike once.

Every hard problem on this project was a version of the same one: adapting the interface across screen sizes and orientations without losing usability, making it genuinely inclusive rather than technically compliant, keeping the visual appeal from quietly costing somebody a task, letting the research findings decide the design instead of my preferences, and staying current with the trends worth adopting while ignoring the rest.

Turning an idea into a finished app taught me as much about managing time and budget as it did about interfaces, and it settled something for me about how much a thoughtful screen is worth to the person on the other side of it.

  • cross-device optimisation
  • accessibility as an input, not an audit
  • aesthetics balanced against function
  • research findings over preference
  • timelines and budgets held

The design work people notice is the menu. The design work they feel is the cart.

The next one

Doctify

I designed doctor booking that makes healthcare feel close — search, clear profiles, reminders.

Read the case

Back to the work