## Overview

![El Universo redesigned mobile homepage showing improved editorial hierarchy with clear content sections, navigation, and improved readability](/img/case-study/el-universo/hero_home_mobile_new.png) When I started working with El Universo in 2020, the numbers told a clear story: 73% of their traffic came from mobile devices, but the experience was built for desktop. Users struggled to find content, navigation felt like a maze, and the visual language was inconsistent across hundreds of pages. The pandemic had accelerated digital news consumption, but their platform wasn't ready for it. I realized early on that this wasn't just a redesign project. It was a foundation problem. Rather than redesigning screens one by one, I made a strategic decision: build the design system first. This meant creating "Trama". A comprehensive UI foundation with 23 reusable components, clear typography hierarchy, and responsive patterns that could scale across all editorial templates. The result? What used to take designers 3 days to build a new page template now took 4 hours. The system enabled the team to launch 3 new editorial verticals without adding designers. Most importantly, tree testing scores jumped from 27% to 71%. Users could finally find what they were looking for. This taught me that sometimes the best design decision isn't about pixels. It's about building infrastructure that lets teams move faster and users navigate with confidence. ## The problem

The existing experience had multiple problems competing for attention. Navigation was complex and unintuitive. Users couldn't find content even when they knew it existed. The mobile experience felt like an afterthought, despite being where most users actually consumed news. Visual hierarchy was weak, making it hard to distinguish between important stories and filler content. Long form articles felt heavy and exhausting to read. And worst of all, the visual language was inconsistent. Different sections looked like they belonged to different products. ## The challenge

The challenge went beyond visual polish. We needed to structure a complex editorial ecosystem, improve mobile usability, and create a visual foundation that could scale. All while supporting business goals such as subscriptions. Working with UX researcher Luis Moreira, we discovered the real problems through data. Tree testing revealed that only 27% of users could successfully complete navigation tasks. This wasn't a design preference issue. It was a fundamental usability failure. The business impact was clear: subscription revenue was only 8% of what it could be, largely because users couldn't find premium content or understand the value proposition. I realized we needed to approach this differently. Instead of redesigning pages in isolation, we needed to understand the entire information architecture first. Luis's research showed us that users expected different navigation patterns on mobile versus desktop. Something that seemed obvious in hindsight, but wasn't reflected in the existing design at all. The real challenge was balancing speed with quality. The team needed to ship improvements quickly, but we also needed a foundation that would scale. This is where I made the call to invest in the design system upfront. A decision that felt risky at the time, but proved essential for long term success. ## Scope

![Figma design files showing page templates, components, and design system structure for El Universo redesign project](/img/case-study/el-universo/figma_files.png) What was designed: - Home page - Section page - Subsection page - Internal page (article) - UI & Design System foundation (Trama) ### Tool Stack **Design & Prototyping:** - Figma (design, prototypes, handoff) **Planning & Documentation:** - Whimsical (wireframes, user flows) - Notion (documentation, 120+ pages) **Communication & Testing:** - Zoom (interviews, user testing) - Slack (team communication) ## Team

**UI Design & Design System** Jetto González **UX Research & Strategy** [Luis Moreira](https://www.linkedin.com/in/luismoreiranoboa/) ## Mobile first approach

Luis Moreira's UX research revealed something crucial: 73% of users were on mobile, but the experience was designed for desktop. This wasn't just a layout problem. It was an architecture problem. I realized that if we designed mobile first, we'd force ourselves to prioritize what actually mattered. Content that worked on a small screen would work anywhere. This led to my decision to build the design system first, before any page templates. I named it "Trama" after the ink pattern left on newsprint. The physical texture of printed newspaper. This name connected our digital system to El Universo's heritage as a print newspaper, honoring the tactile quality of traditional journalism while building for the digital future. The subtle off white background color was inspired by the warm tone of newsprint paper. For typography, I chose Roboto for UI elements and Merriweather for editorial content. Roboto gave us the modern clarity needed for interface components, while Merriweather provided the editorial warmth and readability essential for long form reading. This combination balanced technical requirements with emotional resonance. The system-first approach paid off immediately. What used to take designers 3 days to build a new page template. Creating components from scratch, establishing spacing, defining typography. Now took 4 hours. They could pull components from the library, follow established patterns, and focus on content structure instead of reinventing the wheel. ## Key design decisions

### Reading first ![El Universo redesigned article page layout optimized for reading with improved typography, spacing, contrast, and clear content hierarchy](/img/case-study/el-universo/article_new.png) The principle was simple: if users can't read comfortably, nothing else matters. I refined typography, contrast, and vertical rhythm to support long reading sessions and reduce cognitive load. Merriweather for body text provided the editorial warmth readers expected, while Roboto for UI elements kept the interface modern and clear. The result was articles that felt inviting rather than exhausting. Users could read for 20 minutes without eye strain. ### Clear hierarchy ![Section page hierarchy detail showing consistent patterns for headlines, metadata, content blocks, and visual organization in El Universo redesign](/img/case-study/el-universo/section_hierarchy.png) I established consistent hierarchy patterns for headlines, metadata, and content blocks. The decision was to use size, weight, and spacing. Not color. To create distinction. This meant a headline always looked like a headline, metadata always looked like metadata, regardless of section. The result was immediate clarity: users could scan pages faster and understand content relationships without thinking. ### Context Appropriate Navigation ![Navigation patterns showing how sections and subsections are organized and accessed across different pages in El Universo redesign](/img/case-study/el-universo/navigation_patterns.png) My first navigation design was wrong. I tried to create a single navigation pattern that worked identically on desktop and mobile. Forcing visual consistency at the expense of usability. Tree testing showed users struggling on both platforms. This taught me an important lesson: platform conventions beat visual consistency. I realized desktop users expect information dense hover interactions. They have screen real estate and mouse precision. So I designed a persistent horizontal bar with hover based mega dropdowns. Always visible, no clicks required. The dropdowns revealed two column layouts: subsection hierarchy on the left, featured modules like MARCADOR and PARTIDOS EN VIVO on the right. This gave desktop users the information density they expected. Mobile was completely different. Users expect progressive disclosure through drawer patterns. I designed a hidden drawer triggered by a hamburger icon, sliding in from the left with a dark overlay. The same 8 sections (PORTADA, LO ÚLTIMO, NOTICIAS, OPINIÓN, DEPORTES, ENTRETENIMIENTO, CULTURA, TECNOLOGÍA) stacked vertically with tap to expand accordion behavior. Two tabs separated NOTICIAS from SUSCRÍBETE, and the subscribe CTA lived inside the drawer, not the header. This approach respected platform conventions: desktop users got information dense hover menus, mobile users got progressive disclosure through drawer patterns. Visual consistency mattered where it counted. Component design, typography, spacing. But interaction patterns were optimized for each platform's strengths. The tree testing scores reflected this: navigation success jumped from 27% to 71%. ## UI & Design System

I approached the design system as a product, not a deliverable. This meant 120+ pages of documentation in Notion. Not just component specs, but decision rationale, usage guidelines, and edge cases. The goal was independence: could a designer or developer build a new page without asking me questions? The answer needed to be yes. The system included 23 components organized across content, navigation, interactive, subscription, and UI elements. Font Awesome provided ~40 icons via CDN for rapid implementation. A comprehensive color system ensured WCAG AA compliance with brand aligned colors, semantic states, and accessible contrast ratios throughout. The real test came when the team launched 3 new editorial verticals without adding designers. They pulled components from the library, followed established patterns, and shipped faster than ever before. This taught me that a well documented system isn't overhead. It's leverage. The 120 pages of documentation meant I didn't have to be in every design review or answer every question. The system spoke for itself. What used to take 3 days now took 4 hours. But more importantly, the foundation enabled growth: new verticals, new features, new designers. All building on the same foundation without breaking consistency. ## Handoff

![Design handoff documentation showing component specifications, responsive behaviors, spacing rules, and developer ready design system guidelines for El Universo](/img/case-study/el-universo/handoff.png) The system was designed with handoff in mind from day one, reducing friction between design and development through clear responsive behaviors and reusable components. ## Subscription and monetization

![Subscription and monetization user states showing free user experience, subscriber benefits, and paywall interactions in El Universo redesign](/img/case-study/el-universo/subscription_states.png) Different user states were considered, clearly communicating the value of exclusive content and supporting a sustainable monetization strategy. ## Outcome

![El Universo redesigned homepage showing improved layout, clearer navigation, better content hierarchy, and enhanced mobile experience](/img/case-study/el-universo/outcome.png) I'll be honest: I don't have post launch metrics. The project ended before we could track long term engagement or conversion rates. But I do have the data that matters most: tree testing scores improved from 27% to 71%. Users could finally find what they were looking for. The real outcome wasn't in the screens we designed. It was in the foundation we built. The design system enabled the team to launch 3 new editorial verticals without adding designers. Page template creation went from 3 days to 4 hours. Most importantly, the system created independence: designers and developers could build new pages without constant questions or reviews. This taught me that sometimes the best design outcome isn't measured in clicks or conversions. It's measured in team velocity and user confidence. The foundation we built wasn't just about consistency. It was about enabling growth. And that's what happened: the team moved faster, users navigated with confidence, and the product could scale without breaking. ## Learnings

### Designing for reading means designing for clarity When I started, I thought typography was about choosing fonts. I learned it's about creating conditions for comfortable reading. Merriweather for body text, generous line-height, subtle contrast. These weren't aesthetic choices, they were accessibility choices. Users could read for 20 minutes without eye strain. This taught me that clarity isn't a feature. It's the foundation. ### Mobile defines architecture, not just layout 73% of traffic was mobile, but the experience was built for desktop. I realized that mobile first wasn't just a layout approach. It was an architecture approach. If content worked on a small screen, it worked anywhere. But more importantly, mobile constraints forced us to prioritize what actually mattered. This taught me that constraints aren't limitations. They're clarifiers. ### Strong systems reduce complexity I thought building a design system would add complexity. Instead, it reduced it. What used to take 3 days now took 4 hours. What used to require constant questions now had clear answers in documentation. The system didn't add overhead. It removed friction. This taught me that good systems don't constrain creativity. They enable it. ### Platform conventions beat visual consistency My first navigation design tried to be identical on desktop and mobile. Tree testing showed users struggling on both. I learned that platform conventions matter more than visual consistency. Desktop users expect hover menus, mobile users expect drawer patterns. Respecting these conventions improved navigation success from 27% to 71%. This taught me that user expectations beat designer preferences. ### Foundation enables growth The real test came when the team launched 3 new verticals without adding designers. They pulled components, followed patterns, and shipped faster than ever. This taught me that a well documented system isn't overhead. It's leverage. The foundation we built enabled growth without breaking consistency. ## Deliverables

- Editorial templates (Home, Section, Subsection, Article) - UI & Design System foundation (Trama) - Responsive rules and breakpoints - Handoff ready components and guidelines