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.
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
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.
Unique Panel System
A glimpse into the Sketch design tokens that allow controlled customization of the panels
.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.
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.
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