Bookiea
Improved ease of use by 23.8%, scoring 6.67/7
40% of American parents struggle to find suitable after-school activities due to confusing interfaces on existing platforms. Our product is an all-in-one platform for extracurricular activity and class bookings, designed to simplify life for parents and users.
I was responsible for designing the class search, booking, and checkout flow, analyzing market complexities to create a flexible, intuitive solution for seamless class bookings.
ROLE
Founding Designer
UX researcher
I was responsible for the class booking flow design,
YEAR
2023-2024
TEAM
CEO
3 Product designers
2 Front-end Engineers
2 Back-end Engineers
DELIVERABLES
End user interviews
Educators interviews
Competitive Analysis
Workshop
Mockups for Class searching & booking process
Prototypes for Class searching & booking process
Asset production
Simplify parenting journey with easy activity booking
1K +
Click within one day
6.7/7
Customer satisfaction
0-1
Design & Ship from scratch
To identify parents’ pain point, I initiate user research and we found that
Parents struggle with hidden key info, poor searchability, and unclear choices on activity-booking platforms.
To explore parents' challenges in booking classes and identify opportunities, I initiated user research. Totally, we conducted five interviews in a week.
Note-taking table for recording transcripts and organizing insights into sticky notes for an affinity map
We used coordination table records the research time, researchers a& participants
Affinity map that we used to generate insights from the interviews
“
These websites are frustrating—I spend so much time selecting a class, only to find out it's full. Good classes fill up fast, and searching across multiple sites is time-consuming!
- Ms. K, a mother of a 9 years old boy
Based on 5 user interviews, we found that
Sketching collaboratively helps us move fast
Wireframes
We have three designers, each creating wireframes for key flows and pages. After discussing, we combine the best elements to form the final solution.
We also involve developers early to ensure feasibility, avoid wasting time, and stay agile.
We chose to prioritize the key filters parents mentioned to help them search class
High-fidelity design version 1
This is the first high-fidelity version based on our wireframe and user research, aims to quickly test usability and ensure users can understand and use the product as intended.
We designed a schedule panel to simplify class selection and reduce cognitive load.
Step 1: Select booking option
Users can select their preferred booking option—full camp, weekly, or single session—directly from the tab above the schedule panel.
The available booking options depend on what providers choose to offer. They can configure these options using our B2B platform.
Step 2: Select a date span
After choosing a booking type, users can select a date range.
For example, for the weekly booking option, users tap the corresponding tab, choose their desired date span, and then select an available class time.
Step 3 - Select the date and time, then review the price
Once all selections are made, the total price is displayed, and users can proceed to add the booking to their cart.
Users can select only one option per step to ensure clarity and minimize confusion.
To optimize our development costs and ensure product usability, we decided to
Detour! Time for testing our assumptions
User Insight 1- Less preferred due to time panel complexity
3/4 users prefer each class booking option to be clearly outlined separately, as the time panel feels a bit complex.
User Insight 2 - More details for syllabus
3/4 users want more class syllabus details before deciding to book.
User Insight 3 - More details for syllabus
3/4 users want more class syllabus details before deciding to book.
Where we landed
Optimization 2: Adding a default status for searching page
We introduced a default search page for users who click the search button without input, displaying location-based class suggestions and recent activities.
This enhances content availability and creates advertising opportunities for revenue generation.
Optimization 1: Improved search display & Activity card layout
In this version, we have expanded the default display space to show more search results for users.
We also refined the layout of activity cards to improve information visibility for users.
Sticky booking panel for visibility while scrolling and progressively disclose multiple booking options
Based on user research, we redesigned the booking panel, relocating it from the lower center of the page to the right column and making it sticky to the top. This ensures users can easily see it while scrolling.
After selecting a booking option and clicking "Book now," users will see a popup with schedule options specific to their choice. This conversational design reveals relevant information step by step, reducing cognitive load and ensuring an intuitive experience.
Scrollable activity cards: Users can browse tabs and scroll vertically to view activity details, including name, schedule, type, location, price, and bookings
Booking option tabs: Organizing different booking types with tabs
Progressive Disclosure for booking options
When users click "Book Now," a modal opens with a tabbed booking panel. Users can browse and scroll through booking cards displaying class details such as schedule, type, location, price, and availability. They can add a preferred class to their cart by clicking "Add to Cart."
Expandable activity details: To meet user needs for syllabus information, I redesigned activity cards with expandable sections for weekly session breakdowns, keeping the page informative yet streamlined through a progressive disclosure approach.
Redesign syllabus for 3/4 of users who wanting more syllabus details
Based on feedback from 3/4 of users wanting more syllabus details before booking, I redesigned the syllabus section with expandable boxes. This includes the activity title and subtitles, providing parents with a clearer understanding of the class content and helping to build trust with the instructor.
Cart and checkout process design
The cart is designed to allow users to check out multiple activity cards at once, with clear item details, prices, and the total.