Bookablebiz - Service Booking E-commerce Solution.
Bookablebiz - Service Booking E-commerce Solution.
As a UI Designer at i4 Consulting Pvt. Ltd. I was tasked with the design of the user interface for a service booking website (bookablebiz) that facilitates booking appointments for multiple services such as salons, doctors' appointments, and more. The project included not just the user-facing pages but also a vendor panel for service providers to manage their bookings and subscriptions.
I worked closely with a Senior UX Designer, who conducted the research and wireframing. I translated the wireframes and user flows into a clean, visually appealing UI. The goal was to create an interface that was easy to use and intuitive while keeping the aesthetic aligned with modern web standards.
As a UI Designer at i4 Consulting Pvt. Ltd. I was tasked with the design of the user interface for a service booking website (bookablebiz) that facilitates booking appointments for multiple services such as salons, doctors' appointments, and more. The project included not just the user-facing pages but also a vendor panel for service providers to manage their bookings and subscriptions.
I worked closely with a Senior UX Designer, who conducted the research and wireframing. I translated the wireframes and user flows into a clean, visually appealing UI. The goal was to create an interface that was easy to use and intuitive while keeping the aesthetic aligned with modern web standards.
Headquarters
Jaipur, Rajasthan, India
Jaipur, Rajasthan, India
Industry
Information Technology
Information Technology
Company
i4 consulting pvt. ltd
i4 consulting pvt. ltd
Challenge
Challenge
The project had multiple challenges, one of which was creating a booking engine that would handle different subscription types for the vendor panel. The vendor panel was designed to allow service providers to manage their appointments and subscriptions efficiently. The challenge was to design a clean, easy-to-use interface for managing subscriptions, handling booking options like Pay & Go, Open Subscription, Close Subscription, and Packages.
Additionally, the user-facing site needed to support easy navigation for customers to book appointments for various services. The customer interface needed a clear layout for browsing services, a search option prominently placed in the hero section, and a visually engaging right-side image to enhance the user experience.
The project had multiple challenges, one of which was creating a booking engine that would handle different subscription types for the vendor panel. The vendor panel was designed to allow service providers to manage their appointments and subscriptions efficiently. The challenge was to design a clean, easy-to-use interface for managing subscriptions, handling booking options like Pay & Go, Open Subscription, Close Subscription, and Packages.
Additionally, the user-facing site needed to support easy navigation for customers to book appointments for various services. The customer interface needed a clear layout for browsing services, a search option prominently placed in the hero section, and a visually engaging right-side image to enhance the user experience.
Results
Results
The final design solution featured: feedback from both the client and users was overwhelmingly positive. The vendor panel saw significant improvements in usability, with vendors reporting a smoother process for managing bookings and subscriptions. For the customer-facing site, the simple yet engaging UI helped increase user engagement, with customers appreciating the easy navigation, quick service selection, and smooth booking process.
Increased conversions: The simplified booking process contributed to a 25% increase in bookings now.
Improved vendor management: Vendors were able to manage their services and subscriptions more efficiently, leading to better service quality and more flexible offerings.
The final design solution featured: feedback from both the client and users was overwhelmingly positive. The vendor panel saw significant improvements in usability, with vendors reporting a smoother process for managing bookings and subscriptions. For the customer-facing site, the simple yet engaging UI helped increase user engagement, with customers appreciating the easy navigation, quick service selection, and smooth booking process.
Increased conversions: The simplified booking process contributed to a 25% increase in bookings now.
Improved vendor management: Vendors were able to manage their services and subscriptions more efficiently, leading to better service quality and more flexible offerings.
Process
Process
Collaboration with Senior UX Designer: The Senior UX Designer led the research and wireframing for both the customer facing website and the vendor panel. His role involved talking to the client, gathering insights, and defining the wireframes based on the functional requirements.
Once the wireframes were finalized, we had several discussions where I understood the core requirements and user flows, such as:
The flow for booking appointments. The management of the subscription types(Pay & Go, Open Subscription, Close Subscription, Packages).
How to design the vendor panel to be easy for service providers to use.
With these insights, I moved on to designing the user interface for both the website and the vendor panel.
UI Design - Translating Research to Visuals: In the UI design phase, I focused on making the platform visually appealing and easy to navigate while staying true to the brand’s identity.
Color palette: The color scheme was carefully selected to align with the brand and evoke the right emotions. I used the following colors throughout the design:
#ea8933 (Warm Gold) for call-to-action buttons, highlighting important sections.
#2c2c2c (Dark Grey) for background areas to ensure clarity and focus on the content.
#ed510c (Bright Orange) for highlighting interactive elements and buttons.
#72959a (Muted Teal) for secondary elements, balancing the vibrancy of the gold and orange while providing a calming effect.
UI for Customer-facing Website: Search Bar: A search option was placed in the hero section on the left to make it easy for users to quickly find the service they were looking for.
Usability Testing: We conducted usability tests with a diverse group of users to validate the design and identify areas for improvement. Based on the feedback, we made necessary adjustments to the design.
Service Categories: I used simple and clear labels to represent different services (salons, doctors, fitness centers), allowing customers to easily navigate between them.
Hero Section: On the right side of the hero section, I included a visually striking image that showcased a real-world representation of the service booking experience. This helped create a welcoming and engaging atmosphere.
UI for Vendor Panel: The vendor panel design focused on clarity and functionality. I created a simple yet effective booking engine that allowed vendors to:
Choose Pay & Go: For services where customers pay per appointment.
Open Subscription: For vendors who offer recurring subscription plans.
Close Subscription: For vendors to manage active subscription plans.
Manage Packages: For vendors to offer service bundles at a discounted rate.
Collaboration with Senior UX Designer: The Senior UX Designer led the research and wireframing for both the customer facing website and the vendor panel. His role involved talking to the client, gathering insights, and defining the wireframes based on the functional requirements.
Once the wireframes were finalized, we had several discussions where I understood the core requirements and user flows, such as:
The flow for booking appointments. The management of the subscription types(Pay & Go, Open Subscription, Close Subscription, Packages).
How to design the vendor panel to be easy for service providers to use.
With these insights, I moved on to designing the user interface for both the website and the vendor panel.
UI Design - Translating Research to Visuals: In the UI design phase, I focused on making the platform visually appealing and easy to navigate while staying true to the brand’s identity.
Color palette: The color scheme was carefully selected to align with the brand and evoke the right emotions. I used the following colors throughout the design:
#ea8933 (Warm Gold) for call-to-action buttons, highlighting important sections.
#2c2c2c (Dark Grey) for background areas to ensure clarity and focus on the content.
#ed510c (Bright Orange) for highlighting interactive elements and buttons.
#72959a (Muted Teal) for secondary elements, balancing the vibrancy of the gold and orange while providing a calming effect.
UI for Customer-facing Website: Search Bar: A search option was placed in the hero section on the left to make it easy for users to quickly find the service they were looking for.
Usability Testing: We conducted usability tests with a diverse group of users to validate the design and identify areas for improvement. Based on the feedback, we made necessary adjustments to the design.
Service Categories: I used simple and clear labels to represent different services (salons, doctors, fitness centers), allowing customers to easily navigate between them.
Hero Section: On the right side of the hero section, I included a visually striking image that showcased a real-world representation of the service booking experience. This helped create a welcoming and engaging atmosphere.
UI for Vendor Panel: The vendor panel design focused on clarity and functionality. I created a simple yet effective booking engine that allowed vendors to:
Choose Pay & Go: For services where customers pay per appointment.
Open Subscription: For vendors who offer recurring subscription plans.
Close Subscription: For vendors to manage active subscription plans.
Manage Packages: For vendors to offer service bundles at a discounted rate.
Conclusion
Conclusion
This project allowed me to apply my UI design skills while working closely with a Senior UX designer to create a functional and visually appealing service booking platform. The vendor panel was a particularly challenging aspect, and through collaboration, we were able to develop a solution that was both user-friendly and effective.
The final design not only addressedthe client's needs but also enhanced the user experience for both service providers and customers. The project gave me valuable experience in creating complex user interfaces while maintaining a simple and intuitive design.
This project allowed me to apply my UI design skills while working closely with a Senior UX designer to create a functional and visually appealing service booking platform. The vendor panel was a particularly challenging aspect, and through collaboration, we were able to develop a solution that was both user-friendly and effective.
The final design not only addressedthe client's needs but also enhanced the user experience for both service providers and customers. The project gave me valuable experience in creating complex user interfaces while maintaining a simple and intuitive design.
