Task
Design
sector
Healthcare
Year
2020
Tech Stack
Project Overview
This case study covers the redesign of a time and expense dashboard for a medical staffing agency. The goal was to remove confusion, reduce cognitive overload, and improve task efficiency in a high-pressure environment. I focused on UX clarity, visual hierarchy, accessibility, and ease of use for healthcare professionals who rely on quick decisions.
Before Redesign
UI Issues & Usability Concerns
Visually cluttered – Too much content in one view.
Weak hierarchy – Important areas (Timesheets, Schedule, etc.) didn’t stand out.
Too many CTAs – Buttons fought for attention.
Oversized header – Reduced space for key info.
Off-brand tone – Did not match calm medical UI expectations.
Impact: Users experienced cognitive overload and reduced task efficiency, undermining overall usability.
Visual Design & Accessibility Issues
Color & Accessibility
No logic behind color choices
Contrast levels failed WCAG standards.
No clear color cues for urgency or status.
Typography & Iconography
Icons were inconsistent (filled vs outlined).
Headings, names, and dates looked similar, hurting readability.
Layout & Spacing
Tight in some areas, overly spacious in others
Felt both crowded and empty at the same time
Impact: Users experienced reduced scannability, poor accessibility, and lower trust in the interface
Navigation & Mobile UX Issues
Menu always visible, pushing content down
Too much content shown at once, causing visual noise
Mobile users have to scrolls excessively
Impact: Essential content became harder to access, slowing navigation and frustrating users—especially on mobile.
After Redesign
Solution Overview
I redesigned the dashboard using a scalable system approach, focusing on clarity, contrast, task priority, and responsive interaction.
Establishing a Scalable Design System
Introduced consistent UI components and spacing rules.
Set clear visual hierarchy for primary vs secondary actions.
Applied WCAG-aligned contrast and focus states.
Used modular layouts for reuse and easy updates.
Improved designer-developer collaboration with shared tokens.
Result: A clear, maintainable, and reusable structure across the product.
Header & Navigation Redesign
Moved navigation to a left sidebar on desktop
Collapsed menu into a toggle on mobile.
Placed logo, date, and profile in a minimal top header.
Result: Cleaner layout with more focus on tasks
Reducing Cognitive Load with Progressive Disclosure
Limited desktop display to four active timesheets
Urgent past-due or declined sheets surfaced first in red.
Multiple red items grouped into one “View all urgent” link.
Used responsive Bootstrap cards for better scanning.
Result: Users can quickly spot urgency without feeling overwhelmed