Design systems
Header image for NBCU Fire TV
©2020 Marlene Stoffers Design.

The value of a system:

What business value does a design system offer? A common design language allows your team to create products in a scalable way, allowing you to transcend platforms.

What is the user value? Keeping features synchronized takes significant effort, the same work to be repeated across all of these platforms, allowing for a consistent product experience.

What I've done:

I've been a design lead for the Nickelodeon Design Systems team, focused on audits, organizing, animation and accesibility. More recently, I've created a shared component library (using DSM) for Saks and Hudson's Bay.

Let's walk through some learnings amd highlights from my past experiences.

Cross-platform audit

At Nickelodeon, I lead the team for the Audit and Organize phase. We used a Google doc where we identified instances of voice, music, interactions, hover state, UI and haptic feedback inconsistencies across all platforms and products.
Cross-platform audit graphic

Timelines

At Nickelodon, I've kept track of due dates, communicated to stakeholders, trained designers, and reviewed final documents. The team size varied from 5-8 during the Audit and Organize phases.
Timeline graphic

Component naming schemes

For the Saks/Hudson's Bay/Saks Off 5th guide, I kept component names quite flat, because designers appeared frustrated when they need to drill down using multiple submenus in Sketch.
Naming schemes graphic

Typography

While at Saks/Hudson's Bay, I showed examples of type treatments in situ, with the name of the type style. Most style guides display a large list of type styles, doesn't give an engineer or designer any understanding of what the rules are surrounding usage.
Typography graphic

Color palettes

While working for Capco (a fintech consultancy), their client, UBS released a new color system. After interviewing a UBS financial analyst, I discovered that their charts are color-coded according to how the UBS Client's portfolio is divided up. For example, in a chart or graph, "cash" is always green.

I created new color guidance documentation, keeping in mind that products should be put in front of their user audiences early and often. This streamlined the creative and dev hand-off process.

Color palette graphic

Icons

I designed new icons, where styling was varied and inconsistent. I worked with the Saks brand creative team to implement and organize an icon system and documentation, in order to future-proof any icon creation. As usual, I tend to show the icons in situ in a guidance document.
Icon graphics

Animation style & language

At Nickelodeon, sample animations and guidance documentation were created for animators to use as reference material. More in-depth documentation was created, (with guidance on timing), so that any animator could pick up a ticket and start working.
Animation guidance

Style guides

A living, breathing document

At Saks, we recently released the Chat and Mini bag designs to the teams, presenting to the greater team so that product teams can follow common usability patterns. I shared new releases during our team touchpoints, taking on feedback on how to streamline the library for handoff to engineering and UX design.
Saks style guide
View the Saks guide