Mingda Tang
Digital Product Designer
apple-device-wireframe.png

Business Management Software Redesign - DaySmart Software

Revitalizing an antiquated and complex salon management experience for salon owners of all different types of business needs.

 

DaySmart Software - Business Management Software Redesign

 
 
Down-Arrow-PNG.png
 
 
 

Imagine that you work as a receptionist for a salon and you are trying to book an appointment for multiple customers in a short amount of time, but the software you are using confuses you and unnecessarily drags this simple process down.

This confusion has caused countless customers to file complaints against your business and has cost the salon thousands of dollars in losses.

Not only that, YOU ARE FIRED NOT because of your inability to do your job, but because of the terrible software that you are using to manage your salon...

 Let's fix this problem.

 
 
 
Down-Arrow-PNG.png
 
 

BEFORE - Windows Desktop Software - Appointment Booking

BEFORE - Cloud Browser Software - Appointment Booking

 
 

Business Sustainability Problem

At DaySmart Software, the company's salon software as a service (SaaS), Salon Iris, and its other software products have been designed based on the legacy Windows operating systems.

Almost all users of Salon Iris use the Windows desktop version of the software, but the company is attempting to transition itself into an exclusively cloud-based platform. This allows easier access and setup of the software and also allows Mac users to use the software.

Unfortunately, both the desktop and cloud version violate basic design principles, including consistency and making sure that sometimes showing less is more.

Some key features, such as appointment booking, are overly complicated to use, especially for users with limited computer proficiency.

BEFORE - Employees screen - but the employees icon is not highlighted, causing confusion to the user

The software is sometimes so difficult to use that many new customers often have to call customer support to understand how to use the products' simplest features as there is no proper onboarding process.

Not only that, the value of user-centric design had not yet been proven when I started the internship. It was up to me to prove to them just how much impact a well-designed software experience can be for the business and the users.

 

Design Solution

As the first UX designer of the company, I was assigned to assist in the transition into the cloud version by redesigning its key workflows and the user interface using existing user metrics. 

User Benefits

These series of redesigns will allow users to more easily follow their mental model and use progressive disclosure by presenting only the minimum amount of information needed and allow users to easily access more information when needed.

Business Benefits

Creating these redesigns will increase the sustainability of the company's software and brand. This equates to increased market share, customer retention and revenue, as well as bringing in more customers who seek a modern and high-performance business application.

My current designs are being developed and will be released in iterations starting in 2018! The products and services flows have already been released.

 

My Responsibilities

  • Worked with three other design interns, design product manager, and software engineers, through weekly design reviews and two-week scrum sprints to release designs on an iterative basis.

  • Redesigned the look-and-feel of the company's flagship business management software, as well as all of the core interactions in these following workflows:

    • Dashboard

    • Appointment booking

    • Clients

    • Products

    • Services

    • Employees

  • Contributed to prioritizing the workflows that needed redesigning the most to maximize the company's profit and customer engagement given the limited work time as an intern

 

Tools

  • Adobe XD

  • HipChat (for communication with members of company's cross-functional teams)

  • Jira (for tracking project progress during two-week agile sprints)

 
 
 

Creating Functionality Inventories

Annotating the Appointment Workflow for Windows Desktop Version

 

Partial screenshot of the cloud functionality inventory

 Inventories printed out at the company

Inventories printed out at the company

 
 

To understand the current capabilities of the company's products, I first created functionality inventories and detailed descriptions for the existing application on different platforms (desktop app, cloud version, mobile). I used this information to categorize the core features that need to remain and the features that are unused and not needed by customers.

 

Examining User Reviews

This may sound crazy, but the best way to gain empathy for the users is to read what they have to say about it. This is what I did.

Here are some of reviews that pointed out the biggest issues with Salon Iris:

“This system is not very easy to use and is very slow on the calendar and while running reports.”

“Online appointment system is constantly double booking. Software is randomly updated (can't believe it is tested first) and creates simple problems. Don't rely on a constantly smooth running system.”

“This software is extremely outdated and not user friendly. When I used this software in the past, I didn't appreciate that this software doesn't have a cloud option. One could only access the software from the computer it was downloaded on. Now there is a cloud option, but I can’t use it because it has so many features missing.”

“This system is not very easy to use and is very slow on the calendar and while running reports. I've decided to use a different system. You can get better value for money with other systems.”

 

Understanding User Personas

After reading through hundreds of user comments and reviews, I was provided with the company’s three main user personas, which I used throughout my design process:

  Small business   Usually the only employee  Only needs the main basic features (appointment booking, reports, clients, etc.)

Small business

Usually the only employee

Only needs the main basic features (appointment booking, reports, clients, etc.)

 
  Medium-sized business   5-10 employees  Needs main basic features and some specialized features

Medium-sized business

5-10 employees

Needs main basic features and some specialized features

 
  Large-sized business   10+ employees (potentially hundreds)  Multiple business locations  Needs multiple employees to use the same system

Large-sized business

10+ employees (potentially hundreds)

Multiple business locations

Needs multiple employees to use the same system

 

Pinpointing Existing Pain Points

With all of that above information, I discovered these three pain points:

  1. Inconsistent use and placement of UI components

    On some screens, there is an excessive number of buttons stacked on and next to each other with specialized functionalities that serve only a small fraction of the customer base. Sometimes there are multiple call-to-action buttons with the same color and seemingly equal importance, which wastes customers' time to figure out what their next step is.

  2. Excessive number of steps to complete key tasks and overly long loading times

    Customers who run small businesses and only need the basic features of the software, which include appointment booking and services workflows, would have to sift through excessive popup menus to complete these tasks hundreds of times per day.

    What makes this worse is that opening/closing each popup can equal a loading screen that is one second or longer. According to Jakob Nielsen’s book, Usability Engineering, one second of the user waiting means that they “lose(s) the feeling of operating directly on the data.” Now imagine that happening all the time.

    This unnecessarily interrupts their mental model and extending steps to their goal, which accumulates unnecessary losses for businesses.

  3. Outdated visual design

    Compared to other similar solutions in the market, such as Square Appointments, Salon Iris' visual design needs to be overhauled because those competitors look more appealing to new users as well as existing customers looking for a better alternative.

 

Understanding Competitors

Besides examining potential issues with the company’s own products, I explored the biggest competitors of Salon Iris to assess their strengths and weaknesses to those of Salon Iris. The competitors are: 

  Square Appointments  - Free for individuals (unlimited appointments), cloud access (online login), simple onboarding process, mobile integration, consistent visual design across platforms

Square Appointments - Free for individuals (unlimited appointments), cloud access (online login), simple onboarding process, mobile integration, consistent visual design across platforms

  Vagaro  - View businesses and book appointments on Vagaro.com, cloud access (online login), mobile integration, slightly outdated desktop visual design

Vagaro - View businesses and book appointments on Vagaro.com, cloud access (online login), mobile integration, slightly outdated desktop visual design

  Mindbody  - Steep pricing (at least $125/month), cloud access (online login), mobile integration, slightly outdated desktop visual design

Mindbody - Steep pricing (at least $125/month), cloud access (online login), mobile integration, slightly outdated desktop visual design

 
  Schedulicity  - Free basic version (limited to 20 appointments per month), cloud access (online login), view businesses and book appointments on Schedulicity.com, mobile integration, consistent visual design across platforms

Schedulicity - Free basic version (limited to 20 appointments per month), cloud access (online login), view businesses and book appointments on Schedulicity.com, mobile integration, consistent visual design across platforms

 

Discovering Design Opportunities

Before I started sketching and planning out how the redesigned software should look and function, I pinpointed three redesign opportunities:

  1. Create and follow design guidelines to maintain design consistency

    • Maintain progressive disclosure

  2. Minimize clicks for key tasks, maintain visible system status, and follow their mental model more closely

    • Allow users to backtrack easily

    • Work with the development team to improve loading times and/or make loading seem shorter than it actual is (ex: show progress indicator)

  3. Update visual design using modern design standards to attract new users

Because of the large user base (35,000+ customers) and a vast assortment of user needs, I had to always design with the most extreme and unexpected use cases in mind.

This heavily involved having empathy for all types of users: new users, existing users, edge case users, users who only use certain features over others, etc.

 
 
 

Brainstorming and Initial Designs

 

Steps 1 to 4 in booking an appointment for John Doe

1) Appointment icon clicked

2) Dropdown - schedule now clicked

3) List of clients

4) Screen ready to add products and services

Steps 5 and 6

5) List of services frequented by John

6) Massage - 30 minutes chosen and details shown

 
 

Products pages - list view design with filters

Product pages - grid view

 
 

Alternate paper prototype for booking an appointment for John Doe - 1) Dashboard page

4) User searches for hot stone and triggers live search

List of search results shown and user selects an option

2) Clients page - user selects John Doe as a client

5) "Save and schedule" button at bottom right clicked and confirmation appears

3) John’s three most recent products and services are shown - user uses search function

 
 

The next step was to sketch out some of the key flows of the new redesign.

I first started with some paper prototypes, which I presented to the CPO to point out some fundamental design flaws with the current software and to inform him of the importance of UX at the company.

Then, I gradually moved onto an Adobe XD interactive prototype that became an ever-growing design document.

With user metrics and the functionality inventories I created, I prioritized which workflows were most used by customers. Doing so gave me an opportunity to focus on redesigning the aspects of the software that would maximize company revenue and customer engagement, rather than focusing on certain workflows that are low-impact and costly to develop.

These are the workflows that I redesigned in chronological order:

  1. Products and Services (high-impact, low-cost)

  2. Clients (high-impact, medium-cost)

  3. Appointment booking (very high-impact, high-cost)

  4. Employees (high-impact, medium-cost)

  5. Dashboard (designs not used in 2018)

 
 
 

Prototyping and Design Communication

My design follows modern design trends and standards, which includes Google Material Design.

Following those standards helps maintain the consistency in components and visual design, which is one of the main pain points of the existing software.

Click below to try out my prototype in action! Note that some screens have a left sidenav while other screens have a top nav due to developer requests.

 
 

Let us imagine that Madison, who is the receptionist and owner of her day spa, receives a call from John Doe, a regular customer of the business.

The goal that Madison is trying to achieve now is to book an appointment for John as efficiently as possible because she has a walk-in customer waiting and potentially other customers who may call in.

In my current design, Madison can click on any available spot on the calendar to book an appointment for John, which includes multiple services and/or products.

Only the essential information is shown: Which client, what service/product, when, and which provider/employee. If the appointment is more complex and requires setup and/or processing time (ex: hair perm), then the "More Info" button will give a more complex view for Madison to use.

 
 

Appointment Book Calendar View - Booking New Appointment "Quick View"

View of appointments in same timeslot for multiple employees

 

My loading screen skeleton design for product flow

Current cloud service loading indicator (no progress bar to give users context)

 

Current cloud version services list

My services list design currently being implemented for market release

 
 

Here is an official LIVE demo of the Services workflow I designed from the company itself!

 
 
 

I presented my work to the CEO, Development Team Lead, board directors, and other key figures of the company for periodic design reviews, and constantly received feedback and worked on different, often minute details in the different workflows. They are not UX professionals, so my main goal was to communicate my designs to them and explain how my work would benefit the company as a whole.

I often had to redesign my screens because some of them do not completely cover the more extreme, but equally important use cases.

My designs are currently in development using the AngularJS Material and Bootstrap UI Kits for a 2018-2019 market release!

 
 
 

Preliminary Style Guide

* These assets are not final and only show a portion of what is implemented.

 

Lato
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

 #D84882

#D84882

 #E3E3E3

#E3E3E3

 #0000EE (for links)

#0000EE (for links)

 
 

What I Learned

I feel like I have gained a stronger understanding of empathic design.

Throughout the internship, I often designed in the shoes of the users who have trouble with basic computer usage, which translates into them having difficulty using the current software. Initially, I was faced with the curse of knowledge, which is a cognitive bias where someone assumes that another person, the user in this case, has enough knowledge to understand a particular concept or system. With iteration and feedback, however, I overcame this bias. My mockups improved and I felt like I became a more skilled designer with a stronger understanding of user empathy.

"User experience" is a foreign concept to many.

Perhaps the biggest constraint I had to face was that many engineers and executives I talked to at DaySmart were either unaware of or misunderstood what user experience is. Many of them used UX and UI interchangeably and did not fully see the value of UX until I presented my work in front of them. With the assistance of the newly-hired Product Manager with experience in design, I articulated the idea of flows to them and helped them understand that UX for a digital product is more about the interactions on the screen that lead users to their goal, and less about colors and fonts. Finally, I wish I had more chances to test my designs with more users, but that was a key business constraint that I faced during this internship.