Case Study 5
Transactional UX: Booking & E-commerce Experiences
OVERVIEW
PROJECT
• Dancing Class & Studio Booking System
• Kitchen Implement E-commerce Website (UK)
• Café Mobile Ordering Web App
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 transactional experiences that allow users to complete bookings and purchases quickly while keeping navigation clear and intuitive on both desktop and mobile.
OUTCOME
Delivered streamlined booking and shopping flows that improved usability, reduced friction in key actions, and helped businesses guide users toward reservations and purchases.
KEY SKILLS DEMONSTRATED
Booking Flow Design
Information Architecture
E-commerce UX
Stakeholder Communication
THE PROBLEM
Transactional websites often require users to complete multiple steps such as browsing products, selecting options, and confirming orders.
However, poorly structured navigation or overly complex flows can easily cause confusion or drop-offs.
quickly browse products or services
understand available options and pricing
complete bookings or purchases without unnecessary steps
The design challenge was to simplify these journeys while balancing business goals such as product discovery, reservations, and conversions.
DESIGN APPROACH
1 Understanding Business Goals
For each project, I began by understanding their requirements, visual preferences, and product or service categories.
I also conducted reference and competitor research to identify common patterns and define the marketing positioning and business goals for each platform.
2 Structuring Information & User Flows
From there, I focused on structuring the information architecture, user flow diagrams and sitemaps to support key user actions.
Dance Studio Booking System:
I created the sitemap, designed wireframes, and structured a clear booking and sign-in flow for classes and studio sessions.
Kitchenware E-commerce Website (UK):
I structured product categories and integrated a cooking blog section so users could discover products while exploring recipes and content.
Cafe Ordering Web App:
I organized menu categories and ordering steps to help users browse, select, and place orders efficiently.
3 Visual & Interaction Design
Once the structure and flows were defined, I developed the visual interface and interaction patterns to support clarity and usability.
mobile-first layouts
clear call-to-action buttons for booking or purchase
intuitive product and service browsing
interactive prototypes to communicate design concepts to stakeholders
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, 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
Kitchenware E-commerce Website (UK)
Solution
For the UK-based kitchenware store, I designed an e-commerce website that allowed users to browse products, purchase kitchen tools, and explore cooking blog content.
The information architecture was organized around product categories and educational content to support both shopping and brand engagement. Responsive layouts ensured users could easily browse products on mobile devices.
Tools
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.
By focusing on navigation clarity, customization flexibility, and streamlined purchase paths, the interfaces helped users complete bookings and purchases more efficiently.
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.
