Wells Fargo CEO, or Commercial Electronic Office, is a suite of more than 80 different wholesale banking solutions for commercial financing, payments, receivables and information reporting.
Role: Visual designer
Context
Selected rows in a group of related components were originally a dark brown. Links were not visible and needed to pass minimum accessibility levels for contrast, as well as text.
Process
First conducted an audit-- which components consumed the table component & had selectable lines?
Then conducted color relationship studies; I created a matrix of comps with applied color, including neutral and active tones, to discover possibilities that enabled links to be visible. For stronger colors, I explored a reversed color for the link.
Selected row color chosen and implemented in several components with selectable rows.
Example screen showing a regular data table for account activity.
Color studies for a new row highlight color.
Nested and Grouped Data Table designs
Context
Components based on Yahoo’s YUI, no longer supported, and customers required more organization to complex data tables. The UI for showing children rows & columns that were hovered, selected, and sorted needed to adapt.
Process
I began with simple wireframes and dummy data, iterated with more realistic user scenario. I experimented with text weights and row border treatment to indicate hierarchical relationships. These were presented for internal testing to find one that was most immediately readable and understandable.
Outcome
Grouping and nested data table components were introduced into the Framework component library.
Grouped Data Table examples.
