Web UI/UX - Research - Visual Design

Designing for Business Sustainability

BEFORE - Appointment Booking (GIF)

AFTER - Appointment Booking "Quick View" (GIF)

 

Role

UX Design Intern

Team

3 Design Interns and UX Manager

Duration

Nov. 2017 - May 2018 (Part-time internship)

 

Background/Problem

DaySmart’s salon software as a service (SaaS) has been designed based on legacy Windows operating systems. Their desktop and cloud versions of the software violate basic design principles, including consistency and making sure to appropriately use progressive disclosure. The company is attempting to transition itself into an exclusively cloud-based platform.

Responsibilities/Solution

I redesigned the software’s key user flows by understanding existing user complaints, exploring competitor software, and applying appropriate design principles and guidelines. Based on new user feedback, the new released designs have led to significant improvements in amount of time used for completing key tasks, such as appointment booking, as well as in user satisfaction and retention.

 

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)

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.

 
 



Process

1 - Research

  • Cataloging Existing Features

  • Cognitive Walkthroughs

  • User Reviews

  • Exploring Competitors

2 - Analysis

  • User Personas 

  • Scenarios 

  • Pain Points 

  • Design Opportunities

3 - Ideation

  • Sketches

  • Wireframes

  • Paper Prototype (Presented to the CPO)

4 - Design/Iteration

  • Mid-Fi Prototypes

  • Engineer Reviews

  • C-Level Design Reviews

  • User Critiques

5 - Handoff

  • Annotations for Prototypes

  • Final Presentation to the CEO

6 - Reflect

  • Takeaways




Research

I completed four research methods to fully understand the context of the project before designing.

Cataloging Existing Features

Annotating the appointment user flow for Windows Desktop Version

Cognitive Walkthroughs

I’m trying to delete this appointment, and it’s telling me to go to the Options screen, but it doesn’t tell me where to go to find that. (GIF)

 

User Reviews

I wanted to use data to drive my future design decisions.

So I looked through thousands of reviews, comments, and complaints from different platforms of the software (Windows, Cloud, iOS, Android).


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

Exploring Competitors

Interface of Square Appointments (GIF)

 
 



Define

Personas

Kate (Small Business)
Only needs the main basic features (appointment booking, reports, clients, etc.). Usually not very tech-savvy.
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. Usually pretty tech-savvy.

Pain Points

Inconsistent use and placement of UI components.

  • No clear call-to-action buttons.

  • No sense of direction for the user to proceed to their goal.

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

Outdated visual design.

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

Design Opportunities

Create and follow design guidelines to maintain design consistency.

  • Maintain progressive disclosure - show only the minimum amount of information needed until more is requested by the user.

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.




Ideation

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.

I first started with some paper prototypes and some different design alternatives for different flows of the software. I presented some of these 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.




Design / Iteration


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

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

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

Here is the fullscreen prototype: Link

The colors and font used in my designs were meant to be placeholders and are not indicative of the colors used in the final released product.

Chrome-Browser-Mockup-Free3+-+Daysmart+-+Copy+-+Copy3.jpg

Appointment Booking “Quick View”

(Advanced View by clicking on “Advanced View")

edited.jpg

Week view of appointments for one employee

edited.jpg

Week view of appointments for all employees

Chrome-Browser-Mockup-Free3+-+Daysmart+-+Copy.jpg

Day View of appointments for all employees

Chrome-Browser-Mockup-Free3+-+Daysmart+-+Copy+-+Copy.jpg

List of products with one on hover revealing 3 actions

Chrome-Browser-Mockup-Free3+-+Daysmart+-+Copy+-+Copy+%282%29+-+Copy.jpg

Clients design - Allowing the user to quickly re-book an appointment for this client

Chrome-Browser-Mockup-Free2+-+Copy.jpg

Employees design - employee portfolio empty state

 
Editing a service (GIF)

Editing a service (GIF)

 
fba31e59936ae443ed97992acd0ba4d6.png

Current desktop software empty state for clients

Clients.png

Unselected state for clients design.




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!

Through new customer feedback, the new designs that have been implemented have received much higher review ratings, fewer complaints, and overall higher customer satisfaction and retention rates.



Preliminary Style Guide

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

Lato
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

DaySmart.png
 



Takeaways

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 and empathic design.

"User experience" is a foreign concept to many that can transform businesses.

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: NASA / DaySmart Software / Amazon (Password-Protected) / Sanctuary / YourGamePal