Wells Fargo UI Framework - Design System
The problem
Commercial Electronic Office (CEO) Portal needs a scalable and future proof design system. The age-old interface, which was not scalable, requires a modern and responsive UI framework. Hence building a design system, which can be utilized for 1.2 million users of CEO Portal, these users were moving 13 trillion dollars through this portal around the world with a mixture of 99+ services available through the portal.
What is the design system?
The design system is not a bunch of style guides cobbled up together inside the Sketch/Figma files. It is a thought-pattern where one can see a UI framework, concrete governance, a reliable procedure, and a complete set of standards. Design System defines the interaction between business and target customers, cohesively from the front-end to back-office processes - a holistic experience for a multitude of applications under one company's umbrella (Also, after such a long time, that Netflix's Umbrella Academy is extremely cool!)
My role
I joined the team in its early stages to lead the interaction design in a 19-person group, and the team comprised of Visual Designers, Content strategists, Accessibility experts, UX researchers, front end, and backend engineers. I was responsible for UX discovery, designing wireframes for components, cross-team collaboration, specifications writing. We followed the Agile-Fall methodology due to the regularities.
Customer context in commercial banking UX
"Users are not customers", a classic Enterprise products and services challenge. They are employees, and if they make mistakes caused by poor experiences with Wells Fargo products, it will impact workers and their company, co-workers, vendors, suppliers, and partners.
In our initial research, we identified the following observations:
- Task focused – users are in and out and gone.
- Repeat sessions – they pop-in, get info, pop-out sometimes multiple times a day.
- Time and period sensitivities – daily, weekly, monthly, and quarterly, and yearly routines may have different tasks associated with them.
- Printing reliance – for audits and workflow assistance
- Variation in scale – the impact of business logic and screen display vary.
- Data density – Lean and clean layouts widely popular in marketing UI, and the dense screen required by customers support efficiency for the users.
Big picture
Let’s take a look at how the Wells Fargo UI Framework powering up the 99+ services available on Commercial Electronic Office (CEO) portal. All those and 500+ screens in the CEO portal are all designed using Wells Fargo UI Framework.
Let’s zoom in – designing the List Builder component
We designed 64 unique, 90 total components developed between 2.x and 3.x versions. Enabled 99+ of services on the Commercial Electronic Office (CEO) portal.
Discovery
The Dual-Listbox component, it was widely adopted in CEO services. I was tasked to design the new component which compensates the retirement of the old-school Dual Listist Box component, which should be:
- Responsive.
- Touch-enabled.
- Easy to integrate into long-form.
Designing version 1
The first version was designed without detailed user research due to the time-crunch. We focused on making the buttons touch-enabled by increasing the touch target. We followed the MIT Touch Lab principle for touch target, which says, person’s fingertips are 1.6– 2cm (0.6–0.8 in) wide. The impact area of the typical thumb is even more significant — an average of 2.5cm (1 inch) wide.
Did it work? Yes, for desktop, but again, the target was touch-enabled devices, specifically smartphones, and tablets – it failed during a usability test on touch-enabled devices. We failed because we thought increasing the "touch target" will be good enough, and it was our assumption which didn't prove to be true.
Designing version 2
How we solved it? At first, we introduced an interim component, “Modal Select.” It was tap-friendly and followed a similar interaction pattern. It became part of the UI Framework as well.
A switch from the Dual Listbox component to Modal Select was based on our User Research findings, which we conducted in an Open Studio style, and ran tests that range from a list of tasks to be performed to 1-1 interviews with our target users.
Designing version 3
Here comes the List Builder! A component that facilitates the selection of multiple items from a list allows users to edit their choice and reorder the selected list of items. Users can switch between the edit and reorder modes. Sounds familiar? You bet! But let's explore the difference.
Anatomy of List Builder is as follow:
- Triggering Element
- List Builder Panel
- Selection List
- Reordering List.
We did the test and re-adjusted along the way. From our research, we came to know the word "Edit" on the triggering element is a no-no.
Because people were hesitant to tap on something to "edit." Reorder Button was not part of the earlier Triggering Element of the List Builder version but added later when we learned it was not apparent from the List Builder Panel itself.
Documenting for team
As a lead interaction designer for the team, my responsibility is to make sure the final details are captured, following are the snapshots of my specification documentation samples.
Where are we today?
We are now finalizing the 3.x version of the design system, also upgrading the backend of our framework into React technology.
What did I learn?
- Collaboration is critical – more eyes on a design, the more it’s presented to varying opinions, wisdom, and analysis — and this can only eventually improve it. Or, at the very least, test it.
- The process is essential for any size of the project; it gives you a roadmap to navigate through what can be a foggy route. It is especially useful when you’re starting.
- A centralized knowledge repository is a gold mine for everyone. It is crucial to record every aspect of it – this helps team members new and seniors, product managers, near and far in the company can refer to one real source when making decisions.