Systemizing design at scale for the largest sporting goods retailer in the United States
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Doing the right thing, the right way, and then improving on it — positioning a growing consultancy for scale