Chameleon is RxPx’s purpose-built medical SaaS that enables secure, scalable and configurable workflows for prescribing, onboarding and managing medicines. The platform evolved over many years and had a lot of inconsistent components and dated user interface.
Our work here was building design system and applying it over the whole solution.
The decision was made to adopt a modified version of the Material Design system.
Chameleon had a front end framework partly using MD but it was inconsistent and not following brand guidelines. Some parts of the application had a different appearance from the rest, causing confusion and a lack of cohesion for users.
With ongoing development, we had to come up with a quick solution how to refresh dated UI and establish new rules to have a unified look and feel for the product. The new colour theme was created and framework updated to use the right atoms and components consistently.
RxPx Design System
One of the main problem areas was a patient domain section, which contains a lot tabs with multiple forms. The forms were poorly structured and hard to navigate around. The actions for the patient domain were 10-12 buttons on each page.
Old Patient Details Page
New Patient Details Screen
Redesign patient header section, combine actions buttons into 2 main dropdowns, New Task and Actions. Adding active patient call profile indication for a quick access and ability to add notes during the call.
New Patient Header Section
Patient domain forms were ungrouped and hard to navigate around with a lot of fields in no particular order. It was a very time consuming process trying to find the required fields or information that our users will be looking for.
Improving the information architecture (IA), categorising and grouping come into place. Fields were grouped into sections within expandable panels with descriptive names. Those panels can be expanded/collapsed all together or one by one. We’ve set a new logical user flow and made each next step of the process discoverable and intuitive.
Pathology results UI was dated and had no ability to do progress tracking or do a proper results comparison. We also had a request to have a visual graph representation and timeline option.
We designed a new pathology results tab component with two options you can switch into, a table view and graph view. Both of them represent an interactive timeline, an ability to do a proper tracking and save results as PDF file.
Notes History was a very long log of notes with no option to search or find which notes would be related. In order to make any updates the user would need to leave the page and navigate to a different application’s domain.
The tab was redesigned with a new table component including expandable rows to group parent and child notes. We introduced an option to make changes with modals and popups within the new table grid. Added filters and search panel.
Our internal nurses and admins add and configure new patient programs for health care providers. The process is very complex and not intuitive with a big list of different settings and code tables (SQL sink settings) which left a lot of our internal users lost and unsure about the next steps of the process. The only way to get the answers would be reaching out to for product owners.
User Research and Interviews
The first step was to understand the problem and reach out to our internal nurses. I’ve conducted a set of interviews over zoom calls. The questions were mostly about their day to day tasks , what is the new program configurations process looks like for them and what they think could be improved and how they feel about their personal experience as a user. During that research we identified a lot of common pain points, and solutions proposals were made.
First we had to address the IA, reorganise all configurations into subject-based categories and put them into separate tabs (sub pages). Each category has to be represented with descriptive name in settings navigation panel. We organise configurations based on the Pareto principle of 80/20, 20 percent of settings that 80 percent of our users look for every sub page.In advance first section (Expanded by default) should contain the most used set of settings, the user would look for in each particular category.
Next step was to provide our new and existing users with proper product onboarding, specifically around program configurations. We had to solve the problem that there was no guidance how to find the right settings and where to get those answers from.
As a solution we introduced the Product Guide, which represents a collection of user guidelines and includes product tours based on our main configuration settings use cases. Again we’ve set a logical user flow and made each next step of the process discoverable.
Coach marks are in a tour when the primary action of one coach mark will lead to the display of another. The "Skip tour" button creates an escape path for the user to avoid having to click through each step.
A step indicator is optional but encouraged. Display of progress should be consistent throughout the tour — either all steps should have this, or none.
Introduced coach marks, temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a product tour.
In conclusion, the redesign of Chameleon, a medical SaaS platform, brought significant improvements to the user experience (UX). The implementation of a modified Material Design system helped create a unified look and feel throughout the application. The patient domain, with its numerous forms, was made more organized and intuitive with the introduction of expandable panels, logical user flow and grouped fields. The pathology results tab was transformed into an interactive and visually appealing tool that offered improved tracking and comparison capabilities.
The notes history tab was made more accessible with the addition of filters, search and the ability to make changes within the same page. The complex process of configuring new patient programs for healthcare providers was streamlined through the reorganization of the settings into subject-based categories, product onboarding and the introduction of coach marks.
The overall UX improvements made the platform more efficient and user-friendly, allowing users to easily find and manage their data.