IHG had 14 distinct brand websites, each with hard-coded, custom components. Simple updates were costly and time-consuming.
To improve efficiency, IHG planned to rebuild all brand sites on a common platform, Adobe Experience Manager 6.5, within a year. With a common code base, global updates could be made by our content authors within days instead of months.
This was also a critical part of a larger marketing initiative, implementing Adobe Target to enable personalized content.
Converting 14 unique web sites to a singular platform
I led a team of designers, collaborating with our content strategist, product managers and developers throughout this effort.
Objective
To build a useful and usable set of Figma brand libraries for AEM 6.5 components (reference architecture) that will provide a single source of truth for all teams involved and allow IHG to create responsive web pages more consistently, faster, and at scale for all guests.
Target audience
- Designers
- Product teams
- Dev teams
- Content authors
Scope and constraints
- 14 brands
- 14 components
- 3 pages per brand: homepages, Offers and Offer Details
- Keep existing content
- Minimal design changes
Discovery, Design and Development
We started by gathering the 14 PSD, PDF, and online style libraries — a wide variety of documents from various sources. There were no common breakpoints, image ratios, font styles, or components.
We then reviewed the requirements for each of 14 out-of-the-box components and mapped to our existing designs. Developers and content authors walked us through their process so that we could annotate designs accordingly.
Starting with a wireframe component library, we then mapped out the possible pattern variations for each component. Collaborating with product and dev team to identify opportunities for customization, we built out the first 6 brand component libraries.
Throughout design, we met with with stakeholders, product and dev teams to refine components based on new requirements. We trained engineers and content authors to inspect Figma files for design specs, reducing the need for additional documentation.
“These Brand Style Libraries are a game changer!”
— Stephanie Wood, Product Architect Manager
