Introducing a Design System & improving accessibility of Axxess Employee Support Application
Project Type
UI/UX Internship 2022
Timeline
Aug 2022 - Dec 2022
Tasked with the redesign of the dated and complex "Axxess Support Application", I led a team of UX designers and developers to redesign its interface, enhancing user flows, and usability by introducing a comprehensive style guide and feature improvements. Now, over 70 US healthcare agencies benefit from a more streamlined home healthcare management system.
Team
Design Interns, Senior Designers, Developers and Product Manager
Key Responsibilities
User Interviews, Contextual Inquiries, Prototyping, Design System, UI Design, and Usability Testing
About
I redesigned the UI for Axxess Employee Support Application
Why do Employees use it?
The sales, accounting, and customer experience team uses it to add new and manage existing home health agencies. The agency info, account, billing and other applicable tasks.
How do Employees use it?
The sales, accounting, and customer experience teams utilize the Employee Support Application as their initial access point to various Axxess products. This application consolidates all agency-related data, enabling target users to efficiently manage agencies
Problem with the existing interface
Created by the engineers, with no designer, based on PM Specifications- it hit all the content requirements but was not easy to use at all.
BEFORE IMPROVEMENT: DETAILS
The first meeting with the PM, designers, and developers gave us initial insights into the most encountered problems by the users
Overwhelming
All inputs were presented as a single step
Confusing
Actions were not intuitive
Alarming
Once the data was filled and couldn’t be saved, one has to start from scratch
Undiscoverable
Useful information was not captured easily and was unrecognizable and was not accessible
As a result, task completion rates were low and the operational efficiency suffered.
Research I: Analyzing the current UI 50+ screens
I conducted an in-depth analysis to study the existing UI to map out the possible problems vs other Axxess Products
AGENCY CENTER DASHBOARD
-
Old and cluttered UI
-
Uneven distribution of components
-
Information overload
-
Incorrect Information Hierarchy
-
Tags are unrecognizable
AGENCY LIST
-
Uneven table information
-
Wrong placement of action button
-
Red color usage indicates danger
-
Improper color usage
-
Action items are unrecognizable
ADDING PRODUCT
-
No Action Buttons
-
Long rows increasing cognitive overload
-
Improper grouping of components
-
No indication for task completion
Research II: Validating problems discovered with users
To gain a deeper understanding of the issues with the current employee support application, I conducted interviews with 5 key internal users from various departments, including two sales representatives, 1 accountant, and 2 customer experience specialists. I asked questions about their daily usage of the application, their methods of dealing with the current UI, and their experiences with similar applications on other platforms. Many interviewees expressed their dissatisfaction with the current system, citing its outdated design, cluttered interface, and lack of user-friendly features.
01
“The application is cluttered and it's hard to find what I need quickly.” - John, Sales Representative
“I spend a lot of time navigating through different screens to find the information I need.” -Sarah, Accountant
Users need a way to navigate the application more efficiently
02
“The application is cluttered and it's hard to find what I need quickly.” - John, Sales Representative
“I spend a lot of time navigating through different screens to find the information I need.” -Sarah, Accountant
Users need a way to save and export their work
03
“The actions are not discoverable. I often find myself clicking around trying to figure out how to do something.” -James, Customer Experience Specialist
“I had to ask my colleagues how to perform certain actions because they are not intuitive.” -Sarah, Accountant
Users need a way to discover actions more easily
04
“The UI is old and not in line with what I'm used to on other platforms.” -John, Sales Representative
It's time-consuming to use" -Emma, Customer Experience Specialist
The application needs a modern and clean UI
In further research, the contextual inquiry was done to observe user actions to map the user journey. Due to NDA, I cannot share the User Journey here but you can reach out to me to discuss the further research in detail.
DESIGN GOALS
Create a consistent user experience across all products
Reduce visual clutter and improve information hierarchy
Highlight group frequently used action items
Improve overall operational efficiency by reducing the steps to be taken to complete tasks
DESIGN DECISIONS
INTRODUCING DESIGN SYSTEMS
I collaborated with our design team to create a comprehensive style guide for Axxess. This guide included a library of common components, design guidelines, and UX instructions for elements ranging from typography to screen layouts. This shared resource ensured design consistency and has been adopted across multiple teams, becoming a crucial tool in the development of various Axxess products
Color Palette and CSS properties
Text Styles and Components with CSS properties
DEPLOYMENT 1.0 : PRODUCT REFRESH
As the lead, I managed the full-cycle UX for 9K+ internal users across various features. I drove the redesign of the Agency Center, View List, and Action Columns list, from initial mockups to launch, enhancing features for a more streamlined user experience.
Older Version
Agency Center Dashboard
Revamped Version
Introduced category tab bar as a shortcut to complete tasks
Pop - up window
Change in order of presenting information in the different sections on the basis of priority of information
Colored Tags to differentiate product categories with hover option to tackle accessibility for color blind users to read the product categories when they hover over it
Use of colored text to highlight agency names for the internal use known to its users
Introduced refresh and expand icons in the table to help users refresh the data and to view the whole table
Simplied the action column by changing the order to put frequently used actions first and intoduced more option to view extra action items if needed
Agency Center Dashboard
Modified table contents to show information clear and consice
DEPLOYMENT 2.0 : FEATURE IMPROVEMENTS
Aiming for design parity, I revamped key sections of our product post-agency center redesign. Through user interviews and contextual inquiry, I identified pain points and made structural improvements to the Agency List and Agency Physicians sections. I also enhanced the information architecture and navigation for a better user experience. Due to an NDA, I can't share all screens here, but I'm available for detailed prototype reviews upon request.
Enhanced navigation by adding a dedicated "Agency Center" tab in the main menu to streamline usage and make it more convenient for employees to take them to their tasks quickly, as it was determined through user research to be the most frequently utilized page
Intoduced Colored buttons to differetiate between various categories and select one easily (As researched, suitlabe for older demographics)
Use of colored text to highlight agency names for quick glance of their joinings
Landing page - Employee Support Application
Agency List Table - Employee Support Application
Improved the interactivity of action items by making them more recognizable, allowing users to easily initiate actions
Improved the clarity and visibility of the "Total MRP" by incorporating it into the table design, making it easier for users to understand and locate the MRP information faster
Streamlining the filtering process by adding a clearly labeled "Generate" button, making it easier and more intuitive for users to understand if their desired information has been generated or not
Testing Home Health Agency - Notes - Employee Support Application
Added refresh and expand/export icons to the table for an improved user experience. The refresh icon allows users to update data, while the expand/export icon provides a quick way to view the whole table or export data. To make it intuitive that improves usability and consistency, creating a streamlined experience
Empower users to view information effortlessly by enhancing the visibility of page numbers, refresh button and adding a convenient "show number of table entries" feature, allowing for a personalized and efficient experience when viewing data
Availity Service - Employee Support Application
Sticky Toasts are lightweight notifications that display a message for a set amount of time-stamp reassuring the users after an action is performed.
Visual cue that allows users to perform a call to edit action item once the input fields are filled.
Use of color as an Implicit Visual cue that brings a call to action.
Success Metrics
15%
Improved Task Completion Rate
2.5X
Reduction in time on task
75%
Reduction in error rates
My work done on this project for Axxxess resulted in having good recognition. In addition, I was also responsible at the end to notify other teams on the UX overhaul so they could utilize most of the common elements for different parts of the Axxess product lineup.
My Impact
-
Set solid goals for the project by defining the core problems
-
Made a consensus with a multi-functional team for the final design by persuading my design and discussing feasibility
-
Conducted user testing from planning to moderating to Synthesizing insights
-
Covered website and mobile app and created 22 illustrations
-
Delivered the final deliverables, including design patterns, detailed specs, and an accessibility guide
Additional Contribution
-
Created a clear and concise style guide in Figma to improve the design system by collaborating with fellow design intern and senior designers.
-
Enhanced collaboration between the design and engineering teams by providing a detailed guide for code retrieval and concise design annotations.
-
Conducted thorough usability testing and collaborated with engineering to maintain consistency and quality.
-
Revamped the Reports section of AxxessCare product along with the redesign of the "Employee Support Application". Achieved the goal of enhancing the user experience by streamlining the user flows of 40+ reports and improving its accessibility and ease of use.