Website logo

Dicks Sporting Goods Design System

Systemizing design at scale for the largest sporting goods retailer in the United States

Mockup image of a design system website and an e-commerce website
Role —
Senior Visual Designer / Design system lead
Duration —
6 months
Responsibilities —
Requirements research
Visual Design
Highlights —

Delivered our design system MVP in just 6 months

37 base components identified, designed and built to meet WCAG 2.1 AA Guidelines

Documentation website delivered with 5 flushed out component examples, established foundational styles for accessibility, typography, grids, spacing, colour and motion and design tokens for implementation

Established new workflows for operationalizing cross-discipline production

Challenge, goals and my role


Dicks Sporting Goods (DSG) is an American sporting goods retailer of sporting equipment and lifestyle goods. Known for its large store spaces, helpful staff and unique in-store facilities such as batting cages, climbing walls and golf simulators, shopping at DSG stores is a rewarding experience for athletes of all types. DSG wanted to bring a similar experience to its online space and become a leading choice for athletes at any part of their journey.

DSG online had many siloed digital product teams working on different products without an established single source of truth. We heard that many of the digital product teams had low design maturity as many designers had transferred internally from print design roles without proper training. This resulted in quite a disconnected and inconsistent online experience as well as some serious accessibility issues. We were approached at Rangle to help with a digital transformation project to consolidate and align the online experience and improve internal workflows.

Above: An experiential installation of a climbing wall at a Dicks Sporting Goods store in New York.

Our goals

The Rangle and DSG teams aligned on three goals for the project which also aligned with each phase of the project:

Audit DSG’s design and technology practice.

We needed to gain an in-depth understanding of DSG’s ecosystem, pain points and challenges. This would help us discover, assess and leverage existing assets.

Align on a refreshed design language.

Working with the Dicks Sporting Goods team to co-create design principles that will inform the key scenario concepts and design language, producing a backlog of components.

Consolidate design language into a scalable design system.

Use our findings to explore, design and develop a documentation site that will house various aspects of the design system.

My role

The project had two teams of designers, one for component discovery and the other for the documentation site. I joined the project as the visual design lead on the documentation website alongside an experience lead.

My primary responsibilities were to research best-in-class design system approaches, design and validate a responsive documentation site and define foundational styles that would be the building blocks of the component library and ultimately the retailer’s online experience.

When I joined the project I also facilitated the component discovery team in design exploration to establish and define Dick’s Sporting Goods refreshed visual identity.


Early insights from the field

In the first phase of the project, the Rangle team travelled down to Pittsburg, Pennsylvania to interview members of the executive team and representatives from different departments. From these stakeholder interviews, it was clear that the DSG brand was strong and employees had a lot of confidence in it. However, a recurring theme was that many people felt disconnected from the brand’s vision and wanted more alignment and unity across teams. It was felt that the online experience could better represent the support and expertise that’s offered in stores. There were some clear experience and design system opportunities—DSG wanted to be seen as an athlete partner, rather than just a retail store.

Lots of great services in store aren't translated to digital (like getting your baseball glove steamed, or test out golf clubs etc)

– Feedback from the initial stakeholder interviews

The UX team wants to work on new exciting things but a lot of time is spent working on broken things, a lot of patching holes, playing catch up with industry standards.

– Feedback from the initial stakeholder interviews

Refined experience principles

With actionable insights to solve for with the design system, we needed to ensure we were all singing from the same hymn sheet before we started to refine the design language. We conducted a workshop with the DSG team to align on and define experience principles of Curiosity, Excitement, Confidence and Mastery—the phases of an athlete's progression and how DSG can support each phase.


Initial design exploration

To evolve DSG's brand experience to the next level, we began working on a refreshed style direction guided by the four brand pillars of Curiosity, Excitement, Confidence and Mastery. Working alongside our Dicks Sporting Goods designer, the Rangle design team and I began exploring design direction with moodboards, font pairing and style tiles.

Above: Three moodboards I created, each focusing on a different theme to create athlete excitement; colours, people and typography.

Font pairing

From an initial audit, we tracked more than 10 different secondary fonts in use across different product categories. There were a number of brand guidelines in circulation and confusion about which was the most up-to-date leading to mass inconsistencies across touch points. DSG asked us to conduct a font pairing exercise and to choose a new secondary font (Google or open source) that would be optimized for UI and legibility.

Above: I conducted a font pairing exercise, choosing open source fonts that would support the DSG font and work well for UI.
Above: We chose Archivo, which is a grotesque sans serif typeface family from Omnibus-Type. Large X-height and open counters lend well to legibility in UI and its blocky appearance pairs well with the primary brand font of DSG Sans.

Testing out styling on key pages

A UX audit conducted by the UX team identified some keys issues flows for initial design exploration. We identified customer engagement, search and browse, product selection and checkout as the areas of opportunity for experience improvements and our canvas to ideate visual design evolution. We then applied our style tiles to select key pages identified in this research.

Above: Design exploration of a PDP page focused on introducing a customer engagement module and a customer buying guide module to bring the online customer experience closer to the in-store experience.

Design system beginnings

With a range of visual directions to validate and approve with the Dicks Sporting Goods team, I left the component discovery team to focus on the documentation site. I paired with the UX lead to  refining our requirements with the product manager and engineering team. We got deep into research into other documentation sites, gathering best practices and ideas for the content we would like to support. We looked to leading design systems including IBM's Carbon Design System, Shopify's Polaris System and Google’s Material Design System to name a few.

Next up we began a sitemapping exercise to determine what content we needed on the documentation site and how that would break into sections. Along with component pages, we wanted to document the refined foundations and styles of DSG’s design refresh, including usage guidelines and technical implentation for grids, accessibility, spacing, colour, typography and motion. With scalability in mind post MVP, we recommended to the DSG team to add guidelines around rules and governance and expand on voice and tone, photography and design language.

Above: Final sitemap of the documentation website mapping out sections (yellow) in-scope for MVP. We also mapped out post-MVP sections (white) for the DSG design system team to update in future.

Navigation and component page

Working closely with the engineering team at Rangle, we mapped out our component pages, including descriptions, variations, code and props for technical implementation, content guidelines and accessibility considerations. We would use this skeleton for each new component identified. While waiting for our design language to be finalized, we also designed a collapsable navigation that would help the user focus on the page content as needed.

Above: Early prototype of the documentation site component page.


A refined visual language

After establishing DSGs refined visual language we were able to now flush out other key flows of the DSG website. This enabled us to consolidate and identify 37 base components that we would be adding to the documentation site. While working through other key flows, we were able to establish and consolidate brand rules and refine guidelines for layouts, grids, typography, colour and spacing.

Above: Basic style components started coming together to build the basis of our Figma UI kit and informed our foundation page tokens.

Foundation pages

I began documenting these foundational rules alongside my UX partner and engineering team for implementation guidelines and copy. We created a token-based standard for implementing consistency in these base components, leveraging a t-shirt size system for differentiating between tones of colour and sizes for spacing and typography.

Above: Three of our foundation pages for grids, motion and typography.

Final component pages

We delivered a fully responsive component page with a dropdown menu for component variations, an adjustable component preview display, prop table, content writing guidelines and accessibility considerations. We flushed out 5 component pages complete with documentation for buttons, toggles, dropdown menus, text links and accordions.

Above: Final responsive designs for the design system component page.

DesignOps improvements

One of our biggest wins of the project was helping the DSG digital teams migrate to Figma. Figma is an amazing tool for design collaboration and design systems and along with the migration we were able to set up and handoff an organized Figma file setup with foundational libraries ready to use. We also provided a component assessment sheet for the DSG design system to continue to spec and add new components to the design system.

Above: We handed off a Figma design system with page covers to keep everything organised.
Above: A component assessment sheet to gather component requirements and variations for all new additions to the design system.


In a 6 month project window, we delivered the MVP of the Homefield Design System complete with documentation, foundational guidlines, styling and component architecture that was designed to be accessible, efficient, consistent while also championing the retailer’s brand message. We delivered:

A refereshed visual identity

We established consistency in layouts, design patterns and visual language and better aligned with DSGs experience principles and in-store experience. We reduced the variety of components in use while add more robust components that support an improved customer experience.

DesignOps in work

We handed off 5 new workflows that help operationalize cross-discipline production, remove silos and improve efficiencies for designers across all product teams.

Documentation website

We shipped a working MVP of the documentation site, with 5 fully flushed-out component examples, established foundational styles for accessibility, typography, grids, spacing, colour and motion and design tokens for implementation.