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 refactored existing components to support additional diseases and data types. Using a modular approach ensures the design scales to different dashboards without sacrificing clarity.
Key takeaways
Function over flourish
Lookout is designed to be lightweight. By stripping away consideration of aesthetics and animations, this project taught me the power of considering design at its functional core.
Design around data constraints
Real-world epidemiological data is incomplete and inconsistent. Some features I wanted (e.g., geographic trend readouts) weren’t possible with available data.
Collaboration defines feasibility
Many of my initial ideas ran into technical limits. Working with developers shaped my thinking around 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