← Back to work
Femi Mobile - Field Companion for Nurses & Doctors
A clinical management dashboard, rebuilt - plus a drop-in CSS layer that white-labels the entire product.
The problem
Femi's desktop dashboard was shipped and in use by unit managers. But the people actually delivering care - nurses and doctors visiting patients at home — were working off a legacy mobile build that the dev team had thrown together without design input. Same data, same Hebrew RTL interface, but cramped, chunky, and visually flat. No hierarchy for the field reality: every piece of information shouted at the same volume on a 5-inch screen.
The brief: a mobile version that respects how clinicians actually use phones in the field - half-distracted, one-handed, sometimes mid-step between a car door and a patient's apartment building.
.png)
Research and Discovery
I observed the workflow before redesigning anything. A nurse's day isn't desk work — it's a sequence of context switches between three environments, each with its own attention budget:In the car / on the street — moving between visits. Phone glanced at, not read. Needs: where am I going next, who am I seeing, can I call ahead.
At the patient's door / inside the home — focused, present, hands sometimes occupied.
Needs: full medical context, visit history, prescriptions, notes.
Between visits / planning — reviewing the queue of patients awaiting a visit.
Needs: when did I last see this person, how do I schedule the next one.
The same data ranked completely differently in each environment. That became the core design problem: the screen has to know which environment the clinician is in.
At the patient's door / inside the home — focused, present, hands sometimes occupied.
Needs: full medical context, visit history, prescriptions, notes.
Between visits / planning — reviewing the queue of patients awaiting a visit.
Needs: when did I last see this person, how do I schedule the next one.
The same data ranked completely differently in each environment. That became the core design problem: the screen has to know which environment the clinician is in.
I open the patient's card in the living room and everything I need is there. I'm not flipping between tabs in front of someone who's already nervous.
- Home-Visit Physician
Personas
Yael - Home-Visit Nurse, 38, Tel Aviv unit.
Sees 8–12 patients a day. Phone is in her pocket between visits, in her hand on the way. Needs the next address fast, navigation in one tap, and the patient's name and number visible at a glance so she can call ahead if she's running late.
Sees 8–12 patients a day. Phone is in her pocket between visits, in her hand on the way. Needs the next address fast, navigation in one tap, and the patient's name and number visible at a glance so she can call ahead if she's running late.
Dr. Eitan — Home-Visit Physician, 51
Covers complex cases across the central district. Fewer visits per day (4–6) but each one longer and clinically denser. At the patient's home he needs the full file — past prescriptions, comments from the previous visit, medical records — without scrolling through eight tabs.
Covers complex cases across the central district. Fewer visits per day (4–6) but each one longer and clinically denser. At the patient's home he needs the full file — past prescriptions, comments from the previous visit, medical records — without scrolling through eight tabs.
What was wrong
- Flat hierarchy - patient name, ID, medication list, address, and phone all rendered at the same weight. Nothing led the eye.
- Chunky CSS - dev-built layouts with tight, uneven padding. Hard to tap accurately while walking.
- One view for all contexts - same screen for "I'm in the car" and "I'm sitting with the patient." The car view drowned in clinical detail; the bedside view buried the basics.
- Chunky CSS - dev-built layouts with tight, uneven padding. Hard to tap accurately while walking.
- One view for all contexts - same screen for "I'm in the car" and "I'm sitting with the patient." The car view drowned in clinical detail; the bedside view buried the basics.
Design Approach
Context-aware cards. Each patient appears as a card whose collapsed state is optimized for the car-and-street context and whose expanded state is optimized for the bedside. Tap to switch contexts.
Collapsed (the field state): name · phone · address · big primary action: Navigate. That's it. Five pieces of information, large hit targets, designed to be parsed in two seconds.
Expanded (the bedside state): adds visits-so-far vs. total in the package (4/7), prescriptions, last visit notes, link to full medical record. Everything a clinician needs in the patient's living room.
Collapsed (the field state): name · phone · address · big primary action: Navigate. That's it. Five pieces of information, large hit targets, designed to be parsed in two seconds.
Expanded (the bedside state): adds visits-so-far vs. total in the package (4/7), prescriptions, last visit notes, link to full medical record. Everything a clinician needs in the patient's living room.
Today's list as the home screen. Opens directly into the day's visits in sequence. No tabs to navigate to, no menus. The clinician's first question — who am I seeing today — is the answer on screen one.
A separate "awaiting visit" list. Patients in their packages who haven't been scheduled yet. Same card pattern, but the primary action swaps from Navigate to Schedule visit, and the secondary line shows the date of the last visit — the two pieces of information that drive triage decisions ("who is overdue, when did I last see them, schedule").
Affordance over decoration. Every control was chosen for how it reads in motion — large primary buttons for the one decision per card, secondary actions demoted to icons, generous tap targets (44px minimum), padding tuned for one-handed thumb reach.
Brand applied without crowding. Femi's navy and teal carry the system; whitespace carries the calm. The hardest part of designing for field-distracted use is resisting the urge to fill space — every gap earns its place.
Development
Rewrote the legacy build on Bootstrap. The previous mobile version was dev-authored CSS with inconsistent breakpoints, hard-coded pixel values, and overrides stacked on overrides. I rebuilt the layout on Bootstrap's grid and utility classes — predictable spacing, consistent breakpoints, components that compose instead of conflict.
Aligned with the Femi CSS system. Same token-driven brand layer from the desktop project carried over, so mobile and desktop stay visually consistent and a single source of truth governs both surfaces.
Cleaned the cascade. Removed redundant selectors, eliminated
!important accumulation, normalized spacing to a 4px scale. The codebase shrank significantly and became something a future developer can actually extend.3
context modes designed into one card pattern (street, bedside, planning)
8–12
patients per day a nurse can move through with one-tap navigation
44px
minimum tap target — no control smaller, even in dense lists
Impact
Field-ready mobile companion to the desktop dashboard, shipped to Femi's nurse and doctor cohort.
One card pattern, three contexts — collapsed for the street, expanded for the bedside, scheduling variant for planning — kept the mental model simple while serving every environment.
Legacy mobile codebase rewritten on Bootstrap with the Femi token system, so future mobile work inherits the same design language as desktop without diverging.