DESIGN SYSTEM FOR AGENCIES

View Figma File
The Team

UX Designer

Me

Director of User Experience

Software Engineer

UI Designer

The Client

Portland Webworks

The Tools

Figma

the challenge

CREATING AN AGENCY DESIGN SYSTem

Design systems create consistency across a product (or products) by providing reusable components and clear guidelines. They allow designers to iterate quickly and focus on research efforts instead of reinventing patterns. Design systems are a natural fit for software companies but pose challenges for agencies. Applying a design system can be challenging because no two clients are the same. Each client brings its own branding, goals, and technical constraints to the table.

I took on the task of creating a design system for my team that was made up of prebuilt components and that would be used as a starting point for the UX Designers. I wanted it to be customizable and scalable, so it could be adjusted to each diverse client. As communication is an essential part of design, I considered what I could include to enable better communication between designers and developers. The result was a set of components and a documentation template that team members use to design more efficiently and enhance communication.

enhanced collaboration

I met with Software Developers and Project Managers to understand areas of the hand off process that could be improved. I asked them to show me how their workflow when building our designs and what their pain points are. They voiced challenges with managing multiple design files, understanding what designs were final, and not knowing the behavior of a component. To address these issues, I created this set of components used to keep files organized and capture details with documentation.