Case study2026BoliviaCultural preservation
A product with broken identity, disconnected tokens and a blog with no exit. I audited it, researched it with users, redesigned it.
| Before | After |
|---|---|
| Different logo per section | Consistent visual identity |
| Tokens outside the build file | Token system migrated and documented |
| Navigation with href="#" - no real function | Functional navigation with ARIA semantics |
| Blog without structure - dead ends at the end | Responsive grid + contextual navigation |
| Unilateral lang="es" | Explicit lang="qu" + ARIA on key components |
| User | Age / Device | Task 1 - Discoverability | Task 2 - Interface | Task 3 - Share |
|---|---|---|---|---|
| Belén | 26 / Desktop | Quick success - visual noise | Oversized menu | Failure - flow non-existent |
| Juan Pablo | 20 / Mobile | Late success - high friction | Critical bugs present | Failure - distraction |
| Pedro | 25 / Desktop | Abandonment - went to Google | Broken routing | Manual success - copied URL |
| Camila | 23 / Desktop | Mid success - fatigue | No editorial structure | Abandonment - text density |
| Diego | 28 / Mobile | High cognitive friction | No summaries visible | Low engagement |
"I had to Google it because from the app I couldn't figure out how to get back to the blog."
- Pedro, 25, advanced technical user
No contextual navigation at the end of each article. Only exit: the back button.
Cards without hierarchy created decision fatigue before the user even started reading.
No participant successfully shared an article from the interface. One copied the URL manually.
Different logos, incorrect tokens, missing favicon. No sustained visual coherence.
Migrated the official palette to the correct file, removed all hardcoded hex values, and formally documented the palette. The qumir, caramel, yawar palette - now as tokens, not loose values.
Responsive grid with breakpoints (1/2/3 columns), fixed 16:10 aspect containers, ~140-character excerpt, and estimated reading time visible on each card.
Web Share API with clipboard fallback in browsers without native support. Accessible toast with role="status" as confirmation. One participant had manually copied the URL from the address bar.
Migration to slug-based routes with contextual navigation at the end of each article. Double benefit: usability and SEO. Dead ends eliminated.
Explicit lang="qu" labelling on Quechua content blocks, ARIA labels and semantic roles in navigation. Preserving an indigenous language means making it accessible to everyone - including those who use assistive technology.
"Preserving an indigenous language means making it accessible to everyone - including screen reader users."
- Design decision #05