The online booking widget is one of the core features of Salonized's salon management app. The previous design was more than 4 years old. This gave us the opportunity to start with a blank slate.
The previous version was an embedded widget that could be inserted anywhere in the content of a client's website. This resulted in some strange ways how clients used that widget. Many clients complained about a lack in visibility of vital parts of the user interface, especially on mobile.
After some solid user research we prioritised possible new features and started to identify solutions to known usability problems. The result is a widget overlay that can be opened with a sticky floating button in the corner. Because this widget is floating upon the salon's website rather than integrated into the content, the functionality and visual design is uniform across all users. Branded as a Salonized booking tool, its design is now also independent from the salon. This makes it much easier to improve and upgrade the app from a developer point of view. And with our new Salonized logo featured on the booking button, the widget has become of marketing value as well.
Type — Product Design, Prototyping, Design System
Company — Salonized
Role — Head of Design
Company — Salonized
Role — Head of Design
Designed for mobile
The new online booking widget was designed with great focus on mobile use
Optimised for all devices
Colour customisation options provides salons a way to add a personal touch while keeping the widget recognisable as a Salonized product.
This is a standalone, full page width version of the booking widget aimed to bigger salons and studios
Online booking in action
The online booking widget in action
One of the earlier iterations of the new online booking widget's design
Customising the widget
There are many types of salons with different needs in terms of categorisation, pricing, employee availability and much more. All these settings, including the visual appearance of the widget, can be customised by the salon
Design system
An extensive design system was built as a reference for developers and as a toolbox for future design updates
