Macellan SuperApp
Macellan brings payments, wallet, loyalty and subscription services into one consumer app. The design problem was hierarchy: many services competing for the same home surface, while the user usually arrived to complete one specific task.
- (Context)
- Macellan · Consumer superapp / mobile ecosystem
- (Role)
- Senior UI/UX Designer — mobile flows, service hierarchy and interface system
- (Scope)
- Home architecture, service hierarchy, wallet/payment flows, loyalty/subscription modules and mobile UI patterns
- (Platform)
- iOS / Android
- (Status)
- Professional work
- (Live product)
- View on App Store
The problem
A superapp grows by adding services, and every new service asks for visibility. Without structure, the home screen becomes a menu instead of an entry point. The challenge was to keep primary actions fast, while giving secondary services a predictable place to grow. The app had to feel expandable without making the user re-learn it each time.
One of a three-person design team (a design lead, myself as senior, and a graphic designer), working with product owners, mobile and back-end engineering, and marketing/ops. I owned the consumer mobile experience, multi-service flows and information architecture, and helped steer the team's UI/UX decisions — including how to keep many services on the home without it turning into a crowded menu.
Key product decisions
- 01Anchor the home around wallet visibility and the most-used actions before introducing secondary services.
- 02Group services into a predictable hierarchy so new modules can be added without redesigning the home.
- 03Keep payment and top-up actions reachable from multiple points, not locked to one tab.
- 04Use one card, list and module language across wallet, loyalty and subscriptions so the app reads as one product.
Flow and system design
The structure separates fast actions from exploratory service browsing. Balance, payment and top-up sit close to the surface, while loyalty, subscriptions and service modules follow a clear hierarchy below. Each service follows the same entry, confirmation and result rhythm, so the product can grow without becoming harder to use.
Interface system
The mobile interface system covers wallet cards, service tiles, list rows, module blocks and confirmation sheets. Shared spacing, type scale and elevation rules keep the surfaces consistent across iOS and Android. The system is built to absorb new services without weakening the home hierarchy.
Edge cases & states
- 01Empty wallet, pending top-up and failed payment states.
- 02Loyalty tier changes and subscription renewal or lapsed states.
- 03First-run home versus a user with many active services.
- 04Long service names and localisation across modules.
Developer handoff
I delivered the home architecture, service flows and reusable mobile patterns with state annotations for iOS and Android implementation. The handoff focused on how modules enter the system, how actions stay reachable and how each service keeps the same interaction rhythm. It shipped on iOS and Android and runs as the live Macellan SuperApp.
A mobile ecosystem where payments, wallet, loyalty and subscription services needed to live inside one clear home structure without becoming a crowded service menu.
(12)
What I'd improve next
I would introduce a light personalisation layer so the home can respond to real usage without becoming unpredictable. I would also tighten cross-service navigation so moving between wallet, loyalty and subscriptions feels more continuous.
Played an active role in redesigning and shipping the V2 experience of Macellan SuperApp (2022), bringing in-store payment, remote ordering, subscriptions, loyalty and soft-play into one clearer, scalable multi-service app.
- 01Live on the App Store and Google Play; the app has surpassed 1M+ users.
- 02Holds a 4.8 average store rating.
- 03V2 rebuilt the experience from scratch around reusable navigation, card, flow and state patterns, so new services slot into the same system.