UX Designer
Bubble Development, Graphic Design, Saas Product Design
Fire Fighter Project: | Heart Rate Management Portal
by Dongwei Huo
The New York Fire Department hired our team to develop a system to monitor real time heart rate. They decided that they will require firefighter to wear Fitbit during their daily activity so as to monitor their on duty heart rate. As a result, our developers need to develop a system that is compatible with Fitbit technology. In my role as UX designer, my main goal is, as stated by the NYFD official, to give senior firefighters who are monitoring the real-time heart rate a “convenient interface” where they can easily spot firefighters with abnormal heart rate status, compare heart rate over time, and notify the firefighter who is at risk.
Problem Re-define
A "convenient interface" should allow comparison of multiple data feeds, comparison over time to predict data trend, and effective control over data showcase.
Design Rationale
-
Easy sorting and searching is the key to the entire design because of the large amount of data. Rather than show as much information as possible, the wiser strategy is to allow user to filter unnecessary data;
-
According to the interview with NYFD officers and data of previous firefighter heart attack incidents, high heart rate(over 120 bpm) lasting over 2 hours after the duty ends has a high chance to lead to heart attack. Therefore, it is necessary to display heart rate over customizable time scale;
-
In addition, comparison between average data and real-time data is necessary for correct judgement of the status;
-
Monitoring view should prioritize the "viewing tab"(as the design shown above) and aims at helping viewer spot and act on urgent cases; management and advanced searching is also crucial in this case, but such tabs will only be opened on separate pages upon demand.
Portal Components
-
Search feature
-
Minimized status tabs
-
Customizable heart rate graph
-
Profiles
Wireframes of Different View
The sketch above is designed to the details to give front-end developer visual guidance. The following wireframes depict the monitor view and the search view of the portal:
Design Callouts
This callouts explains the feature action(s) and its purpose, which allows the client to understand our reasoning for the design:
