A web design system can improve optimization, scalability, and quality for a website–so we built one for Logitech.com, and won an award for it.

What I did

Project: Award-Winning Apollo Design System for Logitech

Role: Writer, content strategy
Company: Logitech
year: 2022

Problem

”A design system is the official story of how an organization designs and builds digital interfaces.” - Brad Frost, Author of Atomic Design

But Logitech didn’t have an officially organized design system yet.

Various teams reached out to the web team to build special components and designs, taking up hours of time and hurting brand coherency.

In addition, onboarding processes, best practices, learnings, strategies, research, guides, tools, and resources weren’t centralized. There was no centralized source of truth.

Solution

We built Apollo, our web design system, to streamline all things web.
We streamlined our documentation on Zeroheight at design.logitech.com. We adopted Figma for design and built component and pattern libraries, templates, styles, and shared files there. And we used AEM for building on the web.
We optimized 8 projects leveraging this approach to test our system, including standardizing landing pages, product pages, hero banners, product listings, campaigns, and more.

Impact

The ROI was high: 6,052 hours saved per year, 171.6 minutes
gained per day, and $308,652 savings per year.
We won the coveted internal CIP Award for our efforts with a cash prize.

Design systems are for everyone. Apollo empowers cultural change within an org.

It’s more than just component libraries and documentation. Design systems can change how people work, communicate, and share that work. Although we have focused primarily on meeting the needs of designers, everyone can benefit from Apollo –including business groups and agencies.

Promoting the system internally

We announced the system in an all hands, delivered an internal newsletter across the company, shared a post on the company intranet, and more. All written by me.