BrainStation

BrainStation is the global leader in digital skills training, empowering businesses and brands to succeed in the digital age.

Overview

Role

I performed the audit of the existing design system and developed the new framework and rules.

The Team

I worked with the UX Director and a Team Lead for feedback on structure and copy editing.

Duration

I worked on this for 3 months in the beginning of 2022 along side my other projects at Konrad.

Tools

Figma

Google Meet

Slack

Who is BrainStation?

Established in 2012, BrainStation has worked with over 500 instructors from the most innovative companies, developing cutting-edge, real-world digital education that has empowered more than 100,000 professionals and some of the largest corporations in the world.

They offer digital learning, giving professionals and organizations of all sizes the skills they need to thrive in the digital economy.

View the Website: BrainStation.io

Project Goal

With an ever-evolving Design System, the Konrad team worked with BrainStation to update their current design system file with more details and structure. Through research and exploration, I created a framework for each component set to ensure team members would be able to identify the correct components and their use cases.

Organization

Categories

For certain components in a design library, there can be categories and sub categories and so forth. I wanted to highlight these to give more organization and insight to what that component is.

System Tables

I was mentored by Zander Whitehurst (CEO of Memorisely and Figma Partner), where he introduced me to system tables to provide a structure of information and details for components. I adapted these for each unique component set.

Framework

Component

Each page in Figma contains a specific component within it and is located either in a Variant set and then it’s own dedicated section or in the System Tables. This depends on the complexity of the component.

Role

While working at an agency or even in-house, knowing the roles of each component can be very helpful. In each of the component types or states, the role lives within the System Table to provide more context to the user.

Accessibility

Designing with accessibility enables people with a range of abilities and disabilities to perceive, understand, navigate, interact with, and contribute to the web. If a component requires a certain level of accessibility, you will find it in the System Table.

Design Tokens

Something new! I recently introduced the use of Design Tokens to the team to help us easily name our foundations and scale our design system with quicker decisions. Every component will now be assigned a design token.

BrainStation Design System 2.0

When working on a digital product for a client or in-house, there is nothing more helpful than an organized and maintainable Design System. With a new structure, more context to components, and the introduction of design tokens, we’re helping designers and developers create new experiences faster and better.

When using this format and structure, applying it to multiple components is entirely scalable. It can be used for the Type Scale, Color Palette, Buttons, Spacing, Images, Icons, Grids, Chips, List, Navigation, Search, Shadows, and more.

Visit the Website | BrainStation.io

View more projects

AutoZone | Point of Sale

Build-A-Bear | NFT Microsite

Hello Go | E-commerce

PCL | Marketing Site