The UI Asset Library at BNY Mellon
Helping tech stay on brand
A desktop and mobile depiction of the UI Asset Library
Problem(s)
BNY Mellon had recently started migrating all projects to its in-house cloud platform. As such, all teams and projects needed to onboard to the platform quickly. For a year prior to this project, the UX team worked to individually review and help transition all client-facing projects so that there was a cohesive message, design, and representation of BNY Mellon.
As with many problems, there were multiple sides to the issue. Both the UX team and the internal users were facing a great number of setbacks that caused migration to move slowly. Some issues were:
UX team problems
-
The UX team held office hours twice a week for teams who were trying to onboard. The meeting consisted of a presentation of users’ screens, followed by discussion and feedback from the UX team. This had been ongoing for a year and was not the optimal solution.
-
Sessions were effective for teams we were able to meet with, but difficult because we could only meet with two teams per week.
-
The on-boarding process became slow, due to limited availability from the UX team and the need for multiple meetings per team.
Internal users problems
-
Teams needed to onboard into the new cloud-based platform quickly
-
Developers/BAs were not always aware of how to properly implement components
-
BAs did not know what relevant component solutions already existed in the platform for their user stories
-
Developers could not easily find source code to implement components
-
Developers were not familiar with what the interaction patterns for those components; documentation for those patterns did not exist
-
Teams created pages with non-compliant usage of components
Solution
At the suggestion of the lead developer on the UX team, we decided to start work on a UI Asset Library.
We created the UI Asset Library to be a single resource that all users could access to ease the process of development and migration to the new cloud platform. It would be a presentation of all components available for use and include a description, example, source code, and specific usage guidelines (technical implementation and interaction patterns) for each component.
The library would educate and empower our developers and BAs to effectively create experiences that meet their users’ needs. It would be a living product that will be maintained and kept up-to-date as the platform evolves.
Goals
-
Make the design and development process easier for teams onboarding into the cloud platform by providing a robust resource for reference during their processes
-
Solve the problem of non-compliant screens and interaction patterns within the cloud platform which helps the UX team
My role
One designer and I headed this challenge for the larger UX core team. We started this project from the ground up, doing research on best practices, prototyping and gaining team feedback, testing with future users, redesigning, and then developing this site. I acted as both a designer and developer and was an active member and leader during all of these phases.
Methodology
We decided to be efficient and effective, we would follow the Design Thinking methodology.
The phases of the Design Thinking methodology
Following this iterative approach, we were able to come up with a viable solution to the problem. The following pages show the different approaches we took in each step.
Empathize
Conduct user interviews
We took our time trying to understand our user’s needs and problems by:
-
Interviewing current developers on the platform
-
Spending time with teams to understand the experience of and problems faced when trying to onboard onto the platform
-
Identifying their immediate needs so that we could scope out an MVP
-
Hearing their ideal desires for later iterations
-
Understanding the problems the UX team faced when reviewing and collaborating with the onboarding teams
A picture of one of our discussion boards
Define
Conceptualize problems and solutions
We took several steps to define both the problem and potential solutions, such as:
-
Defining the problems and groups facing those problems
-
Gathering insights from interviews and sort through the feedback
-
Translating findings into functional requirements
-
Conceptualizing solutions using our research during the Empathy stage
A picture taken during one of our brainstorming sessions.
Ideate
Research and sketch
We spent time researching and ideating to come up with ideal solutions for all users. Our methods included:
-
Researching best practices for asset and pattern libraries, both internal and external resources [insert other libraries we researched]/old site
-
Learning tradition UX methods (as 2 of us were new to UX as a topic in general)
-
Sketching prototypes based on insights from research
-
Focusing on site structure and page layout
A collection of some of our original layout paper prototypes.
Prototype
Lo-fi to High-fi
During our prototyping phase, we focused on
-
Creating paper prototypes
-
Modifying site structure and page layout from initial sketches
-
Using interview findings to determine the content to be provided in the library
-
Obtaining feedback and ideate with the UX team
-
Creating clickable versions of prototypes in Axure RP
-
Integrating feedback into new prototypes, update from lo-fi sketches to high-fi functional prototypes
A screenshot of one of our prototypes used during testing.
Test
User Testing in the Lab
The testing phase gave use of considerable data and insight from the users. During this phase we spent time:
-
Testing all versions of lo-fi prototypes with developers using the UX Lab to perform and record tests
-
Testing both usability and functionality of the site
-
Testing higher fidelity prototypes with end-users to gain feedback on more final designs
A picture taken during one of our user tests.
Final product
Screenshots of the Asset Library today
Though we only had 5 months to complete the project, we were able to create a usable MVP. It has since been iterated on and is more resembling a full Design System with each version released. We are proud of the work we completed in the time we had.
Feedback and analysis
Google Analytics data from June 2017 - August 2018
Since the end of the MVP launch we were able to track the use of the site through Google Analytics. This helped our team learn more about the usefulness of the product and how much retention we had/have.
Our first users said the UI Asset Library increased the speed of on-boarding to the platform. They appreciated the access to components’ code and usage.
The UX team said it helped give tangible feedback to the teams on-boarding, they finally had something to point teams to first so weekly reviews could focus on detailed feedback and faster sign-off.
Lessons learned
I learned a great deal working on such a high stakes project. It was extremely rewarding work and a great lesson in working through the full design process. Here are some of my main takeaways:
-
Prioritization is key. Some great features may need to be cut for a current iteration to succeed. Don’t let it get you down. Focus on the main needs of the users first.
-
Test, and test, and test. You’ll never know if it’s right until the users tell you it is
-
Avoid confusing users with mid-fi prototypes. We learned this the hard way. When we did a round of A/B testing we used prototypes that we were able to muster without being fully hi-fi. The colors, fonts, etc. ended up being major user feedback. Avoid that entirely by presenting them a product that looks like the end-product. Or as close as you can get.
-
Strictly following the Design Thinking methodology can be a challenge, but totally worthwhile.
-
Seek other designers’ aid if you are hitting a roadblock. We held a few full team sessions to gain feedback. Asking more senior designers to help talk through issues was both a great bonding and great learning experience.
After working with the UX team on this MVP, I moved into a frontend developer role with a different team to test my development skills before being promoted to a lead UX Designer.