Back to projects

Product Design · Web App

Simple Booking

A space-scheduling system that helped students reserve a space in facilities during the COVID pandemic.

Role
Product Designer
Timeline
2026 · 2 weeks
Tools
Figma, Cursor, React, Tailwind, Supabase
Team
Solo
Open published app
Simple Booking app mockup cover

This project started with a minimum viable product to reduce the spread of the virus during the COVID-19 pandemic. At the beginning, we wanted to find an existing product that met our initial requirements. However, we tried twelve existing products but didn’t find anything that met our needs. Therefore, I created Simple Booking.

Challenge

The first version has been available for students since 2019. In the past two years, it has been used by SoDAA students and faculty more than one thousand times. After two years of use, more needs were revealed from the user groups. So, in the second iteration of the project, my goal is to improve the functionalities and design to meet the growing needs.

Process

The workflow moved from userflow and ideation into style development, then into AI-assisted development for project initialization, feature development, design iteration, and deployment.

Userflow
Ideation
Style Development
AI-Assisted Development
Project initialization with DESIGN.md
Feature development with userflows
Design iteration
Project deployment

Sketching

Sketching is my way of thinking. When the functionalities were confirmed, I started to explore elements and the interactions with a pen and paper. This helped me quickly produce the various solutions and document the design process.

Simple Booking sketch explorations

Visual Style Development

This moodboard defined the product’s calm, precise, and trustworthy visual direction. Its medical-tech references, soft gradients, and clean color palette helped guide vibe coding prompts toward clarity, accuracy, and a more professional booking experience.

Simple Booking moodboard for visual direction

Final Design System Preview

Note for students: This is a placeholder, it does not reflect the actual project.

Simple Booking placeholder design system preview

AI-Assisted Development

These prompts document how AI assistance supported the build process. Use the controls to move through the source prompts one slide at a time.

Slide 1

Project initialization with DESIGN.md and site structure

Initialize a React.js application for a mobile-friendly, responsive multipage web application for space reservation with the following blank pages.

Home Page: /
Building List Page: /buildinglist
Building: /building
Space Page: /space
Confirmation Page: /confirm
Reservations: /reservations
Navigation items should include Home, Building List, and Reservations

Onup initialization, please install the required dependencies: radix-ui, lucide-react, framer-motion, and tailwindcss.

Gallery

Simple Booking gallery visual 1
Simple Booking gallery visual 2
Simple Booking gallery visual 3
Simple Booking gallery visual 4
Simple Booking gallery visual 5

Deployment

Currently, Simple Booking has been proven to be successful by a small group that has about one hundred users in a design school. In the future, I plan to further optimize the system design and make Simple Booking a product that meets the needs of bigger user groups.

Visit Simple Booking

Reflection

Simple Booking taught me that the right solution isn't always one you can buy—sometimes you have to build it. The biggest lesson was that reducing friction matters more than adding features. Next, I'd test with users earlier and design the system to scale beyond a single school.