Mobile Application: Design Process

Background

The ECG Stampede mobile application is my third React Native-based app. The web application was built with React and MobX which meant that I’d already solved most of the technical challenges. One of the issues was creating an accessible interface for content creation and revision to support Dr. Reynolds in curating the impressive library of over 300 ECG’s used in the application. Google Sheets provided the perfect interface, it was familiar, easy to update, and supported collaboration among multiple authors.

Google Sheet
The Google Sheet behind it all, no cheating!

The application parses a JSON representation of the Google Sheet data and builds randomized quizzes based on the predefined acuity distributions.

Mobile Application

Wireframe
Early wireframes
Composition
First design compositions

The mobile application presented its own challenges, specifically related to various devices sizes and constraints surrounding the presentation of critical content. The fixed aspect ratio of an ECG had to be maintained – however displaying the entire ECG in portrait orientation would render it at an uninterpretable size and with a great deal of unused space.

ScrollView
The scrolling solution

The solution was placing the ECG image within a scrolling view, attempting to expose the scrolling behavior by having the ECG extend beyond the application margins and flashing the horizontal scroll indicator.

Orientation
Responsive to orientation changes

The application also responds to orientation changes and again attempts to optimize the use of available space, including accounting for smaller devices. For example, in landscape mode, the question title moves to above the answer choices to provide a larger area for ECG display.

Screen Size
Optimized for small screens

On smaller devices, the application margin is decreased to make the displayed ECG and buttons easier to interact with.

Modes
Two brand-new modes

I’m also excited to introduce a few new modes available only in the mobile application including Quiz Mode and Random Mode. Both new modes allow you to select more than ten ECG’s to review at a time. They also display the preferred triage acuity as you advance each question. In random mode, there’s no predefined allotment of ECG acuity, you might get all STEMI’s!

Download Now

Download App Give Feedback