BACK
Symplr
ABOUT SYMPLR
Symplr is a healthcare technology company that provides a suite of software solutions aimed at streamlining and automating complex operational processes within healthcare organizations.

Their offerings include tools for provider data management, workforce management, compliance, quality and safety, and contract and supplier management.
PROBLEM
Symplr’s workforce staffing screen had a UX issue with excessive, scattered data, making it hard for users to focus on key information.

On interviews, they noted that competitors handle this better, offering more organized and streamlined layouts, leading to a more efficient user experience.
SOLUTION
I redesigned this screen, optimizing all elements modularly so that the solution could be rolled out in parts, as needed.

The table, in particular, was enhanced with a custom visual indicator, allowing users to instantly gauge staffing requirements at a glance.

When the table is collapsed, these small charts collectively offer a dashboard view, enabling quick scans of staffing situations across all locations.
Senior UX UI Designer
Staffing screen optimization
User interviews
Design system adoption
Mock ups & Prototypes
Prototype

"Make it easy on the eye" -user's request

Symplr has a dedicated UX Research unit that conducts regular interviews with real users, often mid-level managers who are the primary users interacting with Symplr's products.

I participated in the interviews focused on the Staffing screen in January 2024. The general feedback about the screen highlighted key concerns:
- Too much data, making it visually overwhelming.
- Users expressed frustration, asking to 'make it easier on the eye.'

"Fit more data on screen" -Product's request

At first, this may seem like a contradictory request: users want a less overwhelming UX, while the product team needs to fit more rows of data on screen.

However, it's not as contradictory as it seems—optimized data visualization can address both by enhancing clarity and usability, while still accommodating more information.

It’s also important to recognize that even a poor UX can have valuable aspects for users, such as displaying a large amount of data in one view.

OLD STAFFING 3-WEEK VIEW (ZOOMED OUT)

Form optimization

OLD FORM

Request from product was to optimize form and table to fit more data on-screen
Some screen titles were redundant given the context
Placement chosen for applied filters (chips) was limited and, together with the number of matches, created a confusing data structure
Total height was 166px

NEW FORM

Unnecessary titles were removed
Fields were rearranged to create a stacked structure
Contextual information as "current", "2 days left" and "selected 1" on titles resulted optimal for users
Applied filters (chips) placed below now depicts a clear data hierarchy
Total height was 104px, a 37% reduction, and 66px when no filters are applied, a 60% reduction
FORM WITH FILTERS
FORM WITH NO FILTERS APPLIED

Table navigation

OLD TABLE NAVIGATION

Dates format was not optimal for quick visual scanning
Navigation controls were extremely separated, placed on both sides of the screen, difficulting the normal back & forth
Total height was 85px

NEW TABLE NAVIGATION

Day and date were separated vertically, creating a hierarchy that's easier to read
Current week was already present on the form, so it was removed here
Navigation controls were placed together, enabling a more agile back & forth
The toggle to expand the data was formerly placed outside the Nav Bar
Total height was 50px, a 41% reduction

A new visual indicator for staffing

OLD DATA VISUALIZATION

Data was confusing, preventing users from effectively understanding the staffing situation
Data titles -target & open- were repeated all across the table
Row height was 90px

NEW DATA VISUALIZATION

Staffing numbers were turned into 2 bar charts, one indicating the general staffing situation, and the other one indication which shift is understaffed
Data titles -target & open- are now related to the whole row
Further data is available hovering the little charts
Row height is now 55px, a 39% reduction
ON HOVER TOOLTIP SHOWS THE DETAILS

Full staffing view

Dashboard view

Enables users to quickly overview the situation in all locations

Results