M&T Bank Design System

During my internship at M&T Bank, I worked with Genevieve Van Dussen and Julia Hawley to redesign Currency, M&T Bank’s newly launched Design System. Design system is a library of visual style, components and related documents to serve individuals, teams or communities to design and develop products efficiently and cohesively.

Collaborators
DATE
August 2019 - December 2019
ROLE
Intern, UX, IA

00 finding the problem—

Being an intern on the design system team, I had the opportunity to see the product launch and be with the team in its first couple of months. I noticed that the newly developed design system was not being used. We set out to find the reason — why?

01 research—

In order to define the problem, Julia and I first learned more about design systems through resources like InVision’s Design System Handbook, Apple’s Human Interface Guidelines, Medium articles of people who worked on creating design systems.

Competitive Analysis
We researched various public design system documentation websites and took notes on four different categories: Consistency, Design, Development, and Interaction. Through the analysis, we found features on different documentation websites that heightened the user interaction.

Exploratory Interviews
We conducted interviews with 3 different groups with varying levels of knowledge of the Currency Design System.

Developer and designer of Currency Design System: David and Genevieve

Engineers, designers & product owners familiar with the Currency Doc site but new to the concept of Design Systems.

Engineers and product owners with no knowledge of Design System nor Currency.

Personas
We segmented our users into three groups: Designers, Developers, Content creator and researched their needs in using the design system.

synthesis

For the next month, Julia and I iteratively researched to find what differentiates a a good design system from the bad. Based on this research we set the success metric as content accuracy, user engagement, and easy access to information.

pain points

Confusing page titles and content organization disoriented users from navigating to expected pages.

Informations on each page are cluttered thus making it hard to read necessary information.

Unclear features distracted users from the main content of the website.

03 design process—interaction

Re-structuring information
The current side bar lists every page on the website. After studying different site maps and resources on creating A new hierarchy and navigation of pages.

User flow
We re-imagined how different types of user needs and flow according to individual needs.

Designers
First time using DSM

Pre-design

Continuous design process

Developers
First time using DSM/ Pre-dev

Continuous development process

03 design process—content

Proofreading
We went through each page of the website and stripped each text down to the core. We created inventory of each component and the core messages to find what was missing and what was extra. We filled in the missing context and designed for the extra.

Organizing
We took the core information on each website and created a consistent system throughout the site to display each component.

04 solution—

iterate, iterate & iterate
The current side bar lists every page of the A new hierarchy and navigation of pages.

Throughout the 3 month period, Julia and I made around 100+ screens and created 6 enhancing versions of the website. We continuously worked to make the content and interactivity concise and intuitive. We proofread and re-designed pages for 18 components for both developer and designer.

Action Items

Re-design interaction & navigation
Update content & re-structure pages

05 user testing—

To test our latest re-designed version, we used Invision to create a full prototype and created prompts to test 3 out of the 5 design principles of human computer interaction:

Does the new organization & content make sense (Perceivability)
Can user find what they need easily (Consistency)
Do users understand what each component on website will do (Affordance)

06 reflection

Julia and I presented our findings and possible solutions to our team before we ended our time at M&T on Dec 2019 and started user testing before Genevieve could merge our works to create a new design for the design system documentation site.

What I've learned
Designing for the user
User testing
Prototyping
Information architecture
Design System!

What I would re-do
Faster prototyping, Less assumptions
& More testing


07 current Currency

Julia and I came to an end with this project but the re-designed Design System Documentation website incorporating our ideas was launched by the Currency team at M&T.