The Marcus Design System

In early 2019, Marcus was ready for a design evolution and system uplift. Working with 2 designers, the Platform lead, and a PM, I led the team to create the Marcus M3 Design System that would not only support the learnings from our persona and customer research, but also integrate with Adobe Experience Manager to optimize operational efficiency. In addition to air-tight design consistency and improved UX performance, our goals were to increase originations and deposits for the Lending and Savings businesses by solving issues like hidden CTAs, non-ADA-compliant forms, white space and large fonts creating huge push down of elements, and hard-to-find transaction lists. We would also reduce story points through templated, easy-to-build marketing pages that could be created cross-functionally throughout various teams. Housed in Figma, it was important to build a system and library flexible enough to allow for growth and provide easy access to code snippets for developers. I assigned a dedicated style guide owner for maintenance and we also created a workflow approval system so that every key stakeholder signed off on every project with socialized updates. We started by auditing existing components and defining basic style guide rules for consistency around logo, color, type and grid.

We chose to use a modified Atomic methodology, mostly because it mapped to AEM nicely. We classified the building blocks as Elements, Components, Modules and Templates. I would hold daily reviews with the Platform designer who would then hand off approved designs to the developers. Those designs would then become part of the asset library.
The result showed increased originations and deposits, faster speed-to-market content production, and the brand, content, marketing, platform, and services teams building consistent, beautiful pages from templates. Operational efficiency improved by a 75% reduction in story points. Also part of the M3 initiative on the platform side: Reduced image sizes and pre-renders helped increase site speed. In 2020, we are continuing to uplift the system as the brand grows and new products are introduced to meet the user’s evolving needs.
Role: Design Lead
↑Back to Top