Overview
Role
CatchApp Bookings is a start-up B2C scheduling tool that allows its users to save over 5 hours a week on admin tasks. Its known for boosting productivity as well as reducing no shows and double bookings. My mission was to upgrade and enhance the Event-type creation page. With a user-centred approach, our goal was to design a seamless online experience with a big priority on intuitive navigation and a visually appealing interface.
UI/UX Designer, UX Researcher
Tools
Figma, Smartlook,
Scope
1 month
Our goal
-
Improving the page navigation: This will improve the overall user experience which leads to many benefits such as reduced bounce rates, increased engagement, higher conversion rates and enhances accessibility.
-
Revamping the interface: Improving the interface reflects positively on the brand, conveying professionalism and reliability. This can lead to an overall improved user experience
The design process
Problem
The challenge we encountered with this page stemmed from its increasing length due to the addition of more features. As shown in the image below, the page looked like a list of features which seemed to be overwhelming for our users.
01 Discovery
To understand our users better, we conducted surveys that provided quantitative insights into their preferences and pain points. We found majority users didn’t have a good experience whilst creating their event types due to the amount of features on the page to select from.
02 Define
Affinity Map
By utilsing an affinity map enabled us to clearly categroise and analayse user preferences. This strategic approach helped us to sort through our user feedback to find painpoints. Through this process, we were able to identfy the issues our users are facing.
03 Develop
High-fidelity wireframes
Our design process resulted in the development of a user-friendly interface distinguished by it’s straightforward user flow and untuitive navigation. We placed a high priority on reducing user confusion, fostering engagement, and enabling streamlined interfactions to imrpove user satisfaction and ensure a seamless user experience throughout the journey.
Style guide
We opted to refine the color scheme of this page, as we believed the orange tone was somewhat too casual, and we aimed to steer CatchApp towards a more professional image. Choosing blue was a natural decision, aligning well with the company's ethos as a professional scheduling tool. Having previously updated the company's website style guide to incorporate blue, we noticed a significant increase in incoming traffic, indicating a positive reception from our audience.
UI Designs
We created high-fidelity mockups that incorporated detailed interactions and visuals, resulting in an engaging interface aligned with the brand identity.
We decided to create a side menu with a short list of features so the user knows what features is in each page without having to go into them.
We also decided to pre-fill some fields and add an Asterisk to the mandatory fields so the user is able to save sometime filling out the form.
When the user completes a page and clicks next, a small tick will appear in the side menu to indicate the page has been filled.
We also grouped all the similar features together. As shown in the image on the side, all the scheduling features are grouped together.
With the additional settings features, we defaulted them as OFF. The user is able to go in and turn these ON but are not required to create the event type.
After the mandatory fields on the first 2 pages have been completed, the event type will be created.
​
The user is now able to share their link and start receiving bookings or they can continue customising their events.
If user decided to continue customising, the following pages will appear.
​
The user is able to save & complete the event type at any point as none of these pages contain mandatory fields.
04 Deliver
We annotated high-fidelity mockups to guide development, ensuring intuitive user interactions like hover effects and button states. This streamlined implementation, minimised challenges, and fostered collaboration with the development team, resulting in innovative solutions.
Here is a link to the full slide doc: https://docs.google.com/presentation/d/1HDBcmohhNZ7mwQTbVcxzTRKYWNl5NTypGnOJhUe7DMk/edit?usp=sharing
05 Conclusion
Looking forward, our primary emphasis remains on continuous improvement. By gathering user feedback, hosting regular design-development meetings, and leveraging collaborative design tools, we aim to elevate CatchApp's digital presence. Embracing user insights and fostering teamwork will serve as our recipe for crafting increasingly efficient and impactful user experiences in the future.