INFO (RE)DESIGN: Beyond the Screen
In my original project, we aimed to shed light on a critical public health crisis: the rising rates of suicide and deteriorating mental health in the United States. We examined how rising screen time and smartphones dependence intersect with worsening health trends such as anxiety, depression, and suicide among the youth.
Design goals:
- Communicate and link suicide to anxiety, depression, and screen use
- Combine multiple datasets (CDC, AAS, Harvard) to relate cause of death, mental health indicators, and screen time in coherent way
- Make charts readable at a glance, reduce cluster, direct labeling, annotations to guide users
- Maintain visual consistency
Personal Critiques of the Original Design:
Text Heavy Narrative and Cognitive Overload:
The original post relied on long paragraphs separated by mostly static visuals. Few issues I had with this format:
- High cognitive load: The dense text required readers to remember details before seeing supporting charts, this violated the “show, then tell” principle.
- Weak visual hierarchy: Key insights, such as suicide being the second leading cause of death among people aged 10–14, were embedded in text instead of visual or typographic emphasis.
Encodings, Colour, and Consistency:
- Inconsistent design system: Charts used different palettes, fonts, and aesthetics, violating Gestalt similarity.
- Limited encodings: Several charts displayed basic values rather than trends or comparisons, failing to leverage visual variables.
Limited Interactivity:
Aside from the interactive map and minimal scrolling, users couldn’t filter, brush or link the dataset, making it nearly impossible to explore other questions that the data would have answered (filter by demographic, or focus on specific states).
I felt that the experience was one-dimensional and while it succeeded in storytelling, it failed in data exploration which limited user insight.
The Redesign: An Interactive Analytical Dashboard
Link to redesign project: https://infoviz.pythonanywhere.com/
In my redesign, I introduced a multi-panel dashboard that replaces linear storytelling with modular data-driven exploration. It emphasizes exploration, and consistency following the philosophy that data should drive discovery.
The original project examined suicide, anxiety, depression, and screen time. In this redesign, I integrate five distinct dataset for multidimensional analysis. The project explores more factors such as technological adaption, firearm ownership, mental health indicators in youth, sleep, and social media usage.
Core features:
- Unified visual systems: A cohesive light theme and a consistent colour palette. Unified typography and card-based layout make navigation intuitive, while consistent visual semantics allow users to interpret meaning instantly across panels.
- Linked analytical panels: Each view answers a different aspect of “Why are suicide rates rising, and how do mental health and technology use relate?”
- Intuitive interactions: Users explore through hover, brushing, or dropdowns, applying consistent interaction models across all panels. Interaction transforms users from readers into participants, supporting Schneiderman's overview first, zoom and filter, details-on-demand paradigm.
- Accessibility and Usability: Textual walls were replaced with brief contextual summaries, data-adjacent captions, and accessible legends.
Design Decisions and Justification by Section:
Section 1: The Geographic Landscape
Design Decision: An interactive choropleth map with coordinate detail panels (state statistics, trend line, and regional comparison bar chart).
Justification: Geographic data naturally maps to spatial encoding. The choropleth leverages preattentive processing. The heat-scale colour progression follows established conventions reducing cognitive load.
Principles:
- Schneiderman's Mantra: Overview first, zoom/filter, details on demand
- Linked Views: Clicking a state updates three coordinate panels simultaneously, enabling comparison without context switching
- Animation for Temporal Data: The play/pause button animates through years revealing trends that static visual would not show
- Gestalt Proximity: The detail panel sits adjacent to the map, signaling their relationship
Section 2: The Timeline
Design Decision: A dual-axis annotated line chart overlaying adult suicide rates with youth mental health indicators, marked with key technological milestones.
Justification: Incorporating position encoding along a common x-axis improves time-series data analysis. The dual y-axis enables comparison of variables of different magnitudes while maintaining temporal alignment.
Principles:
- Annotation as Context: Vertical band mark the iPhone launch, Instagram, TikTok, and COVID-19, transforming trends into historical narrative
- Visual Hierarchy through Colour: Uses established colour palette throughout each section. For example: Youth hopelessness = orange, Suicide = red
- Insight Callout Boxes: Data-adjacent caption shows key findings immediately below their supporting evidence
- Expressiveness Principle: Each variable encodes exactly the data it represents. Line thickness and dash patterns differentiate importance
Section 3: The Firearm Factor
Design Decision: A scatter plot with regression trendline paired with a stacked area chart showing method breakdown over time.
Get Khushbu Adhikari’s stories in your inbox
Join Medium for free to get updates from this writer.
Justification: Scatter plots are optimal for revealing correlation between two quantitative variables. The regression line and R-value give statistical context, while colour-coding by region enables pattern recognition across geographic groupings.
Principles:
- Cleveland’s Hierarchy: Position along a common scale is the most accurate encoding for quantitative comparison
- Effectiveness through Redundancy: State abbreviations appear as text labels and as hover-able points, supporting both overview scanning and precision lookup
- Linked Brushing: Clicking a point updates the detail panel, showing that state’s firearm vs. non-firearm suicide trend over time
- Statistical Annotation: The R-value and P-value displayed in a corner annotation box follows data-ink ratio principle.
Section 4: The Technology Paradox
Design Decision: A parallel structure to Section 3.
Justification: Structural repetition creates learnability.
Principles:
- Consistency Principle: Identical layout reinforces the design system
- Dropdown for Dimension Switching: Users can toggle between different factors enabling faceted exploration without page navigation
- Counter-Intuitive Findings Highlighted: Section title and description clearly frames the negative correlation, preventing misinterpretation
Section 5: The Youth Mental Health Crisis
Design Decision: A multi-trend line chart showing three youth mental health indicators.
Justification: Youth data tells a distinct story, requiring its own dedicated space. The 1991 baseline reveals the pre-digital era, making the 2009 inflection point visually striking.
Principles:
- Color Semantics: The colours are consistent throughout each visual. For example: Pink always means “Considered Suicide” across all sections.
- Insight Box Pattern: The “A Generation in Distress” callout summarizes key findings with bolded statistics, following the progressive disclosure pattern.
Section 6: Social Media & Youth
Design Decision: A horizontal bar chart showing social media usage by demographic group, with a reference line at the 77% national average.
Justification: Categorical comparison maps naturally to bar charts. Horizontal orientation accommodates long category labels without rotation.
Principles:
- Reference Line for Context: Enables users to instantly classify groups as above or below average
- Conditional Colouring: Bars above average are pink; bars below average are blue. This applies the diverging colour scale principle to categorical dimension.
- Insight panel: The adjacent card shows highest, lowest, and gap statistics dynamically, offloading cognitive calculation from the users.
Section 7: The Digital Generation Divide
Design Decision: Side-by-side chart, a dual axis line chart, and a bar chart with shared insight.
Justification: This section introduces two new variables, sleep and cyberbullying, that connect screen time to its downstream effects.
Principles:
- Tufte’s Multiplicity Principle: Placing sleep and cyberbullying side-by-side enables comparison without interaction
- Stability Annotation: The cyberbullying chart includes a horizontal average line emphasizing that rates have remained flat despite intervention efforts.
- Area Fill for Emphasis: The sleep trend uses colour fill to create visual weight, signaling this as the primary variable.
Takeaways
Over the course of the semester, I learned how foundational visualization principles translate from theory into real world design decisions. Making static visuals and moving to interactive dashboard highlighted what makes data both engaging and trustworthy. Here were my key takeaways:
Visual Consistency Reduces Cognitive Load: When the same variable is denoted using the same colour, users are able to recognize meaning from uniform design. When I assigned pink to suicidal ideation, that pink shows up everywhere on the timeline, in the youth mental health charts, and on the summary stat cards. The idea is simple: once you learn what a colour means in one place, you shouldn’t have to relearn it somewhere else. Another way to I aimed to reduce cognitive load is by incorporating existing mental models of colour-coded risk into the geographic visual. This taps into widely learned associations without requiring extra explanation.
Context is Essential: Data by itself can be misleading in many different ways. A trend line going up doesn’t tell you why it’s going up, and a strong correlation doesn’t mean causation. In the original project, there were charts that showed patterns, but they didn’t give viewers enough background to actually understand what it meant. This was an issue prevalent throughout the semester, not just this project. So in the redesign, I layered in context everywhere I could; Instagram launch, TikTok launch, and more. I also paired related data together. The firearm section goes beyond showing that states with more guns have higher suicide rates; it lets you click any state and see exactly how much of their suicide deaths involved firearms versus other methods. It can help tell a much more specific story.
Interaction Adds Depth: Static charts can only answer the question I thought to ask when looking at the data. But an interactive dashboard allows users to ask their own questions. The map is probably the best example in this project. If it was static, I’d have to pick one year to show. With the year slider and animation controls, its easy to see changes from 2000–2023 and watch how patterns evolved. The insights that come from interactive map are possible because of exploration, not from me explicitly telling people what to notice.
I found the linked panels most powerful. When you click on a state, three views update: state’s statistics, the trend line compared to national average, and a bar chart showing how it ranks against other states in it’s region. Viewers don’t have to memorize information as they switch between separate charts, because everything relevant appears together.
There are many instances in the project where I do not call out patterns explicitly because it’s something users can discover by playing with the dropdown and other interaction features.
Overall, I think data can be a lot more fun for viewers if they are able to click around and find insights on their own versus having someone highlight it for you. When you’re told a fact, you’re a passive receiver, but when you feel that you have discovered something in the data on your own, it creates ownership. But don’t take my word for it. Research in cognitive psychology calls this “generation effect”.
