Branding

Design Systems

My Role
Web Designer
Brand Designer
Timeline
Aug-Sep 2020

Design System Management

Effective design system management is the cornerstone of creating cohesive, user-centered experiences, and in my UX portfolio, I'm excited to showcase my expertise in crafting and maintaining design systems that elevate user interfaces and streamline the design process.

Sketch vs. Figma vs. XD

As a team, we needed to ask ourselves... what software do we ultimately want to go with?

Project goals

  • Goal #1: Manage systems that were consistent, efficient, scalable, and collaborative.
  • Goal #2: Provide an organized system for working together efficiently.
  • Goal #3: Update with new elements to keep up with trends and aligned with changing user expectation.

Webster Design System

After some deliberation and discussion, the experience design team decided to make Figma the software choice for the group. Since the original system was done in Sketch, it required us to move the file from one platform to the other. Even though some of the process could be automated, we still needed to recreate a lot of components. In the process and with current project needs, we also made some updates:

  1. Added design tokens
  2. Revised buttons and added more states
  3. Updated form fields and label structure
  4. New headers/footers for specific products
  5. Added variants

Below are some samples from the updated system.

BrioDirect Design System

When I started my role at the bank, there was no design system that had been created for the digital bank. As part of my role, I created a new system for BrioDirect and applied it to all the files. I also consolidated all files and organized them efficiently for the team.

Final Thoughts

I enjoy the management and organization of design systems. One thing I noticed, the different software platforms can have different limitations which can make it more time consuming for some global updates.