Aggie Castellon Portfolio

aggiecastellon

case studies

Design System: FOCUS

Role: UX Designer

Brand: Redbox

Timeframe: 2022/24

INTRODUCTION

Project Overview

Build a flexible Design System Component Library to create cross-platform brand consistency and increase efficiency in building Redbox products.

My Role

I recognized a definite need for a Design System. There was a lot of inconsistency between screens and several missing files. The move to Figma gave me an opportunity to start fresh and build a system from scratch. I immersed myself in using the tool to find the most efficient ways.

Without support from the business, I took the initiative of building a component library on my own while working on new designs, during down time and in-between projects. I knew that it was essential for us to have, and everyone would benefit from it.

DESIGN

Design Process

Assuming the role of web lead, I started my efforts there. My goal was building a design system for an already established brand. With a set of rules and principles already in place, I began by identifying existing colors and type sizes. There was an urgent need for improvement.

I needed a single source of truth where the entire team could easily access components, share colors, icons and typography & swap conditions at a click of a button. I got rid of unnecessary clutter which consisted of duplicates that were very close in shades or size and built a more focused guide. I found 31 unique background colors used across the company and simplified into just four. Ensuring that there is consistency with typography, button sizes and most importantly spacing.

Having the opportunity to build a Design System from scratch meant that accessibility became part of the process, rather than an afterthought. I ensured that all fonts adjusted effectively across devices, confirmed that color contrasts met requisite standards and that touch targets were appropriate for mobile.

I initially spent time building missing files from scratch. Many existing files had detached components, they were manually altered and needed to be rebuilt. The atomic design principles were key to devising the component structure and creating flexible components that can be updated quickly.

Design System Components

implementation

The implementation of the design system in Figma with variables allowed me to maintain consistency across design elements while enabling flexibility in adapting to different themes and use cases. This stage involves defining and applying key design tokens, utilizing variables, and setting up styles and components for easy scalability and maintainability.

I defined primary, secondary, neutral, and accent colors. Set up text styles for headings, body text, captions, etc., and assigned them as variables. Defined spacing values for consistent margins, padding, and layout grids. Added stroke and border radius. Once the variables and styles were defined, I integrated them into reusable components such as buttons, input fields, cards to name a few. I then set up variants for different states (e.g., Default, Hover, Active, Disabled).

After setting up the design system, I ensure that the use of variables is well-documented and communicated to the design and development teams. I provided clear guidelines on how to use the variables and apply the styles and components. Include detailed instructions on how to implement the design system consistently across all platforms.

conclusion

A design system isn’t ever finished — it's a continuous progression. The set of components has been game-changing for the team. The design system has increased efficiency through a structured process, minimized unnecessary communication between designers and developers and reduced friction. As the project evolves, the design system will need to be updated. I regularly reviewed the design system, especially when major updates were made.With a successful launch and application of the Web Design System I am confident that this approach will work well for other platforms.

next study