Phorest's New Front of House

Phorest Salon Software's 15-year-old codebase was hindering innovation and scalability. By migrating core features to a modern web architecture and redesigning key user journeys, prioritising accessibility, we accelerated development, enhanced user experience, and paved the way for sustainable business growth.

Role

Product Designer

Company

Phorest

Date

2022

Project Overview

Phorest Salon Software is a SaaS solution for salon owners to run their entire business, offering features like appointment management, POS, marketing, and more. However, the core product's 15-year-old codebase suffered from tech debt, and multiple design iterations had led to inconsistencies. This hindered innovation, limited our ability to deliver a modern experience, and created user confusion.



To address this, we embarked on a strategic initiative to upgrade the foundational codebase and simultaneously align a unified design language. This will streamline development, create a seamless user experience, and enhance the overall usability of our platform.

The Existing State Of The Product UI

The product's UI reflected different development stages. Legacy Swing components clashed visually and functionally with newer iframe web screens, creating a fragmented experience.

The existing screen UI: A mixture of legacy design and previous attempts to redesign

Business Pain Points & Needs
As a Business we faced a multi-faceted challenge: our legacy Swing platform demanded manual updates, burdened development with old code maintenance, and presented an outdated, inconsistent user interface.

Pain Points

1.
Releases were slower and required clients to update software, which they often didn’t
2.
Bottle necks with very few developers to work on the old tech stack, time consuming to update
3.
Dated design impacted usability and hindered new sign ups contributing to customer churn
4.
Little to no documentation or unified design system, unclear for designers what components to use and when
5.
Inefficiencies in processes and technology hindered our ability to scale our company and reach our target of 15,000 salons

Needs

1.
We needed to move our platform away from Swing and use a web technology stack that didn’t require manual updates
2.
We needed to deprecate Swing and eliminate the need to maintain old code and free up resources to work faster
3.
We needed to update and align our UI to have a more appealing and intuitive interface that people loved
4.
We needed to create systems and document how we design and build our product that made sense for our teams
5.
We needed to improve processes and create efficiencies to help aid in our companies strategy to “scale without strain”
Customer Pain Points & Needs
The Issues weren't only business related, the migration would aim to fix customer issues too.

Pain Points

1.
Inconsistent designs led to a host of usability issues - different patterns for similar actions.
2.
On-boarding new staff in salons was time consuming due to unintuitive interface.
3.
Siloed information, requiring multiple steps to complete certain tasks.
4.
Customers weren't getting the latest releases when they didn't update their app.
5.
Accessibility Issues in the designs of the buttons and Icons.
‍

Needs

1.
UI should be consistent and it should be clear what behaviour to expect when interacting with the UI.
2.
Users need to have a platform that is intuitive and easy to learn to help on-boarding new staff.
3.
Users need to have access to the relevant information in an easy and accessible manner.
4.
Users should have the most up to date version of the platform.
‍
5.
The UI should be accessible, clear and easy to use for everyone using the platform.

Defining The Scope

Our strategic goal was to deprecate the legacy Swing technology and fully migrate to a web-based architecture for scalable growth. Recognising the complexity of Phorest's comprehensive salon management suite (booking, POS, marketing, etc.), we prioritised the most impactful migration.

To deliver maximum value, we focused on the 20% of the product that drives 80% of usage. Research identified this high-impact area as the "front of house" – encompassing core salon operations and customer interactions. This targeted approach would create a foundation for success in our broader migration efforts.

Scope of the project

Defining Success
We established clear success criteria prior to launch:

Adoption

Engage 50 salons in our "front of house" beta program for real-world testing and feedback by the end of Q4 2022.

Accessibility and Usability
Prioritise improvements in these areas for key user flows, balancing efficiency with addressing known pain points.
User Feedback
Gather qualitative insights to guide ongoing development and ensure a positive user experience.
Development Process
Increase the speed and frequency of iterations, demonstrating the agility of the new web-based platform.
Foundational Impact
Successfully migrate a critical user journey from Swing to web, paving the way for a fully modernised platform.
Balance Legacy with Growth

Improve the usability in critical user journeys to increase new client acquisition while maintaining a familiarity in core design patterns for existing users.

Our Approach & What We Set Out To Learn

Our initial goal was to identify existing strengths within the product while pinpointing areas for improvement. This would ensure we retain what works and strategically address pain points in the new Front of House (FOH).  Upgrading FOH's capabilities would provide a compelling incentive for users to adopt the new web-based experience.



We employed a multi-faceted approach to derive insights for the Front of House redesign:

Overview of the process

Reviewing our current state

Our redesign process began with a comprehensive audit of the front-of-house experience. We meticulously reviewed the booking flow, payment flow, appointment calendar, cart, and client details page.

Booking Flow

Payment Flow

Appointment Calendar

Cart and Payment Screen

Key Issues Identified
Our review and research uncovered critical issues that were hindering user experience and limiting product potential.

Inconsistent visual hierarchy

Scanning information was very clunky. (alignment issues, different component heights, forms in multiple columns)

Siloed Information
Unable to edit and discover certain client information within the booking flow
Inconsistent IxD
Inconsistent Button styles and interactive elements not behaving in expected behaviour
Cluttered UI
Inconsistent styling  e.g. multiple button styles and multiple icon styles.
System feedback
Lack of and inconsistent visual affordances and system feedback components.
Information overload

multi-step processes all in one modal, increasing cognitive load.

Constraint Of Limited Analytics

The lack of reliable analytics, and in some cases a complete absence of data, posed a constraint on understanding real-world usage patterns within the legacy Swing screens.

In-depth Observation With Salon Visits
To overcome this challenge, we conducted in-salon diary studies. This involved directly observing and recording how the product was used within its natural environment, providing valuable insights into user behaviours and pain points. What we uncovered was extremely valuable;

Distracting environment

We learnt that the environment can be very busy distracting, noisy hairdryers, phones ringing, clients coming and going

Lighting conditions
Lighting conditions vary from different salons some are very bright and other can be quiet dark
Screen Resolutions
A wide rang of Screen sizes and resolutions and devices
Touch Screens
Receptionist often had only one hand available and use the touch screen actions the most
Multitasking
multitasking is quite common with answering the phone, booking a client in and then needed to check a client out.
Feature hacks

A lot of hacks that the staff knew to get the product to work in a way that they wanted eg. waitlist and to-do items and other notes

Design Experiments That Didn't work

We iterated on various visual approaches for our modernised web app, seeking a design that best served user needs. Initially, we tested a version influenced by modern SaaS products.

Design Direction That Didn't Work

Why It Didn't Work
This approach faced challenges during both remote and in-salon usability testing.

Accessibility Issues

Accessibility emerged as a significant concern, with reduced readability on various salon monitors.

Cognitive Load
The toned-down colour palette increased cognitive load in a busy, distracting environment.
Familiarity
A majority of our users also expressed a strong preference for the familiar Phorest colour scheme.
Importantly, Other key research revealed that over 60% of individuals within the salon and beauty industry in the UK and Ireland have some form of dyslexia. This finding underscores the need for a clear, highly readable design that prioritises both aesthetics and usability for all users.


We did acknowledge the potential value of offering themes in the future to cater to different salon styles and preferences. However, considering the usability challenges faced with the initial modern UI and the focus on core functionality for this phase of the project, theming was ultimately backlogged for further exploration.
Final Design Improvements
A lot of improvements were made to the designs here are some of the key callouts.

Consistent Button & Icon Styling

Unified button and icon designs created a cohesive visual language, reducing visual noise and making actions instantly recognisable which speeds up user workflows.

Visual Hierarchy Improvements
Streamlined layouts and clearer information grouping guide the eye effortlessly, enabling efficient information scanning and reducing cognitive load.
Increased Button Sizes
Enlarged interactive areas improve usability for touchscreen interactions and cater to a range of motor skills.
System Feedback Improvements
Consistent and informative system feedback provides clear cues to the user, confirming actions, preventing errors, and fostering a sense of control.
Logical Step-by-Step Booking Flow
Breaking down complex processes into intuitive steps eliminates information overload, simplifies decision-making, and promotes task completion.
Clearer IxD

Predictable interaction patterns and consistent visual cues reduce the need for guesswork, enhancing overall usability and building user confidence.

New Booking Flow

New Payment Flow

Before & After Appointment Calendar

Before & After Cart

Before & After Cart & Payment

Before & After Client Details Page

Project Impact
The project had a lot of positive impact for our business and customers

Successful Beta Launch

Successfully release our Beta in Q4. First Beta group used our new front of house, providing us continued feedback

Increase Development Speed
We went from rarely updating the appointment calendar to being about to release feature updates and improvements weekly.
Increase Visual Consistency
Increased the consistency of our visual language to reduce re-work in both design and development: Our design system was updated with our new components that were aligned on our new visual language
Improved Usability Issues
Created a more streamlined booking and payment flow by removing complicated and inconsistent UI
Design System Successfully Implemented
Delivered a project that successfully implemented the design system which showcases all benefits of our improved processes.
Migrated a Critical User Journey

Successfully moved the critical user journey off of Swing. Delivering a proven plan to pave the way to fully migrate off the old technology, with the following year celebrating more areas deprecating swing.

LinkedIn
Oisín Bowles © 2024