This design sprint explored 5 distinct UI concepts for Chronicle's digital historical archive, a platform tracking international conflicts through verified sources and oral history. Each concept was developed with full HTML/CSS mockups across 4 screens (Homepage, Conflict page, Event detail, Mobile view), complete with design tokens, component specs, and responsive breakpoints.
The evaluation included usability scoring across 8 criteria, persona fit analysis for 3 user types, and a comprehensive accessibility audit against WCAG 2.1 AA standards. 18 reference sites were analyzed to inform the design patterns.
Newspaper-inspired editorial design leads overall with the highest trust (9) and learnability (9) scores. Consistently strong across all criteria with no score below 6.
Signal, Witness, and Mosaic each score 56 but with very different strength profiles. Signal excels at density, Witness at emotional resonance, Mosaic at mobile.
No single concept serves all personas. The recommended build combines The Record's structure + Signal's filter bar + Witness's oral history + Atlas's timeline scrubber + Mosaic's mobile strategy.
All 5 concepts lack visible focus indicators. Signal/Atlas use 15px body text (below 16px minimum). Atlas has severe contrast failures and blocks pinch-zoom.
Every credible archive uses a restrained color palette. Sensational colors undermine credibility. Neutral base, purposeful accents only for semantic meaning.
Serif or distinctive heading face for editorial authority, clean sans-serif for UI. Monospace for metadata (timestamps, source IDs).
Liveuamap, Crisis Group, and ACLED all pair geographic visualization with event feeds. Map as primary context, feed as secondary navigation.
The Pudding, Mapbox, and Reuters Graphics use scroll-driven narratives with sticky visualizations for data-driven storytelling.
Modular cards with consistent image-text-metadata structure. Cards scale across breakpoints and work naturally with filtering/sorting.
Syrian Archive's collect-preserve-process-verify-investigate flow builds trust by showing methodology. Surface source verification visually.
Use color semantically, not decoratively. Source tiers and conflicts each need distinct, accessible color assignments passing WCAG contrast.
Start sparse, reveal on demand. Expandable footnotes, "gas and brake" pacing, reactive cells let users control density.
Light, editorial, newspaper-inspired design that builds trust through typography and whitespace.
Dark, data-forward intelligence dashboard with monospace accents and real-time monitoring aesthetic.
Warm, human, story-first design that foregrounds oral history with documentary intimacy.
Map-centric, geographic interface where the map IS the primary navigation surface.
Bold, modern, card-heavy magazine layout with vibrant per-conflict accent colors.
| Dimension | The Record | Signal | Witness | Atlas | Mosaic |
|---|---|---|---|---|---|
| Theme | Light | Dark | Dark (warm) | Dark (navy) | Dark (true) |
| Background | #FAFAF7 | #0D0D0F | #1C1917 | #0F172A | #09090B |
| Accent Color | #2D3A8C | #22D3EE | #D97706 | #EF4444 | #F43F5E |
| Heading Font | Libre Baskerville | Inter | Lora | DM Sans | Inter |
| Body Size | 16px | 15px | 17px | 15px | 15px |
| Layout | Columns | Map + Feed | Single-column | Full Map | Masonry Grid |
| Density | Medium | High | Low | High | Medium-high |
| Tone | Newspaper | Control Room | Documentary | Cartographic | Magazine |
| Primary User | General Reader | Analyst | General Public | Researcher | Broad Audience |
| Oral History | Integrated | Data Point | Centerpiece | Map Marker | Colorful Card |
| Mobile Strategy | Stacked columns | Feed only | Scrolling narrative | Map + sheet | Single column cards |
| Criterion | The Record | Signal | Witness | Atlas | Mosaic |
|---|---|---|---|---|---|
| First impression / trust | 9 | 7 | 8 | 7 | 6 |
| Information density | 7 | 9 | 4 | 8 | 8 |
| Emotional resonance | 6 | 5 | 10 | 4 | 6 |
| Learnability | 9 | 6 | 8 | 5 | 7 |
| Mobile usability | 8 | 7 | 8 | 6 | 8 |
| Accessibility | 7 | 5 | 8 | 5 | 6 |
| Source distinction | 7 | 9 | 6 | 7 | 8 |
| Scalability | 7 | 8 | 4 | 9 | 7 |
| Total | 60 | 56 | 56 | 51 | 56 |
Scans headlines, reads 1-2 articles, on mobile
Deep dives, cross-references, desktop power user
Systematic analysis, uses search, exports data
| Criterion | The Record | Signal | Witness | Atlas | Mosaic |
|---|---|---|---|---|---|
| Color contrast | Partial | Fail | Partial | Fail | Partial |
| Color reliance | Pass | Pass | Pass | Pass | Pass |
| Screen reader | Pass | Partial | Pass | Fail | Partial |
| Keyboard nav | Partial | Partial | Partial | Fail | Partial |
| Motion / animation | Pass | Partial | Pass | Partial | Pass |
| Font sizes | Partial | Fail | Pass | Fail | Partial |
The Record wins overall (60/80), but no single concept serves all three personas. The strongest Chronicle design combines elements from multiple concepts:
Critical fixes needed across all concepts: Add visible focus indicators (2px accent outline), raise body text to 16px minimum, raise metadata minimum to 13px, add prefers-reduced-motion queries, add proper ARIA roles to interactive divs, fix contrast failures in Atlas and Signal.
Collected feedback grouped by section.