Creating an easy, streamlined online booking tool was challenging due to the number of variables and needed features. To further complicate things, the clientele at the salon spans all walks of life and technology literacy. The app needed to be easily understood by all user groups and at the same time be robust enough to meet everyone's needs.
Key features included the ability to book multiple services, reserve product and a wait-list tool. Some of the most challenging aspects were determining the order and place in the user flow to insert each feature that would be universal and intuitive for their clients. Not all users need all features and we didn't want to impose a step or process, but we also didn't want to make it cumbersome for those that do need some of the more complex features.
Through extensive user testing it was determined that a vast majority of the users would be returning clients, booking with a specific stylist. With that in mind we created a basic sign-in/sign-up system that captured the needed data to book an appointment upfront and automatically created a profile for future use.
Once a user is signed in they are prompted to either book a new appointment or reschedule an existing one. The rescheduling feature is important for both the salon and it's clients. One of the business challenges for the salon is clients not calling or showing up for a scheduled appointment. We needed to create an easy way for people to quickly change or cancel when needed, so that the salon can fill that slot with someone from the waitlist.
Some clients have specific needs for hair and skin products and due to low inventory, sometimes that item is out of stock or back-ordered. We wanted to give the salon a heads-up for product needs for future appointments. The trap here is that not every client wants to reserve product or feel like they are being up-sold. With those concerns in mind we added this feature to the end of the booking process as an opt-in.
These two features are important tools for the salon to maximize sales and profitability. Missed appointments costs the stylist not only time but significant revenue. Similarly, not having product in stock for a client creates customer frustration and is a lost opportunity for revenue for both the stylist and salon.
The waitlist feature is an important tool for the salon. They spend a significant amount of time making and fielding calls about customers wanting to go on the waitlist. This gives them an automated way to manage this often times complex part of their scheduling. It also gives the client the opportunity to select a variety of times/days that work with their schedule and get instant notifications if something that meets their criteria opens up.
Here are where the low-res wireframes started from. After some initial testing in this format, refinements were made, tested and validated. From validation we then moved to the high-res layouts you see above.
It quickly became apparent that the UI/UX was going to be negatively impacted by the vertical scroll with the accordion style menu system.
We evolved the design into a UX pattern that utilizes a clickable bottom navigation and horizontal swiping to transition from one step to another. Creating a way for the user to easily go forward and backwards in the process while having several visual cues to where they are in the process.
