Delivering a design system
with quality baked-in
My role
Visual Design Project Lead
Output
Design System
Timeline
January 2019 - June 2019
Industry
Retail
Program Overview
This company is an American heritage retailer of sports equipment and lifestyle goods for both professional and amateur athletes. With a goal to become a leader in the e-commerce space as a trusted source for young, digital native athletes, this client required a consistent and connected experience across all digital touchpoints.
Together, we created the Home Field Design System MVP that sought to improve internal workflows, save time and repetition, while elevating the customer experience.
What were the outcomes?
The Home Field Design System MVP was delivered complete with documentation, foundational principles, styling and component architecture that was designed to be accessible, efficient, consistent while also championing the retailer’s brand message.
6 time spent in months delivering an MVP with a team of 10+
37 base components with criteria meeting WCAG 2.1 AA guidelines
1 documentation website with 5 flushed out component examples
5 new workflows for operationalizing cross-discipline production
What was the value?
By becoming a co-creator with our client, we embedded their teams within our own to create something more than a simple component library. The Home Field Design System leverages a proposed structure for development processes, design principles and workflow systems using agile principles.
1
We evolved the retailer’s brand experience in UI by designing for brand attributes
How?
To evolve this sport’s retailers brand experience, we laid the groundwork for a refreshed style direction based on four brand pillars of Curiosity, Excitement, Confidence, Mastery which was validated through visual design testing.
Pictured Above: A style tile from the proposed refreshed visual direction, with call outs to the values each design choice seeks to enable.
2
We expanded the breadth and depth of the retailer’s ecomm experience
How?
To expand the breadth and depth of this sport’s retailers ecomm experience, we explored new content zones that didn’t already exist on their platform which helped inform a forward looking customer experience which allowed components to be designed within the context of real pages using the established style direction.
Pictured Above: From content zoning (far right) to full component definition (far left), a full process was established for making the most out of product landing pages while defining new component use cases.
3
We set our client partners up for success by enabling them to become experts
How?
To enable our clients to become experts in managing, producing and maintaining design systems, we co-created artifacts and a methodology for yielding, prioritizing and producing components called the Component Scraping Pipeline, while helping define a structure for their DesignOps practice in order to operationalize workflows company wide.
Pictured Above: On the left, the component definition worksheet template in Figma. On the right, the design system file organization in Figma.
4
We increased efficiency and consistency for the internal team and end users
How?
To enable our clients to become experts in managing, producing and maintaining design systems, we co-created artifacts and a methodology for yielding, prioritizing and producing components called the Component Scraping Pipeline, while helping define a structure for their DesignOps practice in order to operationalize workflows company wide.
Pictured Above: Multiple screens from the Homefield Design System, a bespoke responsive documentation site.
Have questions?
If this is something you would like to know more about, get in touch!
Contact me at
Connect with me at
or read more of my thoughts at
Crafted during a pandemic surrounded by
cat magick, kat noise and cat love.