Salon.png
 
 
 

Due to the level of confidentiality of the internship, I have omitted specific details regarding my project! Any information in this case study is my own and does not necessarily reflect the views of DaySmart.


Business Sustainability Problem

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

The majority of the software 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.

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.

 

BEFORE - Windows Desktop Software - Appointment Booking

AFTER - Appointment Booking

BEFORE - Cloud Browser Software - Services List

AFTER - Services List

BEFORE - Cloud Browser Software - Appointment Booking

AFTER - Edit Service

 
 

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 user flows and the user interface using existing and incoming user insights. 

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.

These are the flows that I redesigned in chronological order:

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

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

  3. Employees (high-impact, medium-cost - LIVE)

  4. Appointment booking (very high-impact, high-cost - IN DEVELOPMENT)

  5. Dashboard (designs not used)

 

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 many of the user flows.

  • Contributed to prioritizing the user flows 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 & Creative Cloud (For file-sharing among designers)

  • 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 user flow 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

The best way to gain empathy for the users is to read what they have to say about the current product.

“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.

“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 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.”

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

 

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 - Kate   1-4 employees  Only needs the main basic features (appointment booking, reports, clients, etc.)

Small business - Kate

1-4 employees

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

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

Medium-sized business - Madison

5-10 employees

Needs main basic features and some specialized features

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

Large-sized business - Maria

10+ employees (potentially hundreds)

Multiple business locations

Needs multiple employees to use the same system

 
 
Salon – 1.png
 
 

Here’s a scenario of Maria (the large-sized business persona) using the salon software in her salon.

 

Understanding Competitors

Besides examining potential issues with the company’s own products, I explored the software’s biggest competitors to assess their strengths and weaknesses compared to Daysmart’s products.

Schedulicity’s onboarding tutorial for professionals

Schedulicity’s onboarding tutorial for professionals

Cloud access (online login) - Square, Vagaro, Mindbody, Schedulicity (all browser only)

Mobile integration with desktop - SQ, V, M, S

Desktop offline access - None (SA only)

Unique aspects -

  • Schedulicity and Mindbody allows users to search and start scheduling appointments with professionals without registration first.

  • Square and Schedulicity are completely free for individuals, while Vagaro, Mindbody, and Salon Iris offer time demos/trials.

  • All but Salon Iris have built-in tutorials

 

Pinpointing Existing Pain Points

  1. Inconsistent use and placement of UI components

    • No clear call-to-action buttons.

    • No progressive disclosure - too many possible paths.

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

  3. Outdated visual design

    • Competitors look more appealing to new users as well as existing customers looking for a better alternative.

Why so many tabs? What purposes do they serve? What do these terms mean?

Why so many tabs? What purposes do they serve? What do these terms mean?

 

Discovering Design Opportunities

  1. Create and follow design guidelines to maintain design consistency

    • Maintain progressive disclosure

  2. Minimize clicks for key tasks and maintain visible system status

    • Allow users to backtrack more easily

    • Work with developers to shorten or more efficiently mask loading times

  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 (not used)

 
 

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

 
 

I first started with some paper prototypes (some shown above), 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.

 
 
 

Prototyping and Design Communication

My design follows modern design trends and guidelines, which including Google Material Design.

Click below to try out my clickable prototype in action!

Note that some screens have a left side navigation while other screens have a top nav due to developer requests. Also, the prototype works most optimally on desktop and tablet screens because on mobile phones, the text becomes too hard to see!

 
 

I made this above prototype available on Adobe Creative Cloud for other design interns and developers to take assets from and view at any time.

 
 

Booking New Appointment "Quick View"

 
Editing a service

Editing a service

 
Going through employee information and options

Going through employee information and options

 
Day view  of appointments for multiple employees

Day view of appointments for multiple employees

Week view of appointments in same timeslot for multiple employees

 

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

My loading screen skeleton design for products flow.

 
 

Unselected state for clients design.

Clients design - allowing the user to quickly re-book a previous appointment for a specific client. The mini calendar allows users to see which employees are available for the services that the client wants.

 
 
 

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 user flows.

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.

Some of 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 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.

 

Read other case studies: DaySmart Software / NASA / Amazon (Password-Protected) / Sanctuary / YourGamePal