DaySmart Software - Business Management Software Redesign
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.
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.
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.
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.
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.
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.
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:
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
HipChat (for communication with members of company's cross-functional teams)
Jira (for tracking project progress during two-week agile sprints)
Creating Functionality Inventories
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:
Pinpointing Existing Pain Points
With all of that above information, I discovered these three pain points:
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.
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.
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.
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:
Discovering Design Opportunities
Before I started sketching and planning out how the redesigned software should look and function, I pinpointed three redesign opportunities:
Create and follow design guidelines to maintain design consistency
Maintain progressive disclosure
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)
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
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:
Products and Services (high-impact, low-cost)
Clients (high-impact, medium-cost)
Appointment booking (very high-impact, high-cost)
Employees (high-impact, medium-cost)
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.
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.
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.