Scalable & Modular Design Language









 My primary goal at Home Depot was to lead the next generation of the online brand experience. The idea was to build a scalable and modular global design language keeping with all usability and regulated ADA compliances. Also, understanding that the UI/UX language that was first inherited was basically set in place before digital or dotcom experiences were a primary experience for our global suite of brand experiences. So, whatever route we decided to go; it had to not only be remarkable within usability design but also inherently be visually appealing to the various platforms/mediums responsive in its true nature.

So, this task was twofold via mentoring our group of talented Product Managers, Researchers Architects/Product Designers and also managing and educating leadership and executives along the way using a solid foundation of analytics, technically sound and feasible design patterns, and good old sweat and tears.

Understanding the core teams/personas

First it was a matter of all the Home Depot teams understanding the existent of their ecosystem and what role they play within the brands core values and overall voice.







Breaking down silos

Educating and helping these teams understand system design was not an easy task, but at the core of all this teams wanted to have a single source of truth for consistency at scale. The ultimate goal was to design / maintain / evolve / together as one Home Depot core group.

I’ve got data + research now what do we do with it?

Together the brand squad looked at past research defined by each group. Promotions, Sales, received expensed-cause and effect from the last three years.

We also generated new tests via User Testing within our respected channels. Solely focused on the human/customer rather than old agency methodologies to gather controlled experiments on new possible solutions all targeting our core user base.

Each dollar counts, again we didn’t get to become the leader in home improvement over night. We wanted this research to go beyond the data and have this be the seed for opportunities to manifest within the business.


A large unification effort

Slide But how would this be interpreted for enterprise: PROJECTS Launch But how would this be interpreted for Enterprise But how would this be interpreted for Enterprise Google Analytics Audience Overview


Macro Goals

Govern the spirit of the System with (simplification, interaction, motion)


Translate it for a world in which there’s much more information, desired density, and complex data (tables, visualizations)


Unify the design of all the brands enterprise products.


Audit existing (Atomic, Element, Modules)

Make it much easier to convert to material by setting current designs up to swap out one component for each rather than redesigning each screen.

Slide EXISTING ATOMIC Create a collection of all current versions of the UI for review, review pattern request logs, User Testing documents, user generated pain points and opportunities that could be possible for teams to leverage. VIEW PROJECT Existentialism A tomic

Assess collection and use cases

Decide on one version of each existing element based on current use cases and make any necessary improvements

“Taking from our Material Design, the few redesigned atomic levels on our list. Thinking within user touch points, future renders on multiple devices, and always thinking about product clarity to reduce clutter and improve on customer satisfaction.”

Slide REVIEWING BASICS Within our own use case we had to start from the ground up tackling for example our very own home-grown font “Homervetica,” some saying it was our own voice, but to those font nerds a poor attempt to incorporate Helvetica Neue to our brands identity. Materialism January 2018 for Immersion Design VIEW PROJECT F ont

Drop Down and Input Fields examples

Again, here we dived back into our atomic level, for example our Dropdown menus and our input text fields needed some guidance, a before and after - (now material-ready)


Very rigid grid-based layout structures

After - (Material Ready)

Responsive Design applying animations and transitions, padding, and depth effects such as lighting and shadows

Create documentation for our multiple squads – engineers to inform them while exploration, testing, build, adoption. Our 10 commandments for pattern change.

Prioritize and Explore

Meet with engineers and Product managers along with the stakeholders and establish each element’s implementation “priority” and effort” levels, as well as answer and questions about the new UI specs. Further understanding each sides perspective view point.


I saw this as an opportunity to explore – champion the much-needed functionality and process of educating out to squads at a larger scope further increasing the overall value of our Design System. So, creating a clear process for communities to duplicate and leverage was key. Roadmap creation, prioritizing scopes, user feedback, leadership buy ins, execution, development, adoption, new possibilities teaching Material Design.


Final Thoughts

Design with Launch PROJECTS Design with the company’s larger goals in mind Design with the company’s larger goals in mind Design with the company’s larger goals in mind Auditing the current UI components not only creates consistency between the large array of your current products, but it also preps the design and Implementation challenges of the larger goal; transition all your products to a single source of truth. InVision Design System Manager (DSM)

Communicate strategic ideation & implementation.

Discussing priorities and effort levels with engineering teams helped prioritize design efforts and built more trust and respect between the design and engineering teams.

Design with Launch PROJECTS Use design specs to make functional improvements-not just visual ones Use design specs to make functional improvements-not just visual ones Use design specs to make functional improvements-not just visual ones Design Systems are helpful platforms in exploring innovative methods to address system design experiences for your customers, further exploring interaction functionality needed to enhance a person’s journey on a website. Product photos of Product Landing Page

Slide Team & Organizational Gaines What did we learn? I have a proven success record of guiding product strategies and experiences from ideation through launch. I do this via ideation, technology, storytelling and simply curiosity. I love to get my hands dirty developing both on digital platforms and physical experiences. I love what I do and have a passion for building strong team cultures and truly relevant + unique innovative products that basically blow your mind away. "_ Challenge Work with all cross-functional associates to evangelize and develop the core design system for all internal CMS personas to reach our interconnected digital experience covering our global retail enterprise needs while delivering on our customers voice. Personas covered: • Dotcom, Mobile App, Decor, Pro, CRM, In-store Signage Simple Link trending_flat "_ Outcomes +52%. Increase in saved development and shared component libraries based on all HD experiences • Decrease in development duplication • Unified category customer personalization • Enhanced research and strategic SCO