Ru:tine24
A focus, community and loyalty app for a Vietnamese working-café brand
Overview
Making a room full of strangers feel like a team
A focus, community and loyalty app for RU:TINE, a Vietnamese working-café brand. We led it from strategy to handoff, shipped it in mid-2026, then used what launch taught us to reshape it into a multi-brand platform.
- Client
- RU:TINE CO.LLAB, Vietnam
- Scope
- UX strategy, information architecture, UX writing, design system, development
- Platform
- iOS and Android
- Audience
- Vietnamese Gen Z students and young professionals
- Timeline
- Strategy April 2026 → launch mid-2026 → 2.0 proposal autumn 2026
The challenge
RU:TINE sells community. Its customers come to work with headphones on.
The founder wanted an app that made that community visible and gave people a reason to come back tomorrow. Two obvious answers would have failed.
- 01
The transactional trap
A points app people open only to claim a discount. RU:TINE's own competitive analysis had already flagged this as the default failure of café loyalty apps.
- 02
The forced-connection trap
Networking features that assume people want to socialise in-app. In a room of people in flow, a feature that interrupts is not community. It is friction.
The insight
We weren't building an app that connects people. We were building one that makes people feel connected.
Community in a working café is one specific feeling: I am not alone in my grind. That reframed the brief.
Strava was the reference. Running stays a solo activity, but Strava makes individual effort visible and shared, and a community forms around it. Nobody is forced to interact. The app applies the same idea to focused work: the session stays personal, and where it lands and who sees it creates the belonging.
The strategy
Three opt-in layers, on a loyalty base
Someone who only ever uses the timer still gets full value. Someone who goes deeper finds belonging, then a sense of identity.
- 01
Focus — the individual loop
The timer starts on arrival, a photo opens each session and a recap card closes it. It works with no social use at all.
- 02
Community — ambient belonging
A live feed, visible in-store only, that shows who is here now, plus events run by RU:TINE. Nobody has to post.
- 03
Identity — the personal mirror
A work persona drawn from habits, a card and stamp collection, and visit cards with mutual adds that hand off to Zalo and Instagram.
Loyalty points sit underneath all three, earned by purchases and by focus time. Starting a session and taking the photo is the only consent gesture: nobody is visible to strangers by default, and profiles only open up inside events people chose to join.
Five decisions
Five decisions that shaped the product
Each of these went against a familiar pattern. The reasoning mattered as much as the screen.
- 01
A presence feed, not a content feed
A café has a finite number of daily visitors, and a sparse feed feels lonelier than no feed. So the live feed shows who is here right now, not what people posted, and only to people checked in to the café.
- 02
The photo as a ritual, not a gate
Every session starts with a photo. It marks a fresh start and becomes the texture of the recap card. It is the product's signature moment, so we protected it as a ritual and let the collection carry identity.
- 03
Presence FOMO, not feed FOMO
Every feature had to pass one test: does it reward arriving at the café, or opening the app more? The first serves the business. The second breaks the deep-work promise. This test later drove Phase 2 prioritisation.
- 04
No in-app messaging, no one-way follows
Vietnamese Gen Z already lives on Zalo and Instagram. The app makes the first gesture, a visit card exchanged by QR at an event, then hands the relationship off. Friends are mutual adds, so there is no follower count to perform for.
- 05
Loyalty that rewards focus, not only spending
Points come from purchases and, at a lower rate, from focus time. Rewarding presence fits the brand. It also turns point-chasers into feature users, and feature users into point earners.
Shipping it
Planned like a startup, not an agency job
Phase 1 was a closed launch that deliberately left loyalty out, to answer one clean question: do the features bring people back on their own? Loyalty, via POS integration, came next as a separate track.
Alongside the app we built the system that made the design shippable.
- 01
Design tokens
In W3C format, exported from Figma to code through a Node.js pipeline and GitHub Actions.
- 02
A re-skinnable theme
Deep navy and warm ivory, burnt orange for action, amber for rewards, teal for community. Each colour carries a job.
- 03
Type
DM Serif Display for moments worth keeping, DM Sans for interface, DM Mono for time and numbers.
- 04
UX writing
In English and Vietnamese, with a native Gen Z review before anything shipped.
When a feature was committed to the client without design input — guest-created events — we didn't argue that users didn't need it. We reframed it as sequencing and cost, anchored in principles the client had already signed off, and it moved to a later phase.
What launch taught us
The principles held up. The incentive did not.
The app launched in mid-2026. The honest result: the focus timer and photo sharing were used far less than we designed for. They were optional features competing for attention, with nothing that made people start. The community layer, the part the founder cared about most, was the part that landed least.
A session-completion reward asks for effort before giving anything back. To make the feedback loop measurable, we set the North Star as weekly return rate on completed café sessions, tracked across four groups: focus, presence, identity and product health.
2.0
From one café app to a platform for three brands
Then the client acquired two more coworking café chains and wanted all three in one app. For the new chains the app is mandatory: customers top up a wallet, scan in, and pay for their time.
That changed the design problem. Mandatory payment guarantees usage, but a captive user is not an attached one. Our proposal:
- 01
An invisible platform
One account, one wallet, one collection. The app wears the brand of whichever café you check into, built on the same token system with a set per brand.
- 02
Move the reward to check-in
Scan in, get something instantly. No effort before the first reward.
- 03
A collection that develops as you work
You add a concrete goal, “finish my thesis”, and it starts as a faint ghost. Focus sessions bring it into focus. Every focus session brings your dreams into focus.
- 04
Social as distribution, not a chore
What people post is an artifact from their collection, so the feed always has something worth looking at.
- 05
A metric that can't be inflated
Not daily actives, which payment props up, but the share of checked-in users who touch their collection.
What we'd do differently
Keep the principles. Change the mechanism.
- 01
Test the incentive before the interface
We spent design effort making the recap card beautiful before proving people would finish sessions to earn it.
- 02
Design for the zero-effort first moment
The best features ask nothing on day one. Check-in rewards do that. Session rewards don't.
“Reward arriving, not scrolling” survived launch intact. It is now the spine of 2.0.
Next project — 02
