Boba App

Overview

Boba is a mobile app from Sarajevo, Bosnia and Herzegovina, that helps businesses run their own loyalty programs. Customers earn and redeem points, called bobas, at the places they visit. Owners set the rewards, and employees confirm each purchase by scanning the customer’s QR code.

Role

App redesign: user flows and UI

Scope

Mobile app redesign with a high-fidelity prototype

Industry

Retail

The Challenge

The Boba team wanted to redesign its cross-platform app before development. One product had to serve three people with different goals. The customer collects rewards, the owner manages offers, and the employee confirms purchases at the counter. I was hired to design the main screens and patterns and to help with the user flow.

Research and Direction

The project started with a kickoff call with the client and the developer. Before the core screens, I shared a page of references and a style guide in Figma. The team chose what fit the product, such as a bottom bar with an emphasized QR button, a clear QR screen, browsing by category, a home page for owners, and charts for statistics. Those choices shaped the navigation and the visual system.

Key Decisions

• iOS first. The app is cross-platform, so I asked which system to design for first. We chose iOS and agreed to flag any screen that would need a different pattern on Android.
• The item before the code. I proposed an item page with photos and a full description before the QR code, so the customer knows what they get before showing the code at the counter. The client agreed.
• Many items in one visit. The client raised a real case. A customer who orders a steak and a beer earns rewards for both, but one QR code per item could make them think only one reward counts. I changed the flow so the employee scans the customer once and adds every item of the visit to the same transaction.
• A check before the points. Before the bobas go to the customer, the employee reviews the rewards and the customer details on a confirmation screen, so mistakes are caught at the counter.
• Rules set by the owner. On the owner side, the item editor defines how many bobas each item gives, so the rewards customers see come from the business itself.

Design Decisions

Drag the bar across each frame to compare the first version, on the left, with the redesign, on the right.

The home helps the customer choose a place.

The first version had categories and cards with placeholder images. The new home adds store search, sorting and favorites, and each card shows the photo, rating and category of the place.

Before After

The place page shows what each item is worth.

The first version listed rewards and offers as plain blocks. The new page splits the place into items, overview and leaderboard, and each item shows its photo, price and the bobas it earns or costs.

Before After

The employee scans the customer once.

In the first version the employee looked up rewards in a search field. In the new screen the employee scans the customer once and adds every item of the visit, with the quantity of each, to the same transaction.

Before After

The owner sees the business on the first screen.

The first version opened on a single statistics banner. The new home shows customers, loyalty and bobas issued and redeemed for the chosen place and period, with the next billing and a sales chart.

Before After

The customer gets a receipt.

This screen did not exist. After the scan, the customer gets a receipt with the place, each item and the bobas earned, as the client asked during the project.

New

Handoff

The client and the developer reviewed the screens in Figma comments, on details that matter in code. Those covered the size of buttons, long descriptions, the store name on each item, and icons that match the library the app uses.

Outcome

I delivered every screen and the animated logo splash. The client rated the project 5.0 on Upwork.