Building a Design System: Case Study
OVERVIEW
The Connect K-12 Design System is the single source of truth. It includes design principles, brand identity, components, patterns, icons, and guidelines, to allow the Connect K-12 team to design and develop the product.
I created a robust design system to make design agile, rebranding faster, and developer and partner handoff easier. This system allowed our combined design and development team to rebrand the product in less than 30 minutes.
ROLE
Senior UX/UI Designer I lead the end-to-end process of building and handing off a design system to developers and to our acquiring partner organizations.
Research and component inventory
Used the atomic design method to design and build
Paired with developers to implement
Documentation
Understanding the problem
Lacking a fast and easy way to update brand identity and styling could slow down the design and development process and make us miss our deadline
KEY PROBLEM
An external partner organization would acquire Connect K-12 for maintenance post-launch and I had to ensure the success of the product’s rebranding before it was no longer in-house.
BUSINESS OBJECTIVE
Ensure on-time delivery of our product, keeping in mind the late-term rebranding and need for clear design documentation and handoff.
Getting to a solution
Building a design system: Making design agile, rebranding faster, and handoff easier
HYPOTHESIS
A well-maintained design system means time savings for your designers and developers, fast and easy brand identity updates, and easier developer and partner handoff due to collaboration and documentation.
THE SOLUTION
A scalable, adaptable design system that includes design principles, brand identity, components, patterns, icons, and guidelines that will make the rebrand easy and efficient.
THE GOALS
The goals of creating a Design System is to:
Save a lot of design time
Ensure UI consistency
Reduce complexity and ambiguity
Enable and facilitate collaboration and consensus
Allow for faster, systematic updates
01 Research
I studied existing design system guidelines, best practices, and the best tools for the job
This was my first foray at building a design system from scratch, so I started this project with extensive research. I read articles, watched tutorials, and studied existing design system guidelines that Google, Apple, and Facebook created. I also researched best practices and the best tools for the job and landed on using Sketch for creation, Abstract for version control, and zeplin.io for developer handoff.
02 Inventory
I gathered a list of components from prototypes and built them in Sketch
It was quite an undertaking, but I trusted the outcome would be worth it. I adhered to best practices regarding naming conventions and categorization to ensure design choices were cohesive and justified. I created grid structures, chose colors and typography, built buttons, filters, form elements, tables, icons, illustrations, and map components.
03 Branding round 1
Using existing branding design guidelines to build a placeholder brand identity
Knowing I didn’t want to spend too much time futzing with brand colors and typography that would ultimately be replaced, I chose to use the brand typeface and a tertiary color from the existing brand guidelines as the products primary color to differentiate it visually from EducationSuperHighway’s (ESH) existing products for both internal and external review. I used these colors in mid/high-fidelity prototypes and testing.
04 Branding round 2
Bridging two partner brands into one web application
Once we knew which organizations would be acquiring our tool, I went to work meeting with their marketing departments, gathering their existing branding documentation, and doing audits of their current websites to gain insight on how their brands could be leveraged and melded to complement this stand-alone product they would both be overseeing.
User feedback on branding
Through comprehensive testing of the placeholder branding we learned that users really liked:
the use of subtle subtle colors in the navigation and background elements and the high saturation colors of the data visualizations to help focus their attention.
The approachability of our sans-serif font.
Based on this feedback I decided to stay with the softer tones so that data could shine and stick with a sans-serif font while creating the brand update first drafts. Thankfully both organizations’ primary brand colors contained different hues and saturations of blue and red. So I pulled inspiration from both of their palettes to create the first draft mockups of Connect K-12’s new branding look and feel.
Partner feedback on branding and final designs
Ultimately, our acquiring partners wanted a mix of the blue and red first draft versions for the final Connect K-12 branding.
05 Final design system
Colors, Tones, and Gradients
I chose the primary color Ocean Boat blue as a more vibrant representation of the two partners blue brand colors and this vibrancy made tints of this color subtle yet bright throughout the Connect K-12 product. The secondary colors are informed by both partners brand colors, I used these colors as accents. I brought a few additional colors and tints to the palette in our data visualizations, to make them stand out and really shine. And last but not least, our shades of gray and gradient background.
Typography
To ensure ease of reading on all devices I was sure that I wanted to use a modern sans-serif font. All three of our brands rely heavily on sans-serif fonts. Knowing we’d be handing off our marketing efforts to our partner, Connected Nation, I decided to go with their main brand font Axiforma.
Logo and logomarks
For the logo design, I teamed up with our product marketing manager and graphic designer in marketing and we developed a clean modern logo and logomark for Connect K-12.
Custom icon set
I designed a custom set of icons used in navigation, actions, and to convey information throughout the application.
Grid and Layout
To ensure Connect K-12 had visual balance and consistency across layouts, I used a responsive layout grid for the placement of components and elements that adapt to screen sizes. I predominantly used an 8dp grid to align to spacing and the overall layout, allowing for small elements and type to be aligned to a 4dp grid.
Atomic Design and UI Components
I used the atomic design method creating atoms such as buttons, inputs, labels etc. that had a focused single-use and used them as building blocks to create the components used in the app.
Efficient developer handoff using Zeplin
To give our developers access to the styles, icons, and components quickly I used Zeplin.io. Building the style guides and components library in Sketch made importing it in Zeplin very easy and efficient, and the tool allowed developers to hover and click around to choose what CSS and SVGs they wanted to export without distraction.
06 The results
As a designer:
It began to pay off for me immediately by:
allowing me to design in a fraction of the time
facilitating quick updates to fonts and colors in the style libraries that then cascaded throughout 56 artboards in Sketch, and uploaded to Zeplin seamlessly
allowing our combined design and development team to rebrand the product in less than 30 minutes.
As a team:
It allowed us to make sweeping branding changes in a complex app by using consistent generic variable names in the Sketch design files, Zeplin, and the app style guides.
As an asset for partner handoff:
It allowed for clear documentation and proved easy for future design resources to make branding and style updates.
07 What I learned
This project taught me several things. It gave me the opportunity to:
study some of the best design systems currently in use,
improve my Sketch app skills with Sketch Libraries, naming and organizing text styles, color variables, and creating responsive components, as well using real data to flow into designs;
get comfortable with Abstract as a version control software,
collaborate and learn from my development team taking a systems thinking approach to solving this problem.