INTRO
A confusing and frustrating booking experience resulted in users abandoning the website and the company losing sales. While designing digital experiences and updating the website, I identified several issues with the current booking flow. The process could be easier to understand and straightforward. The goal of improving the booking flow is to increase user conversions. We reduced the number of steps of booking a training from 13 to just 6.
Contributions
- UI/UX design
- Prototyping
- Usability testing
- Prototyping
- Usability testing
THE CHALLENGE
Although the website has improved, the booking flow needs to be better. Booking a course takes time and effort. This was a personal opinion and what I read in some of the lower-rating reviews from customers. The main question we were trying to solve in this process was: How the current booking steps can be optimized to be more efficient and functional?
BEFORE REDESIGN
I interviewed some of the users and stakeholders and found 5 different core problems in the booking flow
- Unclear times and days of training available
- Unclear step on discount codes
- Confused cost per course
- Vague prerequisite components
- Manual billing process.
(Clients call the company to request it)
- Unclear step on discount codes
- Confused cost per course
- Vague prerequisite components
- Manual billing process.
(Clients call the company to request it)
THE CURRENT EXPERIENCE
The only way to book training is through the online portal, but users must go through a complicated and confusing process. The main problem was the high number of steps required to complete the booking. There are some important UI mistakes that will be described next.
New booking flow main improvements
- Filtering course, location, and date right from the home page.
- Mobile-first approach.
- Grouping related information.
- Sort available courses by time.
- Add 1 or more participants easily
- Optional billing information step.
- Discount code showing in the payment step
- Mobile-first approach.
- Grouping related information.
- Sort available courses by time.
- Add 1 or more participants easily
- Optional billing information step.
- Discount code showing in the payment step
REDESIGNED WEBSITE DESKTOP AND MOBILE BOOKING FLOW
WIREFRAMES
NEW DESKTOP BOOKING FLOW
NEW MOBILE BOOKING FLOW
USABILITY TESTING
There were several rounds of user testing using prototypes. Participants were given a link to the prototype and were asked to book a course.
Testing Findings
All participants found the booking process straightforward. Observing them also gave us the idea of making CTA more descriptive, adding description fields, and grouping all related information.
