Homefield
The Design System for DICK’S Sporting Goods
This case study is presented with the consent of my fellow design, product, and engineering teammates on the Design System product team, with whom I had the pleasure of leading and collaborating while this solution was developed. Work shown is the property of DICK’S Sporting Goods, Pittsburgh, PA
HomeField is the Design System built for the various brands and digital properties of DICK'S Sporting Goods. Created specifically to streamline productivity, consistency and quality for all Design and Engineering product team members within the DSG Technology organization, HomeField enabled our teams to create innovative and accessible athlete and brand experiences. As the DICK'S Sporting Goods technology organization grew to address the digital transformation beginning in 2018, it became increasingly important to maintain a consistent style and visual language across all of our digital experiences. With over 30 digital product experiences, it was clear that we needed more systematic ways to guide and leverage our collective human-centered design efforts. The goal of the HomeField design system was to create a library of reusable components guided by clear standards, that could be assembled quickly into consistent and accessible experiences for product teams.
In the fall of 2018, I began the process of outlining the problem space, assembling the product team, building ur stakeholder list, and securing the funding for the project. We began our work in earnest in January of 2019, and the first components were completed and launched into our online documentation site in the spring of 2019.
THE PROBLEM
After conducting discovery exercises including user interface audits, stakeholder and engineering interviews, and usability testing, it was clear that DICK'S Sporting Goods needed a design system in order to give our digital products more consistency in design, a more user friendly experience, and a way to give Engineers a simple and consistent way to develop these products. We calculated that at least 60% of engineering time was being spent on front-end development tasks alone, and the percentage of engineers with these skills was very low across the org.
We also discovered that there were 87 different instances of a primary button across the DICKS.com eCommerce website, each with slight variations to the design and the associated code – and we knew that was the tip of the iceberg.
The SOLUTION: A Robust and scalable Design System
The primary solution was to create a design system of reusable styles and components that are guided by user centered design principles, best practices and standards of accessibility and inclusive design.
Initial discovery efforts during an offsite project kickoff meeting
An Experience Brand
The secondary solution was to develop an “experience brand” to connect the user experience, content, and brand expression on DICKS.com with the mindset of the DICK'S athletes as they move to achieve their goals. This brand was specific to the digital product space, but was built on a base of the main DICK’S Sporting Goods brand.
Style tile example from the HomeField Design System discovery phase
The CHALLENGES WE FACED
Design systems are often romanticized and idealized by countless design experts, books, online articles and conference presentations. It sounds relatively simple to do…but the reality is that they are time consuming to build, they take a tremendous number of human and financial resources, they’re difficult to maintain and update, designers often see them as a threat to their creativity, and they require stakeholder support across numerous areas of an organization.
'We Already Have Brand Guidelines'
Brand is a core component to any successful design system, and it is why we spend so many resources on building a unique one. The same principles we apply to physical spaces and print mediums don’t always work for digital experiences, and there are some considerations that only affect the digital space.
Design Can Impact Performance
At times, a beautifully designed layout can come at the expense of page speed or other important site metrics. Some responsively designed sites can be heavily impacted with the amount of markup and images used to reformat a site for smaller screen sizes.
Creating DIGITAL FOUNDATIONS
Digital foundations are the building blocks we used to create the HomeField Design System. They keep the DICK’S brand at the core, and put up scaffolding for the rest of the system’s components. Traditional brand guidelines typically cover the “do’s and don'ts” of logo, colors, art direction, brand values and tone of voice. They are applicable to everything a company does. Factors such as page performance, accessibility, and user experience considerations are all unique to a digital experience.
The HomeField Foundations Include:
Color palettes and variants
Typography styles
Spacing scales
Grids
Iconography
Samples of foundational elements from the HomeField Design System
GOVERNANCE
The HomeField design system is a living, breathing artifact that will adapt and evolve as the DICK'S brand and technology environment changes. In creating a governance model for our design system we were able to ensure the continued consistency and efficiency of the system while continually iterating and enhancing our tools and component library.
Sample from the HomeField governance model
BRINGING IT ALL TOGETHER
We used a master Figma file to create a library of components – to which all 30 designers had access – for the creation of our digital experiences. After just a couple of weeks, we began to see tremendous leaps in productivity for our design team by asking them to use this library when building and iterating on designs. Our team was actually able to create a prototype of the entire DICKS.com eCommerce site experience in just a few hours utilizing the framework of the HomeField library in Figma. Later, we built an internal HomeField documentation site that houses the guidance and code snippets for product teams to use autonomously in their day to day work.
Samples from the HomeField documentation site
TESTING AND FEEDBACK
Initial testing was conducted during the discovery phase to understand the biggest pain points for DICK'S athletes, as well as for our internal stakeholders who would be utilizing the system. Testing was also done at every milestone of the HomeField Design System's roadmap.
IMPACT
Numerous hours of user-centered design and engineering strategy has brought the results desired for our DICK'S Sporting Goods athletes. We were proud to present the new face of our products to customers.
In quantitative studies across our eCommerce experience, we saw revenue and conversion increases up to 7% in some tests after launching experiences utilizing the HomeField design system.
