ACS Template Guide
Context
Problem
Goal
Timeframe
Oct 2024 - March 2025
Ad Content Sites (ACS) is a major part of System1, owning hundreds of websites with articles created by content writers and monetized through Google Adsense.
The business has used a custom WordPress template for these sites for over a decade, varying themes, categories, and logos. Recently, Google tightened AdSense approval rules, emphasizing higher quality and diversity in content and design.
The ACS team asked me to design new widgets to add variety to their sites. After creating a few, I chose to build a scalable widget library with multiple styles instead.
Deliverable
Figma file suitable for both developers and ACS team
My role
Product designer on the ACS team
Overview
Ad Content Sites (ACS) bring in millions of dollars each month for the company, making it an important, scalable part of the business.
The team has hundreds of domains with a variety of categories and themes, similar to blogs. All of them use the same theme.
Current website template
TopicInsight is an example of an ACS site, sharing the basic theme with others - featuring a large hero image behind a search bar and varied content layouts.
You get the idea - different websites with a multitude of articles!
Things were going great for the ACS team - the business was growing rapidly and profitable. 🤑
That was until Google tightened their AdSense restrictions, requiring variety and quality in their AdSense-approved websites. 😓
🔑 the importance of design input at a strategy level
The original ask from stakeholders was a handful of new widgets to switch up the designs of the sites.
What we ended up with was a thought-out system designed for scalability that struck the right balance between business needs and user needs. ✨
Brainstorming Session
I teamed up with other designers to lead a brainstorming session, aiming to develop a more creative and sustainable solution beyond just adding new widgets.
Insights from brainstorming sesh
We identified the business goal and design goal, and derived a solution that strikes a good balance between them.
Then, we dug deeper into this solution and identified design specifics.
Competitive review
After the brainstorming session, I conducted a competitive review of other sites similar to ACS, digital newspapers, and blogs. I focused on identifying widgets, layouts, and styles used.
✍🏽 Sketches
ok, fine...more like scribbles
As someone who enjoys writing down ideas by hand in the initial phases of a project, I filled up several pages of my notebook with ideas for how to structure this template system.
Feeling inspired from my competitive review, I drew up some wireframes for widgets and variations for those widgets.
Widget variations wireframes
I converted the wireframe sketches into low fidelity wireframes on Figma, ensuring I categorize and label all of the widgets and their variations clearly.
There were 10 widgets with at least 2 variations for each. In total, there were 30 new widgets in each style that would be added to the widget library.
Narrowing down style guides
Using competitive research and Pinterest inspiration, I narrowed down the four personalities I wanted to convey through the visual styles:
1. Bold, daring, trendy
2. Calm, soft, zen
3. Sleek, modern, minimalist
4. Friendly, clean, easy
I outlined key differences and guidelines for all four style guides to avoid any confusion among the developers.
Putting everything together
I wanted to create a go-to Figma document for the developers to refer to, both when developing the widgets, but also when creating new sites and updating existing ones.
30 widgets in 4 styles =
120 components created from scratch
me = 😵💫
Taking the time to set up variables at first would cut 120 components back to 30 - applying those variables with one click!
me = 😮💨
Tokens, variables, styles, components!
So, I took a design systems approach when tackling the setup for the Figma file. I started with the foundation, setting up variables, tokens, and styles that can be applied to components.
I set up spacing values and colors for the System UI variables - things that can be applicable to all style guides.
I then set up specific variables for each style guide - including colors, typography, and corners.
Finally, I applied theme variables - using the modes to separate out the styles. This way, the modes can easily be applied to the components to distinguish them in each style.
🔑 taking set up time to save hours later
Because I set up the system-level variables, text styles, as well as individual style guide variables, I saved countless hours by simply applying those saved variables to the new components.
I learned that using variables and modes to maximize Figma's capabilities is worth the set up time.✨
After rounds of feedback from the ACS and the other members of the design team, I finalized the Figma template guide to get ready for development.
Final Figma file
I created a cover for the file that identified the contents of the file.
I created a visual guide of the page widgets and their placement for ease of use.
I included the wireframed variations among each widget, and an overview of the style guides.
I put together all of the components in a widget sticker sheet - clearly identified by style guide and variations. This made developer handoff extremely simple, as everything was clearly detailed.
I put together the four style guides in separate websites, for easy mixing and matching of the component variations in their respective style.
Here's how components can easily be switched out in style guide 1!
Outcomes
Development started right away, with me completing QA on all components as they're created.
However, because the Figma component sticker sheet was meticulously detailed with pixel perfect variables, QA was a breeze!
I applied and gained many valuable experiences and skills with this project.
🔑
made key design decisions as the sole product designer on a leading part of the business
♿️
checked color contrast on all elements and ensured accessibility is addressed in style guidelines
🎨
dug into different styles to create four professional, sleek, and high quality website designs
⚙️
thought outside the box to create a fully working template guide system rather than a band-aid solution
🔒
maximized Figma tools to create a thoughtful, organized file that's making development a breeze
🤝
struck the balance between user and business needs - design for users and business interests!
Since using the new component guide, content writers have boosted their productivity.
Each week, 10 new sites are being published.
