UI
Design Systems
Digital Publishing
UI redesign of 5 websites for a digital publisher
As part of a broader design system rollout, I led the UI redesign of 5 websites over 3 months. The challenge? Deliver updated experiences without rebranding or disrupting site familiarity.
Client
GAMURS Group
Timeline
3 months over 2023–2024
Team
Creative Director
2x UX/UI Designers
3x Developers
What I did
For each site, I set up branded design tokens and page templates using a 3-step process: product review, Figma file & design tokens setup, and branded tokens application.
Context
Embarking on a quest to unite 17 disparate sites into one cohesive network with a new design system.
GAMURS Group is a digital publisher that produces written, video, and social content for 46M monthly readers across its network of 17 gaming, esports, and entertainment websites. Each site had its own codebase and component library making it difficult to manage the network at scale.
To address this, a design system initiative was launched in late-2022 to unify the network. It had three key objectives: streamline processes, ensure design and experience consistency across sites, and enable scalability of the network.
Five examples of how the original sites felt too disparate.
The design system introduced a unified UI component library and a multi-brand design tokens strategy.
But after a year in development, pressure mounted to roll it out fast—we did so with a narrowed scope.
No rebrands
Unique value propositions for each site, as well as rebranding efforts, would be undertaken as a separate task in the future. Instead, existing branding would be retained and the redesigns would be as close to the existing design as possible.
Shared templates
To expedite deployment, it was decided that every site would use the same set of page templates. Any page templates not accounted for in this set, would be designed on a per-site basis as needed.
Examples of the shared, unbranded desktop & mobile page templates created by my teammates and me.
Project Summary
Over the course of 3 months, I led the UI redesign efforts for 5 websites in the network, setting up branded design tokens and page templates using a 3-step process.
1-Product Review
Each site was audited to document its current design—fonts, colours, legacy UI features—ensuring that any changes made would preserve familiarity where possible.
2-File & Design Tokens Setup
Set up accessible colour palettes, branded design tokens, and Figma files with page templates for each site.
3-Branded Tokens Application
With files and templates ready, I applied branded design tokens to each site, tweaking as needed based on feedback.
Product review
As rebranding was out of scope, the first thing I did was audit each site's existing design, documenting fonts, colours, and legacy features.
An example of the design audit I did for one of the sites.
File & Design Tokens Setup
Using this information, I initiated the setup of Figma files, colour palette tokens, and branded token sets for each site.
These provided visual and functional guidelines for developers, ensuring accurate implementation in code, while also enabling stakeholders to review and provide feedback on the redesigns.
We used Leonardo Color to create the accessible colour palette tokens and Tokens Studio to set up the branded design tokens set.
Branded Tokens Application
Finally, I applied each site's branded tokens to its set of page templates, adjusting as needed for design consistency.
Attack of the Fanboy—before redesign; and after redesign (view the live site).
Destructoid—before redesign; and after redesign (view the live site).
Gamepur—before redesign; and after redesign (view the live site).
Siliconera—before redesign; and after redesign (view the live site).
The Escapist—before redesign; and after redesign (view the live site).
Outcomes & lessons
These redesigns were successfully deployed, but due to the pressures we encountered, there were some drawbacks and overlooked aspects.
1-Engagement metrics weren’t set up.
This made it challenging to gauge whether the redesigns positively or negatively impacted user engagement, which in turn hindered informed decision-making.
As a compromise, a quick survey was created and deployed on the Home page of each site allowing users to leave feedback. Naturally, the feedback was largely negative—users didn't want a site they were familiar with to change.
2-Using the same page templates diminished the sites' individuality.
While we were aiming for network coherence—and the templates helped with speed and consistency—the intention was never for them to appear nearly identical.
In hindsight, we should’ve pushed for small layout or pattern variations to preserve more of each site’s unique character.
3-We were encouraged to keep per-site differences to a minimum.
Sometimes, this meant making token decisions based on what was easiest to implement, rather than what was most ideal, and occasionally compromising on design intent in favour of system efficiency.
This was a constant balancing act. While it sped up deployment, it limited the overall polish of the final product.
Key Takeaway