Purpose: Workflow tool to diagnose and treat delirium patients in acute settings
Role: UI/UX Designer
Project Duration: Fall 2022
Methods
Tools
Examples
.png)
Medical acute delirium can present similarly to depression and dementia and mistaking it delays patient treatment and discharge
Physicians working in departments like the ICU that need to keep track of multiple treatments
You just started your shift and the first patient you see is a 76-year-old female who presented to the ED with decreased responsiveness, obtundation, inability to take care of herself, hypoactive, and has been taking 30 mg of oxycodone every 4 hours and gabapentin 1,200 mg three times per day.
Please use the Delirium App to...
Balsamiq was used to build wireframe templates
Emphasis on how UI can facilitate user flow through app
Is every patient admitted with an alternate mental state that just takes a minute to fill out? Or is this more focus and would only be used with a small percentage of patients, filled out over several days?
High 'turnover' frequency: a high contrast ratio like 9:1 for the visual hierarchy and have less pages to flip through.
Low Use frequency: a lower contrast like 7:3 for the visual flow. Have more info stored in summary, to help remind people of what they were thinking when they started filling out he app days ago.
Knowledge in the World: Stored info and status trackers. For example, storing notable changes in patients mental status can help reduce the cognitive load of the team members tracking several patients at one with similar symptoms, helping to reduce slip-errors
Strategy: Using an allocentric tracker on the left panel that will orient middle-scaled priorities into the contest of the main clinician workflow. With the consistent layout, you won't miss updates with the peripheral imitations. If there is an important update either a notable color change or visual cue close to relevant panels in the layout.
Game HUDs: In the Patapon game they have an allocentric orientation, telling you where you are incontext to the level by framing the whole game. In Assassin's Creed, they use egocentric maps that change as you move to reflect the world based on your direct perspective. Similar to GPS map directions
In the interview, there was a challenge distinguishing delirium from depression and dementia. To break away from the framing biases that amplify that ambiguity. I build some proceduralization pathways into different windows to help clarity more appropriate workflows.
Decision Trees through Time: With the ambiguous presentation of Delirium, we use choice architecture principles to help counter heuristic biases related to decision making
For example, designing the window to have easy visuals of the data relationships, so you can compare different treatment plans and timelines. I also build layouts that help sequence and partition different assessments and labs so it is easier to see available data and know if anything is missing.
Black and white binaries are relatively easy for humans to distinguish and process, but we need designs to help solve problems with gradients and soft transitions.
In the context of this project, the challenge was how to implement medium scale goals into the workflow. Short-term goals are relatively easy to account for and clinicians are exceptionally good at long-term goal strategy.
Organizational Grouping: break down labs and general visual infographics with sub-organizational groupings. This will help low frequency user take advantage of the organizational groups to help navigate through the display.
Phase Related: break down the windows into chronological phases to focus on solving problems at that stage. This will help high frequency users scan phases they need for quick data access.
Intake, Testing, Treating, Discharge
Clutter Avoidance: One challenge to HUD design is the limitations of peripheral awareness. If someone is looking at the middle if the screen. They are not going to see new words pop up on the corner of the screen, unless those words are really big.
Eye Tracking: english speakers have a strong composition entry preference on the top left corner, so I put higher contrast menus there to help quickly orient users to the purpose and phase on that page. Followed by the data presentation in different panels to help guide the eye across the page for frequent users to quickly and accurately scan for data they are looking for.
The pattern for the wireframe was orientate, observe, and act. Followed with a repeat: re-orientate, re-observe and re-act
Orientation: the coding revealed communication challenges between different shifts/departments
Observation: the coding revealed challenges in distinguishing between acute and gradual symptom development and ruling out similar presenting conditions
Act: the most important takeaway from the interview was building an aid to help with the delirium treatment workflow. The most important tasks of this app is a centralized HUD to help use known information to build efficient treatment while coordinating with relevant consultants
Repeat: this follows the design theory 'Recall is Hard', these pages are a quick summary showing everything that a team would need to know if they can discharge or if they need to continue with more treatment
Menu Design: build a pattern for the affordance expectations in the UI. For example, the principle menu for manipulating the viewer will always be on the left, same size with the menu items arranged by the workflow timeline
Reading Accessibility: Using infographics tha quickly push important data for decision making to the top of the hierarchy in the whole window, reducing redundant phrasing and word heavy reporting. This was an opportunity to reduce the cognitive load for people with learning disabilities like dyslexia or dyscalculia.
Visual Hierarchy: Use size, prominence and content relationships to make the most important data is easy to quickly scan and relevant context is read together
Transcribed Interview with Qualitative Data Analysis Coding
My role was to take observations from clinicians on hospital procedures and build designs to better help them treat delirium, I also educated the non-artist/designers about design theory relevant to their contributions to the project.
Is there a special reason that the fonts are the same size for the whole window? It is hard for me to generate a mental model for the flow chart of what is most important or what is an accompaniment that acts as a secondary reinforcement>
