Excelerate America: Building a Sustainable and Scalable Design System
Tools: Figma, Storybook, Git, and Hygraph
Mar 2022 - May 2022 (iteratively updated till 2023
Excelerate America (EA) runs the leading group purchasing organization for businesses by partnering with ODP Business Solutions, Dell Technologies, and FedEx. Customers sign up for one of EA’s group purchasing programs to cut business expenses. EA’s main platform is a web application built with Hygraph - a content management system.
Background
“We are about to renew everything.”
When I joined Excelerate America, many new things were under planning from business strategies, to new products, and new branding. After setting up the new branding and fundamental design concepts, I started building a new design system. To create the EA site on Hygraph, having a design system was crucial to reduce the time for designing and building while maintaining design consistency throughout the platform.
Process
I researched Design Systems, how to start building them, which tools to use to communicate with engineers, and how to utilize them within products. Based on the branding guidelines and EA sites requirements, I set up foundations and applied them to create components.
Foundations
Colors / Typography / Iconography / Layout / Spacing / Radius / Shadow / DividerComponents
Label / Buttons / Chips / Input / Cards / Link / Navigation (App bar, Menu & Footer) / Dropdown / Breadcrumb / Popover / Alert Box / ID / TogglesApplications
Blocks / Sections / Pages
Requirements
Ability to create EA web applications
Capability to develop marketing-purpose landing pages by non-designers
Structure sustainability and consistency in design
Mobile-friendly components and sections
Applications
Sections and Pages
EA web applications are made with section and layer styles. Though each page has a different purpose and content, the design system allows me to create and build them quickly.
Components
Buttons, Chips, Labels, and Cards
Components are usable on cards, sections, and blocks using foundations.
Foundation
Colors
We selected colors based on the theme Poptastic Americana, which distinguishes Excelerate America’s brand and reinforces consistent experiences across products. Based on the brand palette, I created the saturated color spectrum to infuse meaning into an experience, highlight UI, or create associations with similar colored UI.
Foundation
Typography
The primary font for hero titles and headlines is Sora, and Roboto is for the body text.
Foundation
Layout, Spacing, Radius, and Shadow
What I learned
Collaboration between engineers and designers is crucial to creating a design system. From planning to scoping this project, engineers and I shared ideas tightly and discussed things whenever necessary. It helped to set up priorities, meet the due date, and apply to build platforms as planned.
Design systems can be complex based on the number of products, types of platforms, and usage. Designers and engineers should decide on the proper scope based on research and their requirements.
The team should be able to iteratively update the design system as platforms get complex and require new components.