Wells Fargo Pioneer Design System

Project Details
Client: Wells Fargo
Project date: July–Sep 2021
Team: 5 Product Designers, 1 Design System Principle
Role: Product Designer
Project Summary
The Wells Fargo Pioneer Design System team switched to the Figma cloud platform in early July out of the need to increase team collaboration. The previous toolkit component library called the CEO Design Kit was built using the Sketch software platform and needed to be completely rebuilt using the Figma cloud platform.
The Challenge
The Select/Unselect All component must be built into the Figma CEO Design Kit to match the Visual Design Specifications as well as the behavioral characteristics of the WFRIA Frameworks API and allow for efficient utilization by Product Designers.
Discovery

About this Component
The Select/Unselect All control is a three-state checkbox control that performs bulk selections in a Data Table, List View or a longer set of form options. This control also provides modest visual feedback regarding the state of the selections.
Business Impact
Selectable, paged data sets must automatically present the Select /Unselect All control.
Research

Steps for Designing the Select/Unselect All Component
Creating Components and Variants in Figma
Creation of Supporting Component Elements
The List of Elements Below will be Created Following Visual Design and API Specifications Used in the Development of the Select/Unselect All Component
- The Select/Unselect All component
- Configuration: Basic and Range
- Status: Unselect, Select and Determinate
- States: Default, Disable, Hover and Focus
- The Select/Deselect All Menu Items Selected
- Text Wrap None
- Select/Deselect All Menu Items
- Text Wrap None
- States: Default, Hover and Focus
- Top and Bottom Chevrons
Select/Unselect All Menu Design

Menu Design Minimum Requirements
- (1) Select/Deselect All Menu Items Selected
- (4) Select/Deselect All Menu Items
- Top and Bottom Position Chevrons
- Menu Minimum Width 182px
The menu design consists of stacking the Select/Unselect All Menu Items Selected element on top of 4 Select/Unselect All Menu Items elements and wrapping them in a frame. Top and Bottom Chevrons are wrapped in an outer frame.
Menu Design Pain Points

Comp 1
The initial menu design comp passed all design requirements but the 182px minimum width requirement. Figma does not feature minimum width controls, the menu width wrapper frame will always be the same width as the menu item widths.
Comp 2
The second menu design comp passed all design requirements. I came up with a creative solution to the minimum width requirement by embedding a 1px fixed height by 182px fixed width transparent border into menu items. The parent wrapper frame will allow for a minimum width of 182px, while still expanding for widths over 182px.
Implement

Once the component designed is approved it will be implemented into the latest version of the CEO Design Kit.
Evaluate

Testing
Once the component has been implemented into the CEO Design Kit, team members are asked to help test the components functionality. We test all configurations and states to make sure that the component is configurable for the end user.
Putting it All Together

Deliverables
Once the component is functioning as expected, we layout the component for all the various breakpoints, configurations and states. Visual design specs are laid over the component’s default state layout so that the designer can reference basic information about the component, such as, padding, margin and content area information.
Final Product

Exhibits 1
The exhibit on the left showcases the following features for the Select/Unselect All Menu component:
- Item Tab 2 responds to the text width and causes the Select/Unselect All Menu component width to expand
- Item Tab 3 Default State Enabled
- Item Tab 4 Hover State Enabled
- Item Tab 5 Focus State Enabled
Exhibits 2
The exhibit on the right showcases the Select/Unselect All Menu component in default mode.
Solution
The final product is a Select/Unselect All component featuring a three-state checkbox control that performs bulk selections in a Data Table, List View or a longer set of form options. The Select/Unselect All component features specifications in alignment with WFRIA Framework that is configurable, responsive and ADA compliant.