Convergence: visualizing patient health history / Design portfolio of Smitha Prasadh

About Convergence

A Windows 8.1/Microsoft Surface app that unites data from various EHR systems to give clinicians a comprehensive, user-friendly view of a patient's health history over time.

This was done at the UPMC TDC, an innovation group within the medical center.

Convergence never went live, and was shelved shortly after I left UPMC.

A photo of a Microsoft Surface tablet with the Convergence app loaded on it. The tablet is at an angle, revealing both the screen and the hand of the person holding the tablet. — Convergence in action on a Surface tablet.

My role

For my first 6 months at the TDC, I worked on discovery, research, wireframing and prototyping, and validation.

The second 6 months were active development to get the app production-ready. I split my time between doing renderings (visual UI design) and discovery/UX/research. We did agile scrum, with 2-week sprints. I worked closely with a lead designer on the visual design, and with developers and QA on implementation details, including renderings and the overall user experience.

User research

I worked with 1 designer and 1-2 business analysts at any given time. Research was a regular part of our workloads. Some activities we'd do:

generative group whiteboarding
one-way-mirror user testing
paper prototyping
onsite validation and ethnographic observation at UPMC Presbyterian Hospital
SME validation sessions (several practicing doctors had offices at our building)

The pictured iterative brainstorming activity was one I facilitated. Several designers and BAs participated. We did 5- and 10-minute iterative sketching rounds to revisit our Timeline feature (a condensed view of a patient's medications, labs, vitals, and documents over time: several days, a week, a month, or a year). This provided a lot of qualitative value and fresh thinking that we could bring back to the broader team.

Sketches of timelines, charts, and grids on a wall, covered in sticky notes. They're the results of several quick rounds of brainstorming that I led our team in. — A quick iterative brainstorm that I facilitated to revisit our Timeline feature.

Synthesis

A couple of samples of our research synthesis docs, to share findings with our team in a fun and easily-scannable way.

While we collaborated on the synthesis, I led the synthesis sessions and other meetings with the other designers/BAs.

Note: I created this format and owned these documents. I took charge of editing/formatting/copywriting research notes, and did all the sketches and document layout/formatting.

Synthesis document, part 1. 5 columns of content: Clinical Process, Current Tools, Efficiency, Painting a Picture, Issues with Data. Each has chunks of text and sketches underneath that summarize our observations. — **Page 1:** collating our findings into thematic buckets, with sub-theme color-coding. The sketches and bold text were for easy skimming.

Synthesis document, part 2. A quick sketched column on the left showing our research and synthesis process, and then 2 columns of findings, one each for the Notes and Labs sections of the app. — **Page 2:** our overall process, and our findings as they pertained to specific portions of Convergence.

Wireframes

Visualizing complex, dense medical information in a compact way.

Note: this is all false data.

Greyscale wireframes of the left-to-right flow of patient health data. Currently, Vitals is visible. Under the labs section, abnormal values are in red text. A toggle menu is selected, letting the user switch between pertinent labs for different medical specialties. — **Vitals:** highlighting abnormal values, and a way to toggle between different types of data in that dashboard panel.

Greyscale wireframe of the Labs view: a dense series of tables that show labs values over time. Abnormal values are in red. A menu to the upper left is open that lets the user switch between labs panels quickly. — **Labs:** quickly scannable table of lab values over time, highlighting abnormal values, with an easy way to switch between panels.

Greyscale wireframes of the Complete Blood Count view under Labs. There's a table to the left showing values over time, and a graph on the right charting the values in the table. — **Labs – CBC:** drilled-in view of what an individual lab result might look like.

Black-and-white wireframes of the Notes section. This is a series of tiles of notes per day. Each shows the note type, time, and department. One is open that shows a preview of the note content. — **Notes:** concept for time-based display of patient notes pertaining to different tests and caregiver interactions.

Renderings/UI Design

Samples of the visual/UI design work I did, with art direction and design patterns provided by a lead designer.

Polished UI design - with identifying info redacted - of the timeline, or top-level, view of the app, focusing on the Vitals data. — **Vitals:** timeline/top-level view.

Polished UI design - with identifying info redacted - of the Documents view of the app. Document text labels are color-coded based on status. — **Documents:** timeline/top-level view.

Polished UI design of the doctor's view, where they can choose from their various patient lists to the left. Each list displays a tile view of the patients in that list to the right. — **Doctor's view:** seeing a list of patient lists and being able to select the apt one. This mockup just reused one patient name instead of demonstrating a list of different patients.

Polished UI design - with identifying info redacted - of a drilled-in section of the Vitals view, showing data in a table to the left and a graph to the right — **Vitals:** drilled-in view to see both a tabular view and a chart view of multiple lines of data over time.