Bringing Mobile Outbreak Insights to Frontline Workers
Fathom Information Design
Summer 2025
CONTEXT
Designer
3-week side project
TOOLS
Figma
Javascript
HTML & CSS
SKILLS
Mobile IA
Adaptive Workflows
Rapid Prototyping
THE PROBLEM
Lookout displays genomic, clinical, and epidemiological data to support real-time public health decision making during outbreaks. It runs on static HTML/CSS/JS for reliability under unstable internet.
While fast to deploy and easy to use, Lookout was built for desktop. On mobile, where many health officials access data in the field, users have to squint at tiny text and figures. This mobile redesign focused on the following guiding principles:
TWO DEVICES, TWO STORIES
Desktop
“Let me dive deep into the data to uncover drivers and clinical patterns"
Mobile
“I need insights on this outbreak that I can act on at-a-glance”
Defining the different Jobs-to-Be-Done shaped how I prioritized content and simplified interactions to adapt the dashboard both visually and functionally to different usage contexts.
INTERACTION REDESIGN
Lookout is highly interactive, but many of these behaviors don’t translate well to mobile. Mobile browsers lack hover states, and dragging/swiping can conflict with browser navigation. Tap targets may be too small, and hidden interactions increase cognitive load.
In the redesign, I focused on making key insights visible by default and minimizing the need to tap.
Led with interaction
At the top, users make simple but critical choices: view cases by day vs. cumulative and select their district of interest. Distinct visual cues helped users instantly recognize which view they were in.
Surfaced key stats
Text-based summaries on content cards reduce taps, surfacing the most important numbers upfront. Due to development complexity, I avoided time-range sliders and anchored daily readouts around a 7-day window.
Cut clutter
Complex visuals like patient records and phylogenetic trees didn’t translate well to mobile. Removing them avoided zooming and clumsy navigation.
Deprioritized filters
Filters were important but not urgent. I tucked the tool behind an icon to preserve space and focus.
Improved readability
Increased font sizes and contrast across core components for readability in the field.
SCALABILITY
Lookout is meant to be customizable for any outbreak. I reused existing components to support additional diseases, metrics, and data types. This modular approach ensures the design scales to different dashboards without sacrificing clarity.
Reflection
Function over flourish
Lookout is driven by function. By stripping away consideration of aesthetics and animations, this truly taught me the power of considering design at their functional core. Even small details—like choosing raw counts vs. percentages—changed the clarity of insights.
Designing for messy data
Real-world epidemiological data is incomplete and inconsistent. Some features I wanted (e.g., geographic trend readouts) weren’t possible with available data. This forced me to design around data constraints.
Collaboration defines feasibility
Many of my initial ideas ran into technical limits. Working with developers shaped my thinking: good design anticipates implementation reality.
Acknowledgements
I’m grateful to have had the privilege of receiving mentorship from Ben Fry, Pardis Sabeti, Chase Van Amburg, Karlie Zhao, and Ellory Lanning over the course of this project.
© 2026 Xinyi Christine Zhang