Design systems | Portfolio | Marlene Stoffers Product Design

Design systems

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:

More recently, at the HealthTech agency Patients & Purpose, I've created a unique pharma-based design system, so that UX can create low fidelity wireframes in a time-efficient manner.

I've been a design lead for the Nickelodeon Design Systems team, focused on cross-platform audits, animation guidance and accesibility. I've created a shared component library at Saks 5th Avenue and Saks OFF 5th.

Saks Component Guide

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.

Tracking progress

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.

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.

Typography Guide

While at Saks/Hudson's Bay, I showed examples of type treatments in situ within the site style guide, 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.

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.

Wireframe system

In 2021, while at HealthTech agency Patients & Purpose, I've worked with their Lead UX Designer to create a scalable wireframe system for usage in pharma. Below, the ISI tray is displayed for mobile, where side effect information is available for users in the bottom tray. Once we designed and implemented the component system, this allowed for faster wireframe and wireflow creation, and more efficient and accurate visual design and handover to engineers.

Style guides

At Saks, I collaborated with the Design Lead and internal team to organize and create their design system. The Design Lead began the process, then handed over the project to me, and I continued to iterate and communicate with the engineers, so that it would be a scalable system. It would be used for Saks, Saks OFF 5th and their Canadian department store chain, Hudson's Bay.

View the Saks guide