Snow

Design System Component
& Interaction Kit

Website Production Management

Source of truth for large-scale website redesign. Inspectable & annotated interactive kit.

/* Deloitte Digital */

sheets-kit@2x
int-sheets@2x

The kit included asset states & animated interaction patterns. 

Hero_crown

Building a website for a content management approach requires a very different production strategy than designing individual pages.

On our large team of engineers, designers, PMs, QA, and content strategists, it became clear that even though we had a design language and were working with a visual system—we designers were not delivering the components with consistent precision across the dozens of use-cases we were outputting.

Building a website for a content management approach requires a very different production strategy than designing individual pages.

On our large team of engineers, designers, PMs, QA, and content strategists, it became clear that even though we had a design language and were working with a visual system—we designers were not delivering the components with consistent precision across the dozens of use-cases we were outputting.

Building a website for a content management approach requires a very different production strategy than designing individual pages.

On our large team of engineers, designers, PMs, QA, and content strategists, it became clear that even though we had a design language and were working with a visual system—we designers were not delivering the components with consistent precision across the dozens of use-cases we were outputting.

Building a website for a content management approach requires a very different production strategy than designing individual pages.

On our large team of engineers, designers, PMs, QA, and content strategists, it became clear that even though we had a design language and were working with a visual system—we designers were not delivering the components with consistent precision across the dozens of use-cases we were outputting.

wire-hero@2x

And neither were the engineers!

And neither were the engineers!

And neither were the engineers!

And neither were the engineers!

Since the design comps were not articulating the system, the engineers were not building systematically. Each individual was building components as they came across them, referencing design comps that were imperfect in different ways. This caused myriad issues as we realized our global rules, styles and methodology were not making it into the build.

With my experience designing for CMS-based websites, I was able to identify this issue and I knew how to fix it. I set about creating a single source of truth where collaborators could reference intentional and systematized designs with confidence. A component kit was born; and our team was able to share a common vocabulary for the building blocks, categories, and patterns needed to build out a very complex redesign.

Vital Voices is a global non-profit organization that was created in 1997 to make space for women to be heard. On April 4th, 2018, Vital Voices hosted its 17th Annual Global Leadership Awards honoring five women leaders.

To enhance the networking experience for the 2018 Vital Voices Global Leadership Award post-event reception attendees, Deloitte utilized capabilities in IoT to develop a connection-making app. The app synced with a live data installation showing connections made in real time.

Since the design comps were not articulating the system, the engineers were not building systematically. Each individual was building components as they came across them, referencing design comps that were imperfect in different ways. This caused myriad issues as we realized our global rules, styles and methodology were not making it into the build.

With my experience designing for CMS-based websites, I was able to identify this issue and I knew how to fix it. I set about creating a single source of truth where collaborators could reference intentional and systematized designs with confidence. A component kit was born; and our team was able to share a common vocabulary for the building blocks, categories, and patterns needed to build out a very complex redesign.

Since the design comps were not articulating the system, the engineers were not building systematically. Each individual was building components as they came across them, referencing design comps that were imperfect in different ways. This caused myriad issues as we realized our global rules, styles and methodology were not making it into the build.

With my experience designing for CMS-based websites, I was able to identify this issue and I knew how to fix it. I set about creating a single source of truth where collaborators could reference intentional and systematized designs with confidence. A component kit was born; and our team was able to share a common vocabulary for the building blocks, categories, and patterns needed to build out a very complex redesign.

Since the design comps were not articulating the system, the engineers were not building systematically. Each individual was building components as they came across them, referencing design comps that were imperfect in different ways. This caused myriad issues as we realized our global rules, styles and methodology were not making it into the build.

With my experience designing for CMS-based websites, I was able to identify this issue and I knew how to fix it. I set about creating a single source of truth where collaborators could reference intentional and systematized designs with confidence. A component kit was born; and our team was able to share a common vocabulary for the building blocks, categories, and patterns needed to build out a very complex redesign.

wire-feature@2x
wire-highlight@2x

Samples of simplified components used for patterning. 

kit-img@2x
kit-utility@1x
kit-control@2x
kit-callout@2x
kit-row@1x
kit-display@2x-1
kit-card@2x
kit-fluid@2x

How to make a component kit: 

1.

First, take inventory and start to group.

1.

First, take inventory and start to group.

1.

First, take inventory and start to group.

1.

First, take inventory and start to group.

2.

Then, ask questions about intent. See if groupings were right or if new groups emerge.

2.

Then, ask questions about intent. See if groupings were right or if new groups emerge.

2.

Then, ask questions about intent. See if groupings were right or if new groups emerge.

2.

Then, ask questions about intent. See if groupings were right or if new groups emerge.

3.

Clean up components and apply articulated intentions.
Streamline and make systematic decisions.

3.

Clean up components and apply articulated intentions. Streamline and make systematic decisions.

3.

Clean-up components and apply articulated intentions. Streamline and make systematic decisions.

3.

Clean-up components and apply articulated intentions. Streamline and make systematic decisions.

3.

Clean-up components and apply articulated intentions. Streamline and make systematic decisions.

4.

Display  finalized specimans in categories, document and annotate,  identify variations and  special cases.

4.

Display  finalized specimans in categories, document and annotate; identify variations and  special cases.

4.

Display  finalized specimans in categories, document and annotate; identify variations and  special cases.

4.

Display  finalized specimans in categories, document and annotate,  identify variations and  special cases.

kit-mobile@1x
kit-wfb@2x

5.

High-five team and hand-off with confidence!

5.

High-five team and hand-off with confidence!

5.

High-five team and hand-off with confidence!

5.

High-five team and hand-off with confidence!

Kudos from team will pour in. 

Kudos
Hero-specs2
page-types

View more projects

Stitch House BreweryRestaurant branding

Girard & FaireRetail Identity

TabithaProgressive Web App

Funk ParadeHybrid Mobile App

Connected VoicesiOS App & Data Visualization

Tech FluencyMobile Game

Fly DeltaNative Mobile App

Instagram
LinkedIn

Molly Snowberger

design; animation; production; craft;

resume

Washington, D.C. 
Copyright 2020 all rights reserved
Visit my cargo site

Washington, D.C. 
Copyright 2020 all rights reserved
Visit my cargo site