MOBI

Group Tabs

Background

MOBI is a SAAS company that primarily enables its clients to order digitally through a white labelled store front. The company is a B2B2C where they aren’t typically known to their users as their store fronts are usually under the guise of its clients branding. One of MOBI’s mainline products ‘Table Ordering’ saw large uptake during the pandemic due to the low contact nature of the experience. The ‘Tabs’ product is a follow-on from Table Ordering where myself and the team were tasked with digitising and streamlining the process of starting and using a tab.

Team

product manager 1 | ux researcher 1 | product designer 1  Front-End web Developer 2 | backend developer 1

Role

For this project I lead the UI and experience design of the Tabs product. Much of the initial discovery, market research, scoping & client interviews had been undertaken by the product manager in my team.

Main Tasks

- Customer interface and experience.

- User research interviews (consumer side).

- Motion & interaction.

The Project

How might we simplify the process of ordering and paying for multiple rounds, for one or many people?

The Tools

Figma
Illustrator
After Effects
Lottie
Gleanly

What were we solving for?

- Recurring orders (many drinks over a session at a bar, or meal then drink then dessert).

- The ability to pay for the orders of a group.

- Credit card fees being charged per transaction.

Who were we solving for?

- Individual/ corporate users entertaining a group.

- Individual users placing recurring orders over the course of a night.

User(s) Journey

Tab’s accommodates for three kinds of users:

- Group Tab Owner: The user owns and distributes the join code to the group.

- Group Tab Joiner: The user who will place orders through the owners account.

- Sole Tab User: The user who will be placing recurring orders only for themselves.

Initial Draft Flow

Draft critique

Key questions to come from the critique:

- We need to have the tab details page held somewhere else - from the bottom there’s not enough room (and might be confusing for someone wanting to add their order to the tab), over top of the menu doesn’t make sense.

- Can joiners join multiple tabs at a time? If so, will all be visible as payment options, or will you only be in one tab flow at a time?


- Having a default tab limit ($50), and the +/- for choosing the amount. We don’t know what a reasonable/normal tab amount is, so should we just have it as blank?
Do we have the “tab balance” or “how much is left”?

- Logging of the average value guests are using to start their tab amount.

Usability Tests & Interviews

Once we had a working prototype, myself and the product manager went onsite to one of our clients to conduct usability tests as well as a post test.

Objectives

- Uncover friction in current & proposed flows so they may be improved upon.

- Determine if UI elements are harming the experience.

- What level of detail do users need to feel more comfortable using Tabs.

- How does MOBI best explain key aspects of the Tabs experience.

Beta & AB Testing

With our refined design our team put this product into a beta release with one of our clients to observe its performance in the wild. After one month of we found that 62% of all single user tabs were only ordering one round. What this told us was that consumers don’t understand tabs well enough to make the right choice and are selecting what they think is the ‘right’ choice or are changing their minds about how they intend to use their tab.

In response to these results we ran an AB test where we omitted the screen that we suspected was causing the issue. As a result we found that:

Without the Omission
65.4% of customers started a tab.

23% of those ordered more than once.

With the Omission

5% of customers started a tab.

50% of those ordered more than once.

While product engagement is significantly reduced this change allows the engagement to be more meaningful.

Final Outcome

Ease of Access

For the tab owner, MOBI makes it simple for them add their group to a tab. The tab code and can be shared audibly or have a no-code link copied to the users clipboard on their device.

Cutting Out Friction

Owners and joiners of a tab negate the repetitive nature of having to re-enter or selecting card details when placing multiple orders. A latent bonus for MOBI’s clients is the reduction of merchant service fees due to Group Tabs only processing a singular transaction at the end of a session.

Limiting Unwanted Surprises

MOBI has a suite of management options in place for monitoring, increasing and guarding their tab budgets.

Learnings

Although the concept of a bar tab is banal and has been around for a while, the translation of this service into digital into a pattern will need to continue to see iteration. Going forward the use cases probably won’t expand (Corporate users purchasing for a group and individuals who intend on making recurring orders) however in its current state we have made changes to Tabs to enable more meaningful usage of the product. Since testing we have scaled Group Tabs out to more brands and have observed a difference of 12.4% uplift in average order value for users who engage vs user who don’t. This is a green signal of its potential, with better comprehension and exposure of users ability to join, Tabs will continue to drive more value in the future.

Projects 2021 - '24
Storefront V4
MOBI, 2024
UI/UX/Research
Group Tabs
MOBI, 2022
UI/UX/Research
Jobs & Training
Truggit, 2022
UI/UX
Autonomous Cafes
Once Alike, 2021
UI/UX/Research
Design System
MOBI, 2021
UI/UX/Research
Eth Value Tracker
Personal Project, 2023
UI/UX/Front-End Development