Pixel Platform Design System
Product Design - Design System
Introduction
Building a design system in a fast-paced startup to increase efficiency and facilitate collaboration.
My Role
Product Designer
Team
Me
1 Software Engineers
Timeline
Initial Setup:
March, 2022
​
Maintenance:
2022 - 2023
Skills
Design System
UI Design
PM
Why We Need a Design System
When I was in design school, I learned that the usual steps to build a new product was to create a design system, then design the product. But when I joined Pixel Canvas, an early stage startup, it became clear to me that the real world doesn’t work like how they say in the textbooks: we designed and implemented an entire SaaS platform without having any time or resources to make a design system.
​
Since the birth of the Pixel Platform, we have been using it to streamline a dozen virtual events or RFPs. It seemed to be working alright, until one day the development team sent a screenshot of the 20+ dark purples that were being implemented on the platform.
We knew that the design team had to create a design system to reduce complexity and save time in the long run for cross-functional teams.
The list of different “purples” on the platform
Research: How to Make a Design System?
At the start of this project, I had only a vague idea of what to do, so I did some hefty research to find out how to make a design system for a complex and growing web application. I read many design articles, and studied the major brand’s design guidelines such as Google Material Design, Atlassian Design Language, Quickbooks Design System, IBM Design Language, Adobe Spectrum.
The layout of Atlassian’s products closely resembled that of Pixel Platform
Adobe Spectrum's variety helps me find design spec references for our components
Strategize: Maximize Impact in a Limited Time
A design system is like a user’s manual of the product for designers and developers. We could make instructions for every little UI element, but that would definitely take longer than the 3 weeks time given for the project.
What should I include in this first design system to maximize the use of the previous UI kit and efficiently address the UI issues?
​
I took a closer look at the UI kit built by another team member as well as the latest compilation of Pixel Platform mockups, and found that our biggest issues are inconsistency and ambiguity: the same type of component had different sizes and colors across platform, and there were no responsive grid to ground the designs. I did a lot of thinking and came up with my own plan:
​
1. Compile and sort all assets
2. Define guidelines for spacing, colors, and typography
3. Consolidate components using the new guidelines
Inventory
Collecting the assets was relatively simple. Since the design team already had an (outdated) UI Kit, I used it as a base and added more components. For typography, I used a Xd document to collect all types of texts that ever appeared in a mockup. But when it came to collecting colors, it was a difficult task.
The outdated UI Kit
When the team designed the platform, we wanted it to stand out and be chic. The end result looked cool with vibrant colors and dark mode design, but we did go a bit overboard with the number of colors used. The older UI Kit has a section dedicated to colors collection that was incomplete and difficult to organize. If only there was a system to sort and eliminate colors based on how frequently they appear and how similar they are to other colors!
I Used an Excel Sheet to Organize the Colors
I came up with an idea to turn the color palette into an excel sheet. For every color in the design, I listed out its HEX code, location, and category. This way I am able to collect all colors in an organized manner.
Before: Old UI Kit Color Collection
After: Color Organization Excel Sheet
Define
Consolidating Background Colors
By sorting the color HEX codes from low to high, I understood which colors are used most often and which colors are most similar to each other. The heavily used colors should be kept in the new design system, while similar colors can be combined or reduced. With the help of the excel sheet, I reduced the total number of colors from 60 down to 28.
Color consolidation example
Consolidating Text Colors
I employed a similar method of sorting and reducing to redefine this design system’s typography, gradients and shadows. While I was organizing the text colors, I realized that some design mockups used different opacity of white for varying text emphasis, while others used different color codes at 100% opacity altogether. The two systems lead to the same visual contrast, so there really should be only one system. After checking with the developers, I found that option 2 is better because we want to reserve transparency for things that actually need see-through quality.
The two systems of text colors, with option 2 getting used at the end
The updated “Colors” section in the new style guide
Screenshot of the new style guide in Adobe XD file featuring typography, colors, shadows & glows, etc
Defining a Grid System
Now that I found a good method to consolidate colors, I breezed through making guidelines for colors and typography, but defining a responsive layout grid was a different matter. We never had a grid before, and the site was not very responsive. Having a variety of page layouts on the site also made it more complicated to define the grid. For example, adaptive columns work well with pages with a left navigation, but the same grid fails to work with a cards page. It was apparent that we would need different grids for different page layouts.
A page with left navigation before grid implementation
A page with cards before grid implementation
For pages that have a left-hand navigation, the space on the left is reserved for the navigation bar, while the space on the right is responsive and fits inside a grid. The content inside the grid is left-aligned and spans multiple columns.
Screenshot of grid system documentation page
Overview page before applying the grid system
Overview page after applying the grid system
Overview page after applying the grid system at different breakpoints
For pages that have cards, individual cards are not aligned to individual columns. Instead, groups of cards are aligned to the column grid in a region (a “card grid”).
Screenshot of grid system documentation page
Event Dashboard page before applying the grid system
Event Dashboard page after applying the grid system
Event Dashboard page after applying the grid system at different breakpoints
Implement
Now that the fundamentals of the design system are defined, I needed to go back to the components I previously collected and update them based on the guides. During this process I found a few instances where the reduced colors were inadequate. I revised the list of colors so that the components’ colors remained harmonious.
Screenshots of the new style guide in Adobe XD
I packaged the UI Kit and the Confluence pages for the development team. One of the Software Engineers coded all the components on Storybook. This design system lays the groundwork for a future redesign of the platform. With this design system implemented, the meeting minutes between the design team and the development team has decreased, and the development team needed fewer design mockups for future product updates.
UI Kit's implementation on Storybook by the development team
What I Learned
The Work Continues
This project only allowed 3 weeks of my time, so I prioritized what to be included. Although I call this project a design system, it is more properly defined as a UI kit plus a few more fundamental guidelines of a design system. There is still much to be defined and documented for our small design and development teams.
​
Not long after this project, my company started making a metaverse product called Omniya. Had we not pivoted, my plan was to further develop this design system and document more of it in a written format on Confluence or Storybook.
The Opportunity to Learn from the Best
I learned the value of a design system by needing and building one. Not only did it speed up the future production process, but also facilitated cross-functional team collaboration.
On an individual level, it gave me the opportunity to study the best practices in the industry. This might appear as a given to some, but for someone like me who hasn’t worked at big companies post college, having the structure and clearance of a design system is significant. After internalizing and practicing the best design systems currently in use, I finally understood how to make decisions on formerly arbitrary details such as the space between an icon and text on a button.
Solve Issues Using My Multidisciplinary Skills
In the process of collecting and categorizing assets, the google sheet I made for the colors became quite useful. I knew google sheet well because I learned to use it for my economics degree. Never would I expect to one day use it to solve design problems, but here we are!