I led the UX design efforts in a multi-faceted project that involved integrating payment configuration functionalities from an older site. While doing this, I was able to update the UI and make it more intuitive. Throughout the project, my design mantra was simple yet impactful: less is more.
This project was truly a balancing act. I was required to retain the framework of the existing site but modernize the task flows and UI to achieve the desired look and feel of the destination site. Oh, did I mention I also upgraded the UI on this new section by utilizing a new design system? Buckle up, this one's a doozy.
The newer platform's user experience was unconventional. There were different fonts, button sizes and icon styles used throughout it. Additionally, accessibility issues like low contrast ratios and inconsistent success criteria were also a big concern.
Working with a power user, we identified all functionalities and how they worked. Upon review, there was an excessive amount functions on the original site. I created a chart that listed all of them and began to eliminate any that weren't vital to everyday use.
The original site was created in the 2000s and the UI was antiquated. Instead of rebuilding the website from scratch, key functionality would be pulled and integrated into an existing site. This would keep costs low and allow the content to take on a new aesthetic.
I created the information architecture by separating the tabs into card components allowing users to see what functions/tasks could be completed within each card. The new navigation eliminated unnecessary clicks and simplified task flows.
My approach for this project involved presenting high fidelity screens to the team which enabled them to see a highly polished platform with an updated UI. They provided feedback during these sessions and allowed me to get into a design cadence immediately and iterate accordingly.
Before and after of the iterative design process.
Initially, I based my designs off of the existing CSR UI and modified the necessary accessibility issues. I knew using a design system would polish the UI even more and provide a much needed update and consistent feel. After some persuasion, I got approval to incorporate our in-house design system called Alchemy.
CSR styled UI and components and the new design system. I focused primarily on updating the typography and components; colors were already established.
After months of iterative design with the team and incorporating the new design system, the new section of CSR was completed and ready for developer handoff.
Quirky menu, bloated UI and outdated UI
Site map walking through three different task flows.
Copying an existing user type's permissions
Uploading a file to a table
Creating a new billing product
Warning modal for disabling a user configuration
Updating the payment options for a biller
It was important to improve high use task flows like editing a biller account or creating a new product. Improving efficiency would drive adoption and promote a positive image of the new designed platform. Testing with one of the power users, I was able to confirm that the newly designed flows were intuitive and task completion time was shorter.
There is a fine line between up to date and ultramodern when it comes to digital healthcare products. I wanted to be mindful of that and ensure the UI has as strong a focus on functionality as it does on aesthetics. By introducing updated components, the platform looks more contemporary but does not go against the more conservative appearance of the original design.
Integrating a design system into this project was pivotal in creating a consistent and cohesive experience. It created uniformity across the UI and eliminated the need to repeatedly address common design elements like spacing and font sizes. Most significantly, the design system resolved accessibility challenges, enhancing the overall usability of the interface.
