Portfolio case study
Transactional UX Design: Membership, Booking & Ordering Flows
OVERVIEW
PROJECT
This case study brings together two transactional UX projects focused on helping users complete tasks efficiently on mobile and web platforms. The work includes a dance studio booking system and a café ordering web app, both designed to reduce friction and support fast, intuitive decision-making.
ROLE
UX / UI Designer: information architecture, user flows, user journey, wireframes, visual design, prototyping, and stakeholder collaboration.
TEAM
Project managers, developers, and business stakeholders.
GOAL
Design seamless transactional experiences that enable users to quickly complete bookings and orders, while clearly presenting options, reducing decision friction, and supporting confident actions on both iOS and Android mobile devices.
OUTCOME
Across both projects, the focus was on simplifying user flows, clarifying options, and guiding users from entry point to completion with minimal effort.
KEY SKILLS DEMONSTRATED
Transactional UX Design
User Flow & Journey Mapping
Decision-focused Interaction Design
Information Hierarchy
Conversion & Task Completion Design
THE PROBLEM
Transactional websites often require users to complete multiple steps such as browsing products, selecting options, and confirming orders.
Both projects required users to make decisions quickly while navigating multiple options:
In the booking system, users needed to browse schedules, select classes, and complete bookings efficiently.
In the ordering app, users needed to customize food and drinks while considering preferences such as ingredients and dietary needs.
The challenge was to balance flexibility (options, customization) with simplicity (speed and clarity).
DESIGN APPROACH
1 User Flow Optimization
I mapped out end-to-end user journeys to reduce unnecessary steps and ensure a smooth path from browsing to completion.
In the booking and member check-in system
Membership & Login Flow: Users sign in with their member credentials, with password recovery handled via email verification. Members can manage their accounts and get QR code for class check-in, ensuring a personalized experience.
Class booking flow: Browse → Select course, instructor, and location → View real-time availability → Confirm booking → Checkout & payment→ QR code will be generated
In the ordering app
Ordering flow: Browse menu → Customize → Add to cart → (Login / Sign up / Apply membership perks) → CheckoutThe goal was to minimize friction and keep users focused on completing their tasks.
2 Decision-Focused Design
Both experiences involved multiple user decisions. I designed interfaces that anticipate common questions, such as:
“Which teacher is best for this class?”
“Do I want to change ingredients or add extras?”
“Are there dietary restrictions (e.g., allergies)?”
Customization options were structured clearly to avoid overwhelming users while still providing flexibility.
3 Information Hierarchy & Clarity
Content and UI elements were organized to highlight key actions:
Clear call-to-action buttons (Sign in / Book / Order)
Structured options and categories
Progressive disclosure for additional details
This helped users quickly understand what to do next.
Timely Dance Studio Booking Platform
Tools
Solution
For the dance studio booking system, I designed the booking flow and wireframes to ensure users could easily browse classes, sign in, get the QR code for class check-in, view schedules, and reserve sessions online.
The interface was structured to highlight key actions such as class selection, schedule viewing, different payment options, and booking confirmation, helping users complete reservations with minimal friction.
I also handled project coordination tasks to ensure design delivery aligned with development timelines.
Login System
User needs to sign in to the system to start their services.
Different Payment Options
If the user chooses credit card payment, a confirmation letter would send to their email.
If they choose e-transfer, they would receive a message from WhatsApp to tell them the method to finish the payment.
User Interface
Solution
The Pandepain café mobile ordering app focused on enabling customers to order drinks and food quickly from their phones.
The key challenge was simplifying the ordering process while supporting customization preferences.
Based on user interviews and journey mapping, we identified common questions customers might have when ordering, such as:
• switching to skim milk
• adjusting sugar levels
• identifying ingredients for allergy concerns
To address these needs, I designed customizable ordering options directly within the purchase flow, allowing users to adjust ingredients and preferences without leaving the ordering process.
Menu items were organized into clear categories for food and drinks, improving browsing and reducing cognitive load.
Tools
User Interface
Result & Reflection
Impact
These projects demonstrate how thoughtful information architecture and flow design can significantly improve transactional experiences.
Users were able to navigate options more easily and complete tasks with greater confidence.
What I learned
Designing transactional products requires balancing speed and flexibility.
Users want to complete tasks quickly, but they also expect systems to accommodate personal preferences.
Clear flows and thoughtful customization options help achieve both. I learned how to balance flexibility with simplicity, ensuring users can make decisions quickly without feeling overwhelmed.
