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.
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.
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.
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.
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)
- 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.
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:
Here’s a scenario of Maria using the salon software in her salon.
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.
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.
Inconsistent use and placement of UI components.
No clear call-to-action buttons.
No progressive disclosure - too many possible paths.
Excessive number of steps to complete key tasks and overly long loading times.
Small businesses only need the basic features.
Cloud version: 1sec+ loading screens too frequent User “lose(s) the feeling of operating directly on the data.”
Outdated visual design.
Competitors look more appealing to new users as well as existing customers looking for a better alternative.
Discovering Design Opportunities.
Create and follow design guidelines to maintain design consistency.
Maintain progressive disclosure
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
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.
I gradually moved onto an Adobe XD interactive prototype that became an ever-growing design document.
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.
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.
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.
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