Course Scheduling System
My Role:
UI/UX Designer
Platform:
Tools:
Figma
Timeline:
Background
Una Calendar is a new redesigned and customised system based on Calendly, which is a well-known software for scheduling various appointments. However, it was designed primarily for one-time bookings and didn’t quite fit our company’s needs.
Thus, I collaborated with the technical team to design a new scheduling system that customers can use to book their class times and check their study schedules.
Problem
1. User info cannot be saved:
Customers need to enter personal and contact information for every booking
2. Unfriendly to multiple scheduling:
User can only select one time slot every time
3. Complex rescheduling process:
Customers can only change the time slots through the corresponding email
Solutions
Create User Accounts for Record Saving
Save personal information to prevent entering repeatedly
Know more about our users background
Seamless Scheduling Process
Progress bar to track process status
Information display for confirming schedule details
Dashboard for Overview
Display the scheduled course summary
View class status or cancel lesson easily
Research & Define
Competitor Benchmarking
To understand the common scheduling software that user are familiar with, I gathered 10 similar softwares of how they design their booking process and user interface. I analysed their differences and what kind of appointments they are focusing on, as the user task flow is different on one-time and multiple booking.Then, I discussed with other team members what key features we should include, as well as inspiration from other competitors’ designs.
💡 Insight from research
- Login to account before booking
- Simple progress bar display
- Dashboard for booking status
- Highlight information with a light background
- 1 or 2 weeks calendar display on mobile app
Design principles
Modified User Flow
The previous user flow was very simple but not suitable for all use cases, especially for existing customers. Thus, I generated a new user task flow that includes some new features like login and booking summaries.
Design & Test
Low Fidelity Prototype
Based on the improved user flow, I used Figma to draw low fidelity prototypes with various versions, especially some of the main functional screens and figured out which layout has a better user experience based on the above design principles.
The Style Guide
As a functional system, I chose to go with a simple and clear colour palette as a way to present booking information. Also, different size of typography was created for responsive design mode.
High Fidelity Prototype
I generated the high fidelity prototype base on the major user task flow, and added some interactions and transitions from Figma to provide a better user experience.
Usability Testing
I conducted a unmoderated usability testing by Maze and test the prototype with 5 people outside the company. The tasks were focusing on the various features such as registration, booking process and dashboard.
I analysed the testing results on Maze task by task. By focusing on quantitative result such as bounce paths and mis-click rates, I got a brief look at the performance of each task and figured out which tasks had poor user journeys.
Also, I got the qualitative result from the heatmap to figured out what was confusing users and how they got stuck during the task. At the same time, the feedback and opinions of the respondents were also helpful in improving the design.
What I Learned
Other projects
Mentoring Platform
EdTechUI/UX DesignWeb Develop