Otter Now Kiosk Design Project
Michael Hartono
Like this project
Posted Jan 30, 2026
Designed and prototyped a kiosk for F&B order automation, improving efficiency and user experience.
Likes
1
Views
0
Timeline
Jan 1, 2025 - Mar 31, 2025
How Otter Now helped 8+ brands streamlined their order flow.
Otter Now is a self-service ordering kiosk for F&B tenants by reducing the need for cashier registrars and replacing it with an easy and intuitive Kiosk. The goal of this project is to get higher order accuracy, reduce wait time for customer and increase order volume.
Role: Product designer
Timeline: Jan 2025 - Mar 2025
Contribution: Kiosk design & prototyping
Ordering food should be fast and easy right?
In reality, it can't be like that because…
Customer often hold lines just because they are not ready to order.
In small F&B tenants, the cashier person often goes back and forth because he handles both taking order and delivering the order, making a long queue.
But what about Kiosk? Kiosks have different layouts depends on the provider, for example McDonalds Kiosk and local Kiosk provider has different layout. Therefore, users must “learn” or adapt how to order using specific machines.
Big screen design opportunity
Due to our time constraint, we do onsite research on nearby KFC and Gomachi Pakuwon Mall, Surabaya to gain insight of how the usual flow of is for Kiosk, because it's my first time designing a product larger than desktop PC screen.
Other than onsite research, we also have desk research session where we collect information from Youtube videos and insights from the founders on WhatsApp.
Onsite research screenshot: Toast from the founder and ESB & Qios is from me.
Onsite & desk research screenshot: KFC from the founder and Youtube is from me.
Complied user flow from Qios, ESB, Toast, Snackpass & Otter.
After we finished combining the screenshots are drawing out user flows from there. We've got some insights how we want to design the Kiosk.
Familiar, predictable patterns
Menu of always on the right
Components and card states mirror common mobile commerce patterns (GoFood and GrabFood) to lower the learning time and first‑time users can complete an order unaided.
Large, readable cards and buttons with obvious states for selected, disabled, and added items because our target market is not specified by age. It’s for all ages.
Always‑in‑control navigation
Restart is always visible, never hidden behind a back icon.
Clear step indicators on checkout flow to communicate clearly where is the user now.
Dine in or take away is selectable at checkout and can be changed without restarting the order. So, it saves users time if they changed their mind.
Localization & reducing physical fatigue
Localizing research insight by removing tipping & debit card signage screen because in Indonesia, we are not accustomed to tipping and we use swipe or insert our card enter the PIN.
Last thing is the keyboard while typing on the Kiosk. two of the competitors have full screen keyboard which can bring out users’ physical fatigue because the travel distance from one keycap to another keycap is too long.
Card states for the Kiosk, localized with GoFood & GrabFood inspiration
Comparison between competitors' keyboard and Otter's keyboard
Design process
Before we design anything, I took inspiration for the keyboard from Google TV Design Kit and after that we made wireframes first for the key screens because we already made a style guide before and have some color variables ready for hi-fi design.
While designing the hi-fi screens we also created the design system using atomic approach, from the smallest component like tags, keycaps and buttons into the largest one which in this case is organism like navigation bar & menu customization.
Early wireframes for Otter Kiosk
A couple of components in Otter's design system including buttons, tags, wizard & keycaps
More design system component for Otter Indonesia
Final design snapshots of the designs.
Impact to Otter customer businesses
We use Otter at Sisters Matcha & Coffee, and it has made ordering so much easier for both our customers and our team. Customers can self-order without needing a cashier, but we still have flexibility when assistance is needed.
- From Sisters Matcha & Coffee
Since we used Otter, we directly feel the difference, now all order & payment issues are fully automated, no hassle and the kitchen become more efficient. The Good Blend also manages to sell 150+ cups without missing a single order and without the long queue drama.
- The Good Blend founders
Client testimonial
He is incredibly organized, communicates clearly, and consistently delivers designs that meet our expectations. What stands out most is his strategic approach, he doesn’t just design based on aesthetics, but takes the time to understand the product, the target audience, and our business goals.
Michael sets realistic timelines and achievable milestones, which makes the collaboration smooth and efficient. His thoughtful process ensures every design decision has a clear purpose and aligns perfectly with our vision for Otter Now.
- Carlson Ivanic Jansen, CEO • Cofounder Otter Indonesia