Designing for Business Sustainability.

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.








 

BEFORE - Appointment Booking (GIF)



AFTER - Appointment Booking "Quick View" (GIF)

 
 

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.



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.

User flows I designed:

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

  • Clients (high-impact, medium-cost - LIVE)

  • Employees (high-impact, medium-cost - LIVE)

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

  • Dashboard (designs not used)


Skip To Current Design.






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

  • Communicated daily with developers and shared design files with the company through Confluence and HipChat.






My Process.

DaySmart Process.png


Heuristic Evaluation.

Annotating the appointment user flow for Windows Desktop Version




 

I fully expect to be brought to the current date, but instead it brings me to December 31st? And clicking on a date when on the month view brings me to that month instead? (GIF)



I can’t find the options screen…and I don’t know which screen I am on anymore since no icon is highlighted at the top. (GIF)



Oh. It’s under the Tools dropdown… (GIF)



Too many unexplained tabs and why is there no field called “item name” but “description” instead? (GIF)



Also too many tabs here, and even the Contact tab has information overload and no progressive disclosure. (GIF)

 




Examining User Reviews.

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


"I think it may be a good idea to customize the display of the screen. There are quite a few options that we don't use, and it would be nice to simplify the view and easier to navigate with less options."



"Little time-consuming entering all of my information sometimes. Closing out day was a little hard to figure out for what I needed."



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







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:

Kate (Small Business)
Only needs the main basic features (appointment booking, reports, clients, etc.).
Madison (Medium-sized Business)
Needs main basic features and some specialized features.
Maria (Large Business)
Multiple business locations and needs multiple employees to use the same system.

Here’s a scenario of Maria using the salon software in her salon.

Salon – 1.png
 

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.


 
 

Some unique takeaways that I used in my design:

  • Square Appointments (SA) has a very simple view when booking appointments and for other user flows.

 
(GIF)

(GIF)

 
  • SA uses a list view for Services, and Employee user flows.

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





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





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.





 


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.

I, along with the other interns and mentor, participated in brainstorming and affinity diagram activities where we showed our designs to each other and used post-it notes to give each other feedback. We synthesized our designs and improved them after these sessions.

 
20180202_112528.jpg
 

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







Current Designs.

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

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

If you are on desktop and laptop screens, the interactive prototype will be available for you to explore!

On smaller screens, the prototype does not display properly, so I have hidden it on smartphones and tablets!

Note: Some screens have a left side navigation while other screens have a top nav due to developer requests.

Screens for DaySmart.png




Editing a service  (GIF)

Editing a service (GIF)



Going through employee information and options  (GIF)

Going through employee information and options (GIF)






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

My loading screen skeleton design for products flow.



Current desktop software empty state for clients

Unselected state for clients design.







Design Annotations & Developer Handoff.

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.

Before the conclusion of my internship, I completed a set of detailed annotations for the most important features of my designs.

Appt Book - New Appointment – Calendar View – New Appointment - Employee Autocomplete Finished.png
Employees List.png

These annotations, along with the clickable interactive prototypes, help developers understand how to code for any edge case and cases not shown in any of my mockups.

The developers are using the AngularJS Material and Bootstrap UI Kits to produce my designs into the live application!





Preliminary Style Guide.

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

Lato
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

DaySmart.png




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.





Special Thanks To:

  • Tonya McCarley, Product Manager

  • Harry Kim, Design Intern

  • Vaidehi Mechant, Design Intern

  • Kyle Chang, Design Intern

  • Patrick Curley, CPO

  • Ryan Cibor, Development Lead

  • Kashia Xiong, Software Developer



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