Design a new content hub to house articles, media, and more in an engaging location

SCALE AT SPEED

By combining a new Marcus design system with a powerful CMS (AEM), pages can be deployed at speed and by non-designers, resulting in a higher velocity of new pages/experiences across a growing product portfolio.

MY ROLE

 

I was the design lead on a multidisciplinary design operations/platforms team, consisting of 2 product managers, 15 engineers, and 3 content managers. .

I collaborated with a team of 6 designers across the 2 product verticals to ensure their needs were being met. I worked under a Head of Design for strategic direction.

charlie.png

An example UI from our calculator product using the Marcus Design System

Interface Inventory

We started by taking an inventory of the existing MVP site, and noticed glaring inconsistencies which justified the need for a design system.

Key issues identified:

- Inconsistencies between lending & savings products

- Information not in viewport 

- No established page templates, resulting in one-off designs (larger dev effort)

- No global elements (different buttons, headers)

Inconsistent Loan & Savings products

Important information not in viewport

inventory.png

Inconsistent heading styles, headers, and 50 shades of blue buttons

CMS: Panel & Component Definition

Because of the speed & scale of the content management process at Marcus, we needed to adapt the design system to accommodate the creation of hundreds of SEO/SEM pages by numerous teams (worldwide) every week.

 

While designers controlled design on a component/atomic level, we created an unbreakable panel (molecule) level which ensured consistent design and ease of use for content managers through a drag & drop system.

Screen Shot 2018-11-04 at 6.22.03 PM.png

Unique Panel System

Screen Shot 2018-11-04 at 6.22.14 PM.png

A glimpse into the Sketch design tokens that allow controlled customization of the panels

www.marcus.com_us_en_savings (1).png

Billboard panel

3 column panel

Next steps panel

Value prop panel

Product table panel

Billboard panel

Responsive Components (atomic level)

Design Tokens (global foundation styles)

CMS-specific specifications

Documentation & Naming Convention

To satisfy various groups of stakeholders referencing the system, we maintained documentation in the following formats:

1. Master Sketch File (designers)

2. M3 Lite PDF (brand, agencies)

3. Storybook Library (developers)

4. Confluence page (product managers)

One of the goals of our design system was to get designers, developers, brand/SEO, and product managers all speaking the same language. We achieved this through evangelizing semantic naming conventions we’re all familiar with (in the design and code). Includes: SASS variables, font styles, colors, UI components/panels, and templates.

Screen Shot 2018-11-04 at 6.22.33 PM.png
Screen Shot 2018-11-04 at 6.22.27 PM.png

Master Sketch File

Screen Shot 2018-11-04 at 6.21.36 PM.png
Screen Shot 2018-11-04 at 6.21.31 PM.png

Confluence Documentation

Extrapolation

Finally, we scaled the system beyond pure product -- and into the realm of Brand as well. The design system provided a solid visual foundation to develop social media templates, direct mail specs, video bumpers, powerpoint decks, and more. This ensured a consistent user experience from the moment a customer receives a piece of mail to the time they open a savings account.

Screen Shot 2018-11-04 at 6.21.19 PM.png
Screen Shot 2018-11-04 at 6.21.14 PM.png

Social media templates

Key Takeaways

The key to the success and adoption of the Marcus design system was through extensive evangelism efforts. We held numerous launch presentations across all teams (brand, legal, compliance), and constantly provided education on the importance of a design system. We also developed a robust intake process to ensure the system scaled with new needs and new team members.

Maintenance metrics

100+

symbols

300+

people referencing the system

50+

Confluence pages

Business impact

6 weeks

to design & deploy a new page

2-5 hours

to design & deploy a new page