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.
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!)
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.
"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:
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.
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.
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:
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.
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.
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:
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.
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.
We are now finalizing the 3.x version of the design system, also upgrading the backend of our framework into React technology.