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.
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?
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.
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.
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.
We segmented our users into three groups: Designers, Developers, Content creator and researched their needs in using the design system.
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.
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.
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.
We re-imagined how different types of user needs and flow according to individual needs.
First time using DSM
Continuous design process
First time using DSM/ Pre-dev
Continuous development process
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.
We took the core information on each website and created a consistent system throughout the site to display each component.
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.
Re-design interaction & navigation
Update content & re-structure pages
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)
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
What I would re-do
Faster prototyping, Less assumptions
& More testing
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.