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.
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.
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
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
We researched various public design system documentation websites and found features on different documentation websites that heightened the user interaction.
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.
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.
We created a new hierarchy of information, organizing all of the components and guide pages, based on personas, user flow, the card sorting activity.
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
