Avianca
Modular CMS for 19 Markets
Redesigning a Latin American airline's website to enhance the user experience. By adopting a modular approach, we create a customizable and responsive CMS website.
My role
↪ Service & Interaction Designer
Timeline
↪ 6 months (extended for stability)
Design Team
↪ 3 IxD, 3 VD, 2 Leads + dev teams across 3 countries
Design Tools
↪ Sketch/Zeplin/Jira
The Stakes
Avianca had a revenue problem: 90% of ticket sales went through external channels like Expedia. Every booking meant lost margin. New digital leadership arrived in 2021 with a mission—take back control of their sales funnel.
The website was embarrassing. Desktop-only in the mobile era. Travelers pinched and zoomed to book tickets on their phones.
But here's the complexity: 19 countries across Latin America. Each needed different content, languages, promotions. The challenge wasn't just redesign—it was building a modular CMS that gave content teams freedom without chaos.
My role: translate service design strategy into Adobe Experience Manager reality.
The Challenge
A service design team handed us personas, journeys, and blueprints showing the ideal experience. Beautiful strategic work. But they didn't tell us how to build it in a modular CMS.
Our first instinct: design full-page mockups showing perfect user flows. Hand them to developers.
Three months in, the dev team said: "This is way more complex than we thought." Adobe Experience Manager doesn't work like that. You can't just design pages—you have to design within the CMS's module architecture.
We'd wasted weeks designing screens that ignored technical constraints.
The real challenge surfaced: we had two audiences with competing needs. Content teams across 19 markets needed flexibility to localize. Travelers needed consistency across the booking experience. And we had to solve both while learning CMS constraints mid-flight.
My Approach
I wasn't making strategic calls—I had senior designers and leads above me. My job: bridge the gap between service design thinking and interaction execution for a platform I didn't fully understand yet.
When the AEM complexity hit, Accenture brought in CMS experts. We pivoted to module-first thinking. Instead of perfect pages, we designed components that followed platform rules.
My approach: design core pages locked for consistency (homepage, booking flows). Build modular components for everything else. Give content teams building blocks, not blank canvases.
Should have learned the CMS architecture first. That's the lesson I took to every project after.
Translating Service Design to Screens
We started with the service team's deliverables—understanding five user personas and their journeys through booking, pre-flight, and travel. Our job: turn strategic thinking into actual interfaces across three breakpoints.
Early wireframes focused on conversion and inspiration. Homepage had to work for business travelers rushing to book and leisure travelers exploring destinations. Mobile-first this time—no more pinch-and-zoom embarrassment.
The Modular System
This is where it got interesting. Each of 19 countries needed to build custom landing pages, promotions, seasonal campaigns. We couldn't design every page—we'd never finish.
The solution: responsive modules with administration parameters. Content teams could drag, drop, and configure without touching code. Hero modules, content blocks, CTAs, media grids—all designed to work together but customizable per market.
We built parameters into each module: image placement, text alignment, CTA styles. Gave content teams enough control to localize without enough rope to break consistency.
Information Architecture Reset
The old site had scattered content across redundant pages. We simplified. Merged duplicate screens based on new IA. Identified which pages needed complete redesign vs. just a facelift with new components.
Some screens just needed new visual styling to match the updated brand. Others required complete interaction rethinking—simplified booking flows, clearer navigation, better mobile patterns.
Working with Development
We used Zeplin to centralize feedback. Started with Jira tickets but mid-project realized that was too fragmented. Zeplin let us track component-level changes, client feedback, and design updates in one place.
Every module had specs for three breakpoints. Every interaction documented. Except the ones we ran out of time to document—that came back to bite us.
The scale: 230 final screens across desktop, tablet, mobile. Not just pretty pictures—production-ready specs handed to six development teams working across time zones.
The Reality
Timeline exploded. What seemed like six months became more when developers realized modular CMS complexity. Accenture brought in specialists. We cut scope: animations gone, module variations reduced, documentation abbreviated.
Cost: components broke after launch. Responsive behaviors we didn't document caused content team headaches. "Why does this look wrong on iPad?" became a frequent question.
Win: content teams actually used the system and immediately asked for MORE modules. That's validation. Most enterprise CMS projects die from complexity. Ours worked.
23%
Increase conversion rate
markets with self-serve content
230
responsive screens
10+
nationalities, 6 dev teams
Impact & Learning
Business: Avianca shifted from 90% external sales toward digital control. 23% conversion lift measured within six months.
Scale: 230 screens deployed across 19 markets. Content teams managing their own pages without developer dependency.
What I learned: Understanding the technical platform first isn't optional—it's what separates designing pretty things from designing things that ship and scale. This project taught me to speak developers' language before touching design tools.
Before Avianca: design was about users. After: design is about users AND constraints AND platforms.