Product Screens & Design Rationale
7 screens · product craft first▶ Launch PrototypeOpens interactive prototype in a new tab
Group 01
Polished Product Interface Screens
These screens show how dense social volatility data can be turned into a readable intelligence product with clear regional status, trend interpretation, and second-level analysis paths.
Product Screen 01
Hi-Fi — Dashboard Overview
High-fidelity dashboard showing the Egypt STX score of 76, Social Volatility Index at 14, Social Drivers breakdown across Civil Unrest, Governance, Economic, and Security — with weekly calendar scroll and inbox alerts.
View Full Image ↗
Design rationale: The dashboard prioritizes quick scan: region, volatility status, index scores, and recent changes are grouped for rapid situational awareness.
Product Screen 02
Hi-Fi — Volatility Detail View
Expanded Social Volatility Index view featuring a 20-day area chart mapping deviation points over time, contextual analysis narrative, and a collapsed Social Drivers summary — designed for deep-dive instability review.
View Full Image ↗
Design rationale: The detail view supports interpretation by pairing volatility scores with drivers, context, and drill-down patterns.
Product Screen 03
Hi-Fi — STX Trend Chart
Expanded Social Threat Index view with a full-width trend chart scaled 0–100, color-banded from green to red for instability thresholds, with contextual analysis text and collapsed SVX and Social Drivers rows below.
View Full Image ↗
Design rationale: The trend chart turns index movement into a time-based reading experience so analysts can compare direction, severity, and change over time.
Product Screen 04
Hi-Fi — Overview & Narrative Analysis
Overview dropdown view displaying the full analytical narrative for the selected date period — synthesizing political events, social media signals, and protest activity into a structured regional threat summary with indexed scores below.
View Full Image ↗
Design rationale: Narrative analysis gives meaning to the numbers, connecting metrics to human-readable interpretation and next-step understanding.
Group 02
Workflow & Wireframe Foundation
These artifacts show the journey, IA, and early interaction structure behind the final tablet experience.
Strategy Artifact 01
User & Platform Journey
End-to-end flow map across five stages — Region Selection, Dashboard Overview, Review Volatility, Second-Level Analysis, and Receive Alerts — with parallel user and platform journey tracks annotated at each stage.
View Full Image ↗
Design rationale: The journey map makes the product model visible before UI decisions: user intent and platform behavior are mapped together so the final interface can support analysis rather than disconnected browsing.
Strategy Artifact 02
Lo-Fi Wireframe — Layout & Structure
Annotated lo-fi wireframe documenting the primary screen architecture — header area, second-level alerts, tertiary date scroll, overview content area, and social media analysis sections with interaction callouts.
View Full Image ↗
Design rationale: Early layout work establishes hierarchy before visual polish, separating global navigation, date controls, alert states, and content zones.
Strategy Artifact 03
Lo-Fi Wireframe — Navigation & Analysis
Second lo-fi wireframe detailing intuitive navigation patterns, dynamic threat index display, interactive trend graph, second-level insights, and targeted analytics — annotated with interaction and content callouts.
View Full Image ↗
Design rationale: The wireframe resolves how analysts move from overview to deeper analysis without losing orientation or context.