MARSH | DESIGN SYSTEM

Summary

I knew we needed a design system after attending the fourth meeting in two weeks in which a marketer requested new components to promote their content. There were plenty of components to choose from, but we understood the underlying ask: provide them with a pattern library that gave them options. So we set out to create a robust design system that applied to all of our digital properties. We knew we would need some help considering the size of our team and the time we could devote to this so we leaned on many available resources: Foundation, our sister company’s (Mercer) own design system, literature by Nathan Curtis and Brad Frost, and any other resources that could help make the process easier. It's far from done, but we've come a long way.

The Problem

As a whole, our digital properties lack consistency when it comes to design patterns. On top of that, we inherited the current designs and many of them could use more informed redesigns to fit the needs of our users (and current web standards). We also were having the same conversation with every colleague who came to us with a request to make enhancements to their pages, microsites, or websites and we needed a better, more unified solution.

The Goal(s)

Create a single resource library for all stakeholders (that applies to all of our digital properties) to refer to and use when it comes to our base UI elements.

Scope/Timeline

1+ year

Team

• Multiple stakeholders

• 1 UX lead (me)

• 1 graphic designer

• 1 front-end developer

• 1 director of marketing technology

• Multiple product owners

Responsibilities

• Component inventory

• Interview stakeholders

• Present on findings and make case for devoting time/resources

• Facilitate 4-day design sprint

  • Identify goals

  • Identify components

  • Brainstorm 'must-haves' and 'nice-to-haves'

  • Sketch

  • Documentation

• Own roadmap/requirements

• Lead weekly design prompts

• Lead bi-monthly design critiques

• QA on test site

User flows/PROTOPersonas

Previously, I had created user flows for the protopersonas I had identified via interview, survey, and analytics data (plus my time managing the Contact Us mailbox). These user flows inform all of our discussions.

design Sprint results

Though it was the first design sprint I had ever facilitated, I was excited and I made sure to prepare. I also made sure there were ample amounts of snacks. It was imperative that we aligned on our goals for this design system, and having those goals visible at all times helped us focus whenever we thought we were getting off track. Our design discussions were fruitful and helped us all stay on the same page. 

Long Term Goals

• Design System for all digital products developed in the next 5 years

• Sustainable system for everyone to use regularly

• Job necessity for everyone

• An "Evolution-like" site

• Achieve the 80/20 rule for our design system

• Becomes a universal language

Short Term Goals

• Establish/Define library of base UI elements

• Action items to run with after this meeting

• Come away with something that we can share with the rest of the team

• Rationale for design choices

• Checklist approach to completing sections of the "product"

• Have dev ready components to ship

recent work

I chose an atomic design approach because when I looked at our current components, I realized they were littered with redundancy and needed streamlining. Why have 10 components when you can have 1? Using atomic design (a modular approach), you can fit the functionality of 10 similar components into 1. 

For the user, this means a page that has a clear focus via a hierarchy of content. For the content manager, it's easier to configure the component. For the product owner, it means offering more options while still providing constraints.

Next Steps

These are early wireframes I created that still need to be fleshed out by our graphic designer. But the thread of a solution is there - eliminating the right rail, using multi-functional content cards to display relevant content (including adding a timeliness factor), and allowing them to act as a full-width option or grouped together. This also allows for a content flow as the article gets older, adding an archive of content all related to a specific topic or campaign.