M&T Bank Design System

Project type
Internship
Project Date
Jun 2019 - Dec 2019
Tools
Sketch, Miro, Invision
Role
UX Researcher | Information Architect | Interaction Design
Summary
I worked with Julia Hawley, fellow intern to redesign Currency, M&T Bank’s newly launched Design System. Although we were not able to see our works into fruition, our works were taken in by the main designer of Currency, Genevieve Van Dussen. The current version 4.1 (2022) of Currency has adopted a lot from our solutions.
See Final Design
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.
Observation

Users Are Frustrated with Currency?!

Through word of mouth, my fellow intern friend, Julia and I found that some of the users found the experience of using Currency super frustrating and called it an inconvenience.

Users: 🤯
Julia and I:🧞🧚

As intern on the design system team during the summer, I had the opportunity to see the Design System, Currency, release to the bank and observed its first couple of months since the launch. Eager to work on something impactful and with the blessings of the designer and engineer of the Currency team, Julia and I decided to work part time after our internship.

Research

Understanding Design Systems

Helpful Reads

In order to break down the problem, we 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 found features on different documentation websites that heightened the user interaction.

Competitive analysis helped us to divide our focus into four categories: Consistency, Design, Development, and Interaction
EMPATHIZING

Who Are Our Users & What Do They Need?

Julia and I first began this process based on the non-direct feedback we heard about; we wanted to talk to them directly in order to get a deeper understanding.

Because of corporate constraints, we were unable to do directly talk to the users.
So, we turned to empathize with our FUTURE users.

Exploratory Interviews

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

Currency Skills: 100%
Developer and designer of Currency Design System: David and Genevieve

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

Currency Skills: 0%
Engineers and product owners with no knowledge of Design System nor Currency.

Defining Users

Based on our research, we segmented our users into three groups: Designers, Developers & Content Creators.

Then we segmented each of the groups to:

  • Current Users: Users that are familiar with Currency
  • New Users: Users that want to use Currency in their workflow
  • Beginners: Users that are new & not familiar with their workflow nor Currency
m&t persona: designer, engineer, content creator
design system user flow mapped on design thinking cycle

User Flow

To organize and look for a pattern in the needs of each user, we listed out their work flow surrounding the Design System them visualized it by organizing it on the Design Thinking cycle.

Define

Pain Points

Starting from our observation, through our exploratory interviews and our user flow we determined that users had difficulty:

  • Setting up design system on their machines
  • Finding components the team needs (and it not existing)
  • Not seeing the information needed

The first few version of Currency was barely usable due to the pain points listed above, because creating an amazing design system takes a lot of time and effort, how might we set up the documentation site for success?

My goal was to support user acquisition of the design system by increasing the usability.
Ideating

Just a Few Ideas*

Ilene's TODO

Information Architecture

Building a new IA of the site would allow for: a easier way for users would perceive the documentation site

Content Architecture

How to layout

  • Utilities page: Current Status, Change Log
  • Component & Content pages: Colors, Button, etc.
Julia's TODO
Julia's Experimentation

Visual Design

  • More color
  • Imagery
  • Examples

Empathizing

Going Back to Users

More Reading & Analysis

In order to break down the problem, we 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.

We researched various public design system documentation websites and found features on different documentation websites that heightened the user interaction.

M&T competitive research notes

Card Sorting Activity

We knew that it wasn't easy to find a piece of information, but as interns that didn't know the web development process, it was hard for Julia and I to understand how they would want it to be structured.

To directly understand how each individuals would group or perceive content, we created a semi-structured card sorting exercise where participants would group certain components and pages together and talk through their decisions.

m&T card sorting activity image

Collaborative Meetings

Some of the features we were thinking of were decisions that didn't have a clear pro or con. Even within our team, there were mixed opinions. In order to understand the full scope, we not only had discussions but also Crazy 8 exercises to open up our minds.

Solutions

Iterating...

Search Bar

Focus Order Hierarchy

Content Architecture & UX writing

To ease the process of finding information users needed, we went through each page of the website and stripped the copy down to the core information, created inventory of each component and the core messages and created copy for missing contexts and designed for the extra.

Next we changed the layout. Focus order hierarchy defines a need for content and navigational sequence. Using with WCAG guideline, we prioritized importance of information and formed a layout around it.

Then, we took the core information on each website and created a consistent system throughout the site to display each component.

Information Architecture

After a quick research on different types of IAs on various websites.

m&t information architecture notes

We created a new hierarchy of information, organizing all of the components and guide pages, based on personas, user flow, the card sorting activity.

m&T information architecture chart

Designing for Interaction

This is a visualization of user flow on the IA.

Designers
Developers
Prototypes

Putting it All Together

We  re-designed interaction & navigation, restructured and updated content.


Each iteration was focused on trying out different layouts, continuously improving content and tightening the conciseness and intuitiveness in page. We proofread and re-designed pages for 18 components for both developer and designer descriptions of the components.

At the end of our 3 month period at M&T Bank, Julia and I had created around 100+ screens & 6 enhancing versions of the documentation website.

Julia and I presented our findings and possible solutions to our team before we ended our time at M&T on Dec 2019.
Using prototype feature on Invision

Genevieve Later Incorporated Some of our works to create a new design for the design system documentation site.
user Testing

Checking Our Assumptions

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)
Final Design

Before & Afters

So What Made It?

Reflection

Thank you M&T

Being able to work on the Design System Team at M&T was one of the biggest blessing I could have gotten. As a student, I was not only able to experience real-life working environment, but being able to work on the UX hiring website over the summer and design system in the fall helped expose me and contextualize different UX roles in technology.

Not only did I get the normal UX internship take-aways like:

  • learning about agile methodologies
  • training and guidance in design thinking
  • empathizing with the user
  • prototyping
  • user testing
  • building information architecture
  • CSS conventions for developing UI components (BEM!)

But learn so many aspects about designing for technology through this project like:

  • Accessibility concepts and standards like WCAG, A11
  • variants, states, multiple use cases of a component
  • visual design languages: colors, typography, spacing, icons and more!
  • responsive design for mobile and desktop

My time at M&T opened me to a new world in the industry. I fell in love with Design System and I was able to get hands on experience working with some of the kindest people.

Julia and I also worked to re-design the UX recruiting process @ M&T Bank