Marc Bonne's profile

Stanford University - Trauma App, UX design


Overview

Stanford University is a private research university in Stanford, California. Stanford is known for its academic strength, wealth, and proximity to Silicon Valley.
A group of medical researchers from the university wanted a way to ensure clinicians are supported in the care of a trauma patient and can meet the needs of the specific traumatically injured patients.

My Role

Gather user requirements for the app from project manager and product owners.
Draw user stories based on user requirements.
Create wireframes for mobile devices.
Design mockups for web and mobile in Balsamiq Mockups/ Photoshop and acquire feedback from potential users.
Design tablet mockups using a simple interface that can scale to fit smartphone screens.
Rework design based on the usability tests results.

Outputs required

Research health industry and create the colour scheme and logo for the app.
User Personas, user flows, wireframes and hi-fidelity mockups in Photoshop.
USER PERSONAS

Remote clinician example: 

The research team found clinicians in metropolitan, rural and remote areas require standardized, easy access to clinical support tools and up-to-date, evidence-based information to deliver optimal care. This includes the provision of trauma resources for pre-hospital and intra-hospital clinicians.

Furthermore, all clinicians required portable and versatile amenity in trauma care that can be utilised on a smart phone or tablet function in environments with poor cellular or WiFi access.




USER FLOWS

Remote clinician example:

Users expected the app to be password protected for security purposes. 
They wanted to add details about each Trauma patient based on the Trauma center they would attend (i.e. Trauma 1 or 2) 
They expected a knowledge base that clinicians new to the app could use for guidance (reducing the need for training).


COLOUR SCHEME

Based on the common colours used at a nurse’s workstation, a regular source of information for both nurses and clinicians (Dalke et al., 2006).
“It needs to be visually prominent and provide colour and lighting for maximum efficiency for all users. The immediate environment should be harmonious with variety of luminaires to give the eyes a chance to rest”
Bold colours at information desks to create a useful focus of attention for all staff, visitors and patients.
DESIGN: SIGN UP FORM
The design was tested with 20 clinicians remotely from hospitals across the US (recruited from freelancing platform Upwork). Feedback from users collected from usertesting.com. Some of the comments on the app below:​

Wireframe

Users confused by what icons labelled with “text” were meant to mean. It was remarked that these were just placeholders for future app options, however users still found them icons distracting.
Furthermore, some users of felt the form labels were out of place or misaligned.​
Hi-fi tablet mockup
​​​​​​​
For the sign-up form design, the footer buttons were removed from the website, as the app features originally planned were no longer needed.
Users felt the interface was cleaner after the footer button removal.
Users were however confused that there weren’t multiple address lines on the form. It was assumed only the first line of the address could be added. It was unclear that tapping the address field would expand the text box for multiple lines.
No comments were left about the colour scheme.
DESIGN: DASHBOARD MENU

Wireframe

Requirements data gathered by the product owner suggested the app should include three main options, such as the trauma, MI (myocardial infarction or “heart attack”) and stroke.  The app was originally aimed to collect data for all three types of ailments. However, during testing clinicians felt the options should represent the two levels of trauma centres. Trauma 1 and 2.

Note: Trauma 1 centres have access to specialist medical and nursing care including emergency medicine, trauma surgery, critical care, neurosurgery, orthopaedic surgery, anaesthesiology and radiology, as well as highly sophisticated surgical and diagnostic equipment. Trauma 2 centres may only be able to provide initial care and stabilization of a traumatic injury and arrange for transfer of the victim to a higher level of trauma care.

Hi-Fi tablet mockup

With level 1 and 2 centres as an option, Nurses should be able to select the nearest ward type and enter the patient details for the hospital to deal with.
DESIGN: SIGN-IN FORM
Wireframe

- No users clicked the social media icons, some felt they were distracting.
- Some users highlighted the spelling error “Remeber username”.
- Generally found to be easy to understand and use.

Hi-fi tablet mockup

- Logo applied to design
- Removed social media icons
- Users felt the screen was cleaner and less distracting without social media icons.
DESIGN: WELCOME SCREEN

Wireframe
- It was originally suggested by the product owner to include a welcome screen that would confirm to users they were logged into the system.
- During testing with the wireframe however, users felt this screen was not necessary, as the appearance of the subsequent dashboard indicates that they are logged in. No hi-fidelity mock-up was created.
DESIGN: TRAUMA PATIENT DETAILS FORM

Hi-fi tablet mockup

- These are the main input forms for each Trauma center type (1 and 2) . The interface was originally planned to be the same. However, usability tests lead to some alterations. Trauma 2 centers had a slightly different databases to Trauma 1 centers, requiring separate First Name/Last Name fields. This confused users who felt the input boxes should be the same for both screens. The patients age was not required for Trauma 2 as this was identified at the Trauma center. Furthermore participants felt it was quicker to tap a button saying male or female rather than using a dropdown box. Interestingly, participants only voiced this concern with the Trauma 2 dashboard, leading to suspicions of potential flaws in the user research.

- It was originally suggested by the UX team to contain each section (Basic Info, Last Vitals, Mechanism) on separate screens, however users found it was quicker to input data with all sections on one screen.


RESULTS
​​​​​​​
A year after the completed app was rolled out the on iOS and Android tablets, the app was later bought by iTim (New South Wales Institute of Trauma and Injury Management), winning the Merit Award at the NSW iAwards.

An analysis report in 2016 by iTim found:
- 6,094 downloads since August 2015 from the iTunes and Google Play stores:
      - iOS (Apple) device 68%: 91% iPhone, 9% iPad
      - Android devices 32%: 90% phone, 10% Tablet
- 4,180 registered users of the app: Nurses 46%, Doctors 31% and Paramedics 16%, the top three groups of professionals registered
- 75% of users return to use the app 1-5 times per week, the app is used on average 29 times per day and by each user spending 3.5 minutes per use
- 66% of surveyed users felt that using the app in the clinical setting had a positive impact on the patient and clinician relationship
- 79% of surveyed users felt that using the app contributed to positive patient outcomes
- The app was mostly used for medical calculations (65%) and clinical information regarding trauma care (44%)
- 63% of users state that the app has improved their access to guidelines
- The main restrictions reported for not using the app more regularly was the user’s local departmental policy on the use of mobile devices
Stanford University - Trauma App, UX design
Published:

Stanford University - Trauma App, UX design

Published: