Femi Dashboard Design
UX/UI | Research | HTML/CSS
Overview
Femi Dashboard is a management-level analytics tool designed for the
operational staff of a medical organization.
The goal was to provide a clear, high-level view of patients, workloads, and statuses
- enabling managers to make quick, data-driven decisions without being buried in raw tables.
My Role: Lead UX/UI Designer & Front-End Developer
Timeline: 6 weeks
Tools: Figma, Angular, Bootstrap
Stakeholders: Product Manager, development team
The Challenge
The existing internal dashboard was overloaded with unstructured data - long tables,
unclear statuses, and no prioritization.
Managers couldn’t get a quick sense of what was happening: how many patients were active,
where the bottlenecks were, or which departments were overloaded.
The product manager emphasized the need for a bird’s-eye view:
“I want to open the dashboard and immediately understand the situation -
where we are, what’s urgent, and how the workload is distributed.”
So the core challenge became:How to visualize complex medical data for
management level users - clearly, calmly, and efficiently.
.png)
Market Analysis
I reviewed several medical and healthcare dashboards to identify common patterns
for handling complex data. Most rely on a clear top-down hierarchy, presenting high-level KPIs first,
followed by trends and detailed tables to support fast orientation.
Metric cards often act as entry points to deeper data, while visual calm is maintained through
restrained color use and consistent spacing. Contextual visual cues inside tables
- such as status icons and badges - help users scan and compare data without losing focus.
These patterns informed the Femi dashboard approach, emphasizing clarity,
efficient navigation, and reduced cognitive load.
.png)
.png)
Understanding the User
The Femi Home-Care Dashboard is a management tool for home-care unit managers and coordinators.
It provides a clear, high-level overview of patients, care packages, and operational performance.
The main view shows patient distribution by care type and insurance provider,
along with execution levels across packages.
Filters allow managers to focus on specific groups, packages, or coordinators,
hiding irrelevant data dynamically.The dashboard highlights risks such as missing visits,
required follow-ups, and SLA breaches.
A drill-down view reveals patient-level details, including visit history, execution status,
and upcoming appointments. Overall, the dashboard centralizes operational data
and supports fast, informed decision-making in a data-heavy medical environment.
Defining Persona
Since there was no direct access to end users, the design was built
on business requirements and logical reconstruction of managerial workflows.
Primary Persona:
Operations Manager - responsible for tracking all patient activities across departments.
Needs to see the overall picture first, then dive into details.
- Has limited time - scans key metrics in under 30 seconds.
- Makes daily decisions based on workload and patient distribution.
Key goals:
- Quickly identify critical or delayed cases.
- Monitor patient flow between departments.
- Communicate issues with medical staff efficiently.
Design approach & solution
I started with a structural audit of the existing dashboard, identifying overcrowded tables,
missing urgency cues, and important summaries hidden deep in navigation.
Based on decision-making logic, I reframed the data architecture into clear layers:
a high-level overview, mid-level distributions, and detailed patient lists.
The overview layer presents key metrics -such as total patients, active versus completed cases,
and critical alerts - in clean, minimal tiles that act as entry points to deeper data.
The patient list was redesigned with contextual visual cues, including icons, color-coded statuses,
and inline indicators to support fast scanning. Filtering was improved to allow combined queries
without losing context.For deeper analysis, a popup breakdown view reveals data by packages,
activities, and departments using tabs and collapsible sections.
Urgent cases are surfaced through a dedicated alert system, keeping critical information visible
without interrupting daily workflow.
Impact
Although no formal UX testing was conducted, the redesign was reviewed
and approved by product management and internal stakeholders.
- Managers can now grasp the system state within seconds.
- Critical cases are immediately visible, reducing the risk of oversight.
- Clear categorization improved cross-department communication.
- The interface was adopted without the need for additional onboarding.
Reflections
This project reinforced how strong UX reasoning can turn complex business logic
into intuitive interfaces. Translating backend structure into clear visual hierarchy
proved essential in a data-heavy environment.
If redesigned today, I would extend the system with predictive analytics,
a mobile summary view, and usability testing with management staff
to validate assumptions.
Screens:
.png)
.png)
.png)
.png)