Aesthetic Record

About Aesthetic Record
Aesthetic Record is a cloud-based electronic medical records (EMR) and practice management platform designed for aesthetic practices. It is designed to help aesthetic practices streamline their operations and improve the patient experience.

Team
2 PM, 1 UX/UI Designer, 2 engineers.

Time
February - April, 2023

Tool
Figma
Aesthetic Record Design System

My Role
During my three-month internship, I had the opportunity to collaborate directly with the Vice President of Product and a team of engineers. Together, we successfully accomplished six design projects, each presenting its own unique set of UI challenges.

Due to space constraints, I can only highlight two projects here. My work involved a keen focus on both the visual charm and the practicality of user interaction. Please don't hesitate to reach out if you're interested in learning more about my work. : )

PROBLEM

POS UI lacks a modern visual design

The POS is a core component of our service flow

The Point-of-Sale (POS) system is at the heart of patient management, primarily because it facilitates the final step of any service - the payment. This is where clinics help patients with their payments, whether on a desktop computer, an iPad, or a mobile phone.

The POS UI has a dated appearance

Aesthetic Record has gone through various transitions in its user interface over the past five years. This has involved the use of multiple UI libraries, leading to an assortment of mixed UI components throughout the system. Some of these components, particularly those in the Point-of-Sale (POS) flow, haven't been updated for some time and now have a dated appearance.

IDENTIFY ISSUES

Conduct a comprehensive review

A good chance more than updating the UI

I saw this as a great chance to do more than just updating the UI. It presented an opportunity to uncover other potential usability concerns as well. So, I used multiple steps to better understand the system and underly issues.

Understand Complexity

Heuristic Evaluations

UI Component Review

Understand how the POS system works and what happens when patients need to do combo of payments.

Play the role of a user, and identify potential usability problems.

Dissect the existing UI into its individual components to spot any outdated elements.

3 critical findings

Unclear Information Architecture Due to Overwhelming Interface

The information architectur is currently obscured by a combination of oversized fonts and an excess of action buttons on the same page.

Inconsistent Content Across Different Screen Sizes

The desktop version of our platform includes an invoice module, a feature that is noticeably absent from the iPad and mobile versions.

Absence of Guidance for Payment Combinations

There are no on-screen hints or instructions for users who need to combine different payment methods.

STEP 1

Reconstruct the architecture to reduce clutter

Visualize the architecture

To better understand where the content should be placed, I used a content map to structure and organize the information in the flow. It showcases the hierarchy and relationship between different sections and pages.

Prototype the solutions

Version 1:
Show payment methods

In the initial design, I segmented the page into three functional sections using card design: Invoice, Amount, and Payment. Each section served a distinct purpose.

However, post a design review meeting, I identified some shortcomings with this design:

1. Difficulty Identifying 'Disabled' Status
2. Cluttered Invoice Information and Actions.

Version 2:
Hide payment methods

In response to the feedback, I made some adjustments in the second version of the design.

I minimized the number of action buttons to alleviate clutter and simplified the payment process into two clear steps. For any payment option that isn't available, I incorporated the term "unavailable" directly in line with the option.

‍

User Testing

I conducted a user testing session with five participants. All participants were successfully able to select their desired payment method and also clearly identified which options were marked as 'unavailable'.

Prevent Information Overload and Understand Action Steps

Three functional sections using card designs to serve a distinct purpose

Simplify the payment process into three clear steps to reduce cluttered information and actions

Maintain visual consistency with uniform design elements and color palette

STEP 2

Harmonize structures to ensure content consistency

How can we effectively adapt the invoice layout for mobile design？

Fitting an invoice into a mobile screen is like a tricky puzzle - we've got limited space but all pieces are important. We need to creatively rearrange details in the POS flow, ensuring everything is easy to find and understand, despite the smaller screen size.

Version 1

Initially, I opted for a linear design, displaying all information in a single line. Invoice details were accessible via scrolling.

However, for customers with multiple treatments, the page lengthened considerably, which strayed from our clean brand aesthetic. Moreover, users typically prioritize price breakdown over treatment specifics.

Version 2 & 3

To address these issues, I explored alternative designs, opting to conceal the summary within its own dedicated page, improving the overall look and user experience.

Finalize

In the finalized design, I enhanced the visibility of the 'Details' button from version 3 by transitioning it to a more noticeable rectangle shape.

MEASURE SUCCESS

Success Metrics & Takeaways

Metrics to evaluate success

While my internship period didn't allow for the tracking of the new UI design's success, it's something I would prioritize given more time. Should the opportunity arise, I would closely monitor the following aspects:

User Surveys

Conducting user surveys after the redesign, focusing on ease of use, aesthetic appeal, and overall satisfaction.

Conversion Rates

Changes in the percentage of users who complete the payment.
‍

NPS

Provide a measure of overall usability or user satisfaction.
‍
‍

Grasping system logic: the key to effective design

Reflecting on my experience, I realize I initially spent some time designing the POS flow without a full understanding of how combo payments functioned. This, admittedly, resulted in some wasted effort. I learned a valuable lesson through this process: comprehending the system's logic is absolutely essential before delving into design decisions. I now appreciate the importance of investing time upfront to thoroughly understand the intricacies of the system I'm working with. This understanding forms the foundation for effective, efficient design work and ensures that every decision is informed and intentional.

PROBLEM

The app needs a better pop-up note design

The team needs a better pop-up note design

The team wants to build a sticky note or pop-up note functionality for the customer notes section. The user needs to be able to flag something as a sticky note via the web.

Upon inheriting the project, I found that the preliminary design was already in place and a demo had been developed. However, the Vice President of Product was not content with the demo's current status.

Before UI Redesign

Spotted perplexing usability issues

In order to fully grasp our customers' needs, I took the initiative to gather more information related to this ticket. Then, I put myself in the shoes of a user and tested the demo, focusing on whether I could complete the key tasks.

This process revealed a number of usability issues that were quite perplexing. Furthermore, the UI lacked consistency with the overall brand aesthetic. I documented my feedback in the doc on the right.

Explore design alternatives and soliciting opinions

Before diving headfirst into the full flow UI design, I chose to initially concentrate on the main screen's design. I explored various design alternatives, seeking to align stakeholders' opinions before delving into the finer details. After thoughtful discussions, we collectively agreed on the design seen in the bottom right corner. This design not only capitalizes on Aesthetic Record's signature brand color but also maintains a sleek and simple appearance.