Amplify
Amplify is a SaaS salon management product consisting of a customer appointment booking website, mobile & kiosk app, Employee web & mobile app, and salon management web app for coordinators, managers, and admins.
Multi tenant SaaS platform
CASE STUDY
Project Overview
Objective
The company wants to build a SaaS-based platform that multiple salon franchisors can use - each will have its own set of applications (customizable) - this will work on a subscription model.
Duration
Dev Support (Nov 2021 - Ongoing)
8 Months (Mar 2021 - Nov 2021)
My Role & Responsibilities
My Role: UX Team Lead, this was my first project as a lead, my responsibilities, and tasks include - requirement gathering, stakeholders interview, user type identification, persona creation, module identification, user stories, information architecture, wireframes, client calls, and dev support.
Team
Design team consists of two teams - the UX team consists of 6 members and the UI team consists of 4 members.
Disclaimer: For confidentiality reasons, I have hidden names, some information, and limited the work I can show.
Tools Used
Figma - For design, IA, flows & prototype
Confluence - For documentation
Jira - For project management
Notion - For team management
Google Sheets - For tracking progress
Zoom - For communication
Current Ecosystem
Solution
The solution is to create a centralized salon management ecosystem - Amplify, that can be used as a SaaS product that offers the solution to other salon businesses on a subscription basis.
Design Approach
Our highest priority is to "Amplify" customer satisfaction by building a valuable product and with the team size and scale of the project, we integrated UX design with Agile and scrum for this product.
Agile Scrum Framework
The Valuable Insights
To establish the foundation, understand the business goals, pain points, usability problems with the current ecosystem, we started with stakeholder interviews with the below line in mind.
Stakeholders Interview
"A problem well stated is a problem half solved."
— Charles Kettering
01 Discover
The Grand Idea
As things stand in the current ecosystem, there’s a huge chunk of the market share that’s up for grabs in the personal services industry. Currently, there aren’t many comprehensive solutions that efficiently streamline the multiple aspects of the salon business - booking for customers, appointments management on customer and salon-end, management of employee payroll, inventory management, etc.
We’re building a SaaS multi-tenant application for salon management of salon franchisors for MVP. Diesel salon franchisor is the first customer of this SaaS platform that we’re building for Diesel franchisor. This means that in the future multiple salon franchisors can use the SaaS-based platform - each will have its own set of applications (customizable) - this will work on a subscription model.
Diesel, as the owner of this SaaS platform, isn’t just aiming to target other salon franchises with the product - we have a vision to target businesses that work similarly - so down the line, a facility that involves customers to book appointments online, employee management, etc. can use this platform. The lateral expansion would include tailoring the platform for other personal care industries like pet grooming & boarding, pilates & yoga, gym health & fitness clubs, etc.
Project Vision
02 Discover
The Product Bosses
From the stakeholder's interviews, we identified the eight users for which we have to create the experience.
User Types
03 Discover
Defining The Structure
From the stakeholder's interviews, we identified the eight users for which we have to create the experience.
User Hierarchy & Access
04 Discover
Defining The Users
We started by defining the users which we have identified, all the decisions we took in the upcoming processes are based on these personas.
User Persona
05 Discover
Creating the Modest Version
In this step, we started identifying the modules for each of the users, and then with stakeholders, we started categorizing them into three categories - Must have, good to have, and very good to have, in which Must have modules are for the MVP.
Module Identification & MVP Priorization
01 Define
Describing the Features
After prioritizing the modules for MVP we started writing the user stories.
User Stories
02 Define
Defining the Path
In this step, we started identifying the modules for each of the users, and then with stakeholders, we started categorizing them into three categories - Must have, good to have, and very good to have, in which Must have modules are for the MVP.
User Flow
03 Define
Customer user flows
Cutter user flows
We created the solutions in the form of user flows for all the user types, later with discussed these solutions with the stakeholders and developers on which we received several feedback and suggestions.
The Operational Map
After updating the user flows, the next step is to lay the foundation of the product, we started defining the structure of the product for each of the users.
Information Architecture
04 Define
Collage of Ideas
To communicate the "feel" of the idea we have in mind, we started creating the moodboard.
Research & Moodboard
01 Design
Setting The Stage
“Sprints help teams and stakeholders clarify priorities.”
We plan weekly sprints on Monday for the week or on Friday for the next week with the team leads of all departments, this way, design, development, and business agree upon the direction of the sprint and are up to speed on why designers are making certain choices.
Sprint Planning & Grooming
02 Design
Backlog
Sprint
Grooming Session: This involves discussion, review & planning of the sprint stories with the leads of all departments.
Action Begins
We have a total of 4 device types, web, app, kiosk, and TV in which web consists of two different grids: With left nav and without left nav (Full width), we set a spacing system in the wireframe itself as our goal is to create rich looking wireframes with correct margin and padding as it will gonna help us in converting it to UI quickly.
Wireframe
03 Design
Wireframe Setup: Spacing System and Grids
Customer Web
The current web booking solution is provided by Booked by, we started the research process by analyzing it closely and started finding usability gaps in it, later we sketched out the wireframes with our solution.
Wireframe
Customer App
As there is no customer mobile app in the current ecosystem, we have to create the experience from scratch. Based on the moodboard we started the mobile app wireframes.
Wireframe
Management
Management user roles consist of Super admin, brand admin, store owner & coordinator
Wireframe
Employee App
Management user roles consist of Super admin, brand admin, store owner & coordinator
Wireframe
Managing Quality and Effectiveness
To increase quality and to inspect how the last Sprint went with regards to individuals, interactions, processes, tools, we do a sprint retrospective to discuss these three points.
What went well in the Sprint
What could be improved
What will we commit to improving in the next Sprint
Retrospective
04 Design
The Real Experience
Before moving on to UI, we started creating interactive prototypes of the wireframes, for the testing and presentation to the stakeholders.
Prototype
05 Design
Testing
One of the stakeholders who has a salon with a biker gang theme mentioned that they have customers with huge finger sizes, so we opted for a finger-friendly design test.
Finger Friendly Design Test
06 Design
Setting the Standards
Style Guide
07 Design
Filling the Colours
One of the stakeholders who has a salon with a biker gang theme mentioned that they have customers with huge finger sizes, so we opted for a finger-friendly design test.
Visual Design
08 Design
Support
The Crucial Part
Now, we are supporting the devs and the client by solving their queries, supplying needed use cases, screens and states.
I do this by frequently communicating with the developers, and supporting them by proving interactions, discussing possible use cases, integrating client comments in demo versions with the help of my team.
Working closely with the QA team to check and test the developed versions, reviewing acceptance criteria.
Communicating with managers & stakeholders to convey project status.
User Acceptance Testing (UAT)
Final Examination
To assess if the system can support day-to-day business and user scenarios and ensure the system is sufficient and correct for business usage, we started User Acceptance Testing with a total of 30 people - stakeholders, actual users, designers, and the QA team.
You can view the detailed UAT here.
The Impact
Results - The KPIs
After having several session of UAT and testing it with real users, we have gathered this valuable data that represent the hard work that we did for the entire 2021. For confidentiality reasons, I have omitted the actual values for these metrics. More data and accurate values will be available after the release which is planned for April second week 2022.
Customer appointment booking Time-on-task decreased by 50%
Customer error rate decreased by 70%
Appointment management by the employee Time-on-task decreased by 30%
Employee schedule planning & management Time-on-task decreased by 15%
What I learned
The most important thing: this was my first project as a team lead, I learned how to manage the team and the tasks, how to beat deadlines, handle people and situations, this experience drastically change my way of thinking in the real world too.
How to communicate effectively and gather requirements from the stakeholders.
How to present your work, convey the thought process and convince the stakeholders.
How to collaborate with different teams - developers, business analysts, QA, management, etc.
How to build a product in such a way that can cater to different service-based businesses in the future.
Key Takeaways
Loved it? There's more
