.png)
The Problem
Physicians send and receive a large quantities of sensitive patient information, but still frequently rely on handwritten communications
This is slow, unreliable, and dangerous
I built and documented features that enabled hospital-wide collaboration
in partnership with 200+ hospitals in the Massachusetts area
Collaborators
MH UX Team
MH Product Team
MH Dev Team
Tools
Figma
Axure
Jira
The Platform
Mobile Heartbeat handles everything from shift scheduling, EHR access, messaging, and a variety of other day-to-day physician needs
The mobile and desktop platform served as an easily accessible and HIPPA compliant solution
The new feature design and documentation I produced supported the core objective of clinical collaboration
We reduced the need for multiple pagers and devices during shifts, eliminated unreliable communications and reduced overall unit noise in 200+ hospitals
Shift Scheduling
Active Search UI
Filtering Directory
Facilities Modal
My Role
Design patterns that reduce our user's cognitive load, and document them in a comprehensive design system
+ maintain and update the style guide, component library, and pattern library for features like:
-
Hospital broadcast system
-
Patient filtering and grouping patterns
-
1:1 and group messaging screens
-
System-wide alerts
Proof of Concept + Documentation
Not all hospital alerts need to be broadcast over the loudspeaker.
Can we create a more efficient alert system?
Key Feature
The Hospital Broadcast System
A need identified via physician interview data. This would require balancing existing visual language with new design concepts, and had to be completed within the upcoming project interval deadline
Iterative collaborations with both the product and development teams ensured the prototype was ready before hand-off
Iterative Design Process
Quick + thoughtful iteration
within the Agile framework turns pitches into platform staples
Each stage of iteration was bookended by feedback from the UX team to ensure a better end-product
​Low-Fi stages of solutioning focused on placement and visual balance​
Later iterations were focused on increasing ease of use and new ideas were frequently tested
V1
V2
V3
Early Iteration
Building on existing visual
language to create new patterns
We knew our users were accustomed to existing UI-patterns. Maintaining a reliable and easy to use service was our competitive edge in the health-tech space
But we also knew that hospital-wide emergency broadcasts are a big deal, and frequently incorporated new elements to keep the experience safe
.png)
Broadcast Menu
Healthcare Considerations
Increasing the speed of send and locating important edge cases
Adding a search function to the code select menu helped quickly direct users to the code they wanted to send
and adding section headers with facility labels accounted for our users who work in multiple facilities with different hospital codes
.png)
Features were tested and built
as they were pitched in team meetings
Considerations for maintaining patient privacy were always at the front of mind as we tokenized specialized cards for displaying nurse and patient information
Nurse Card
Patient Cards
Final Touches
Weighing multiple inputs, and implementing them in a way that appeals to the entire team
At stage of the process the design team unified their vision of the process and ensured all edge cases were met
Feedback
Users constructing a broadcast should be more aware of where it will be sent. The user should also be allowed hyper-specificity when detailing where an emergency is occurring
Solution
Location info is moved to the top of the visual hierarchy and
location specifier is changed to a free-text box to allow personalized inputs
Feedback
Users should not be slowed down because of a skipped required field, and should be made aware of the urgency of the broadcast they are about to send
Solution
An asterisk indication on required fields to reduce friction before sending, and the utilization of a red on the slider clearly indicates urgency
Product Team Collaborations
Compromising on, and defending design decisions in check-ins with Product and Engineering
Initially, the 'slide to send' method of sending broadcasts functioned as a UI check against ‘butt-dials’
Feedback from the PMs revealed that the speed of the broadcast process was being compromised by this design, and a change was needed
I redesigned and simplified the slider into a quick-send button to make sure users were able to announce emergency codes without sacrificing speed
Formatting, Documenting, and Streamlining
Carefully documenting features for company-wide reference utilizing the Atomic Design methodology
100+ Pages of living document referenced daily by product, stakeholders, designers and engineers
1
Atomic Level
Icons, Texts, Colors tokens, and other building block elements were meticulously sorted and documented to ensure an easy-to-reference foundation was in place for new designs
2
Molecular Level
Next, components built from the atomic elements were sorted and documented. At this stage, pixel-precise measurements and component variations were lined out
3
Organism/Template Level
Templates and workflows for functions like messaging, assigning hospital specific roles to contacts, and pulling up interactive sheets are documented with an emphasis on their usage and functionality for the entire company to reference and iterate on
4
Feature Requirement Documentation
Finally, the screens that would make it into the finished platform were collected and presented for engineers to build from and product managers to reference. The work done to perfect this cohesive and self-referential DS unquestionably increased the structure and speed of the team
Componentization
Organizing, naming, and re-structuring existing Figma components to make them easier to build and customize for future usage
The elements that were componentized included message bubbles, instances of cards, and variations of cells
Components like the 'message bubble helper' were fully re-created to have 5 property toggles and encompass all existing variants present in the platform
Summary
By the end of my time at Mobile Heartbeat I had improved and documented features from filtering, messaging, contact and call cards, broadcasting, and search to patient info display patterns
My maintenance of our structured design system also ensured a smooth transition towards new releases of the platform in use today
Alongside the technical experience, I walked away with an understanding of how the Agile process could be utilized to iterate more efficiently; using tools like Jira, FigJam, and Axure quickly became second nature
New Message Alerts Demo
Adv. Filter Prototype
I left with a sense of confidence and trust in my ability to create high-quality user-experiences in the health sector
And was validated by the recommendations and feedback of my excellent team
Sheil is an outstanding UX designer with a keen eye for design and the ability to quickly grasp new concepts. His willingness to take on challenges and consistent on-time project deliveries contribute significantly to keeping our team ahead
- Senior UX Design Team Member
