A design library built to scale
ROLE
Product designer at Cisco
DURATION
January 2025 – October 2025
TEAM
Product designer
Content designer
Full stack developer
HIGHLIGHTS
Design systems
Atomic design
Ways of working
overview
Project TL;DR
Create a robust design library that reduces UI bugs and allows Devices to scale
Cisco's employee device management site (Devices) had a problem: we had three different designers working to quickly ship new features, yielding a "patchwork" site. With Atomic Design as my guide, I created templates and patterns that consolidated over 30 pages and reduced UI bugs by 50%.
P.S. Check out a related case study of mine about a redesign of the Devices site.
Current state
Behold, a simple "Review" page
Users are performing the same action - entering details and reviewing their order contents. So why does the same page look different in each flow?
We were all using the same bits and pieces, but we weren't using them in the same way.
Our broader organization's design system provided us with atoms and molecules, but we needed guidance on how to implement those in a standardized way, for the problems that are unique to our team.
solution
In favor of a single source of truth
We needed a design library with established patterns and templates, so each leg of the product development stool could be supported.
Design
We had three designers working quickly to launch new features, creating unintended variations along the way.
A pattern library helped us move faster AND keep in lock-step with one another.
Development
We had a great number of UI bugs in production, and our developers were building a lot from scratch.
Reusable patterns in our codebase reduced UI bugs and decreased cycle times.
Product
Users couldn't find key tasks, and we struggled to find a home for new features.
Established patterns and templates made things feel familiar for users and helped develop a more scalable content architecture.
