Web UI/UX - Research - Visual Design
Designing for Business Sustainability
UX Design Intern
3 Design Interns and UX Manager
Nov. 2017 - May 2018 (Part-time internship)
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.
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.
1 - Research
Cataloging Existing Features
2 - Analysis
3 - Ideation
Paper Prototype (Presented to the CPO)
4 - Design/Iteration
C-Level Design Reviews
5 - Handoff
Annotations for Prototypes
Final Presentation to the CEO
6 - Reflect
I completed four research methods to fully understand the context of the project before designing.
Cataloging Existing Features
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.”
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.
Too many popup windows.
No progressive disclosure - showing too much (unneeded) information all at once.
Small businesses only need the basic features.
Cloud version: 1 second or longer 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.
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.
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.
Appointment Booking “Quick View”
(Advanced View by clicking on “Advanced View")
Week view of appointments for one employee
Week view of appointments for all employees
Day View of appointments for all employees
List of products with one on hover revealing 3 actions
Clients design - Allowing the user to quickly re-book an appointment for this client
Employees design - employee portfolio empty state
Current desktop software empty state for clients
Unselected state for clients design.
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.
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.
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