This project was initially handled by another designer. I began by shadowing them for around two months to understand the design rationale, user pain points, and feedback gathered so far.
As the project transitioned to me, I took full ownership of the redesign. I analyzed the existing Card and Flowsheet views, identified critical usability issues, and proposed scalable design solutions that addressed both immediate requirements and future flexibility.
Recognizing communication gaps across teams, I initiated a cross-functional workshop to bring together product managers, developers, and stakeholders. This helped us align on the problem space, surface blockers, and define a clear path forward. After the workshop, I led the project through over seven iterations, presented the final design to the client, and ensured on-time delivery with strong alignment to business goals.
Identify and Resolve Usability Gaps
Reviewed legacy designs, mapped user challenges, and improved layout flow to enhance information clarity and reduce user fatigue.
Design Scalable, Modular Components
Created flexible layouts with reusable components supporting multi-baby pregnancy cases, inline commenting, and contextual data display.
Lead Cross-Functional Alignment and Delivery
Facilitated a team-wide workshop to realign direction, resolved design handover confusion, and implemented user-validated changes across seven iterations with a 74% SUS score
Redesigned 2 core views (Card & Flowsheet) to improve usability and accessibility
Replaced hover-only interactions with responsive pop-overs to support mobile/tablet users
Introduced Quick Access and Trend View functionality for faster data exploration
Modularized the card layout for multi-baby support and improved content clarity
Added visit type labeling and filtering (OB, MFM, Virtual)
Delivered over 7 iterative design rounds in 6 weeks, balancing feedback and technical feasibility
Old Card Design: Issues Identified
No clear visit type in the header
The nature of the visit (e.g., virtual, OB visit) was not immediately visible.
Hover-based interactions
Important data trends were only accessible via hover, causing accessibility problems.
Unclear cumulative weight indicator
The representation of weight change was confusing and not easily understood.
Hidden attestation details
Critical legal and clinical information was not visible upfront.
Lack of structure for fetal and comment data
Important fields like comments and fetal observations were not clearly emphasized.
Uplifted Card Design: Improvements Made
Visit type displayed prominently in the header
Gave users immediate context of the visit type.
Replaced hover with accessible pop-over interactions
Allowed users to view trends more intuitively and inclusively.
Organized data into structured sections
Created logical groupings for vitals, fetal details, and comments.
Attestation information made visible
Increased clarity and compliance by surfacing important info directly on the card.
Integrated clinical comments and documentation links
Added contextual relevance and supported clinician communication.
Designed for scalability
Supported multi-baby pregnancies and modular growth.
Old Flowsheet Design: Issues Identified
Static data labels
Data could not be interacted with or expanded, making analysis difficult.
Hover-based edit buttons
Users had to hover to see edit options, creating usability and accessibility concerns.
Non-collapsible sections
The layout was dense, with no way to manage visual complexity.
Lack of contextual navigation
No direct way to access detailed or editable views from within the table.
Uplifted Flowsheet Design: Improvements Made
Clickable data fields for trend insights
Users can click to view deeper trends, improving data usability.
Collapsible sections
Improved layout readability and reduced information overload.
Side panel access for editing
Users can access a full editable view by selecting the visit date.
Better structure for prenatal data
Sections like vitals, fetal information, and provider notes were clearly segmented.
Improved accessibility and usability
Removed hover-only interactions and made functionality more discoverable.
Usability Testing
Feedback from User Research
| Priority | Finding | Area for Improvement | Resolution |
|---|---|---|---|
| Priority 4 | Adding comments to a specific field was not intuitive | Consider more intuitive ways to add comments to a specific question | Added comment button in the menu |
| Priority 3 | The difference between types of visits was unclear | Use color coding or labels to differentiate visit types | Color-coded flowsheet and added labels |
| Priority 3 | Quick Access button was unclear | Make it more visible and rename for clarity | UI restructure proposed |
| Priority 3 | It was not clear who documented the visit | Make provider information more prominent | Adjusted visit header layout |
| Priority 3 | Adding another baby was not intuitive | Make the process clearer and more discoverable | Made header clickable |
| Priority 3 | Accessing comments section was not intuitive | Simplify comment access | Improved visual cues and workflow |
| Priority 4 | Users confused notes vs. comments | Clarify with visual aid (e.g., tooltip or popover) | Added tooltips and labels |
Card Design Evolution
The original Card View featured expandable sections that were intended to optimize screen space and allow additional data to be shown as needed. While this approach initially helped manage layout density, it quickly became inconsistent with other products across the suite.
To align with the broader application ecosystem, the card layout was later adapted to match a more unified visual structure. However, this update introduced its own challenges. The design no longer supported section-level grouping, which made it harder to organize content clearly or prepare for future data types.
During early iterations, blue information icons were used to surface additional data through hover interactions. These icons functioned as progressive disclosures, introduced as a quick fix in earlier versions of the application. However, they became widespread across the product without addressing accessibility or interaction clarity.
Recognizing the limitations of both structure and interaction patterns, I worked toward a solution that balanced usability, accessibility, and future scalability. The card was eventually restructured into modular content boxes, each of which used clickable interactions instead of hover-based triggers. This update improved accessibility across devices and also made the layout more adaptable for new data types or custom values required by different clients.
The final layout made it easier to maintain visual clarity, helped align the product with accessibility guidelines, and allowed future feature expansion without requiring major design overhauls.
Iterations of Card Design
Comments Design Evolution
One of the most important elements for clinicians during prenatal care review was access to comments. Comments served as a communication thread between midwives, nurses, and physicians, and were used heavily to track visit-specific observations and follow-ups. During user feedback sessions, clinicians consistently expressed the need to view all comments in one place without having to switch between views or scroll excessively.
The challenge was designing a solution that would allow easy access to comments without compromising the visibility of clinical data in the card layout. The cards were designed to be compact and readable within a single view, so any additional element had to work within strict real estate constraints.
Initial Concepts and Limitations
Side Panel Integration
This idea was explored as a way to separate comments from the card layout. However, the side panel was already being used as a data input method across the system. Reusing it for viewing comments caused confusion and conflicted with existing workflows. As a result, this option was not well received.
Overlay Display on Cards
Another approach was to create an overlay that would sit above the card and display all comments in a single view. This allowed for quick access, but it obstructed the underlying card content. Since clinicians often needed to reference the data while reviewing comments, this solution disrupted their workflow and was ultimately not viable.
Popover-Based Comments
Eventually, I proposed integrating comments directly within each card using clickable popovers. This allowed users to access comments without navigating away or opening additional views. This solution was well received in usability sessions, though it still required adjustments to spacing and content layout to improve readability within the popover.
Additional Exploration
Alongside these iterations, I also explored a dedicated view focused solely on data trends. This allowed users to compare data changes over time while viewing associated comments. The client appreciated this exploration for its clarity and potential value in reviewing patient progression over multiple visits.
This part of the redesign required balancing technical constraints, screen space, and workflow expectations. The final solution provided a flexible yet non-disruptive way for clinicians to access comments, while setting the foundation for future improvements based on feedback.
In every project I work on, I aim to design the best possible solution that meets user needs, even if technical constraints prevent full implementation. These explorations serve as future design directions that teams can reference when timelines or technology allow.
During the Prenatal Visits redesign, I identified that clinicians often struggled with navigating between multiple visit cards. Comments were especially important to them, as they relied on them to understand patient history and coordinate care across roles. Many users expressed the need to view all comments in one place, without having to click into each card individually.
To support this workflow, I explored several design directions:
Single Card with List View
This concept showed one card at a time alongside a vertical list of visits. The list was color-coded to help users identify visit types quickly and navigate with less cognitive load.
Expanded Comments View
I designed a layout that emphasized comment visibility within the card. This helped clinicians focus on communication threads without losing context.
Quick Access View
This version surfaced all visit comments in a scrollable list, allowing clinicians to read through patient history and jump directly to any visit. It provided a summarized flow of events and was particularly helpful for understanding how a pregnancy progressed over time. This idea was well received by the client for its clarity and potential efficiency gains.
