Homefield: DICK’S Sporting Goods 1st Design System
DICK’S Sporting Goods (DSG) supported a broad set of products across ecomm, enterprise & store technology. We researched what our teams need most in order to enable them with the right components for consistency, efficiency and speed. Homefield enables designers, engineers and product managers to have the right tools in order to focus on the important things - our athletes.
Challenge
How might we elevate DSG’s brand while enabling consistency, efficiency and speed?
Outcome
A design system that supports ecomm, enterprise, store and different brands.
My Role
Partnered with with other teammates to create and maintain components and themes.
The Problem
The technology organization was only six months old and growing rapidly each month. As our teams began to rapidly release new pages/products, we noticed some holes in our workflow and eCommerce experience. The initial opportunity was to reunite our products in eCommerce that had scaled faster than expected by creating a simple framework to address the growing needs of our site. Our first steps were to learn more about how we all worked together and individually as designers, engineers, and product managers.
Empathizing with Our Teams
We talked to a variety of designers, engineers and product managers to understand where our teams currently struggled. We conducted user interviews, hands on exercises, experience diagramming to see what themes came up during these experiences.
Designers
Engineers
Product Managers
Disconnected Designs
Each product team owned different touchpoints across eComm, store, and enterprise, and it was difficult to share continuity between each team’s work
Rebuilding Work
Front-end engineers were rewriting UI components in their team or across teams, with each iteration slightly different from the last.
Details for Stakeholders
When designers or engineers could not attend a meeting, product managers did not have details on why a component looked/functioned a specific way to describe to stakeholders.
No Specs
Because there were no details on using icons or components, each team attributed different meanings or uses a component in their own pages.
Different Languages
Even if some engineers tried to share components, they might have been written in different languages, which meant they were not immediately usable.
Time Consuming
The simplest of mockups or CSS changes took longer than needed due to redesigning or rewriting components each time.
Tedious Work
Designers were regularly recreating the same asset between files or rebuilding a new component that another designer created but didn’t share out.
Accessibility Needs
Accessibility was not always prioritized and was difficult to implement after something was published.
Stats
60%
of engineering time is being spent on front-end tasks alone.
87
different documented instances of a button across the eComm site.
41%
of complaints from product teams are about UI component and icon confusion.
Design Challenges
Design systems can often be romanticized in articles online. They make them sound easy to create. The reality is—they are time-consuming to build, they take a ton of resources, they’re tricky to maintain, designers can see them as a threat to their creativity, and they require a lot of stakeholder support.
Inclusive Design
We were designing for about 500+ people in technology organization, accounting for a variety of roles, skills and ages. We needed to make sure that all of our assets were usable and accessible to different groups of people.
“We Already Have Brand Guidelines”
Brand is a core component to design systems, and why we spend so much time and money on building a unique one. We can expand past the traditional brand guidelines and apply it to variants, system properties, states and more items unique to digital experiences.
The Vision
User Stories
PHASE 1 focused on the foundation of the system. This would be a general designs and components that covered any DICK'S Sporting Goods touchpoint (eComm, Store, Enterprise) to allow any teams to start unified their experience. This satisfied our main need to create a system of reusable styles and components guided by user-centered design principles, best practices and standards of accessibility.
PHASE 2 would be to take an individual look at our different touchpoints. This would enable us to create meaningful and unique design patterns customized to each experience need.
Building from a Central Focus
Our system has to scale outside our athlete (aka user) facing systems and outside of only the DICK'S Sporting Goods brand. The DICK'S Sporting Goods brand is the central core for our other systems to build on as we reskin components with brand colors, styles, and customer interaction patterns.
Framework of Phase 1
Digital foundations are the building blocks we used to create the HomeField Design System. They keep our brand at its core, and put up scaffolding for the rest of the system’s components. We followed traditional design system foundations which typically cover the do’s and don'ts of logos, colors, values, voice, components, accessibility and engineering performance.
This system was created within Figma for our designers, a repository for engineers, and an internal facing site for any member of our organization to access.
Foundations
Color Palettes
Typography Styles
Spacing scales
Grids
Iconography
Accessibility
Engineering Performance
Components
Accordions
Alerts
Breadcrumbs
Buttons
Containers
Carousels
Chips
Checkboxes
Dividers
Drop Downs
Links
Logos & Elements
Pagination
Product Cards
Radio Buttons
Side Panels
Tabs
Tables
Governance
Measuring the value of the creation or addition to our design system
Foundations
AKA the building blocks of our design system
Colors
Type
Space
Grids
Components
This is a sample of a few of our components for the DICK'S Sporting Goods brand. Each component is defined with foundational styles, states, use cases, accessibility standards, and developer guidelines.
Buttons
Text Inputs
Selectors & Toggles
Brining It Together
We created a single master Figma file to host a core library of foundational components that all designers had access to use to build their experiences. After validating this file and testing it across various teams, we have created 7 satellite libraries that branch off of the core library. These libraries are for: DICK'S Sporting Goods, Public Lands, Golf Galaxy, CALIA by Carrie Underwood, Field & Stream, In-Store Tech, and Enterprise/Fulfillment Tech.
We are currently building out our internal HomeField documentation for anyone in the organization to access and learn about the design system. As it is right now, the site houses the guidance and code snippets for product teams to use autonomously.
