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.

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.

The Select/Unselect All component Visual Design specifications are analyzed to understand the components design requirements. The WFRIA Framework Select/Unselect All component is studied in the API to understand its behavioral and responsive nature. If more information is required than the Visual Design specifications and API can provide, then the Product Designer responsible for creating or curating the components is consulted.

We will focus on designing the responsive Select/Deselect Menu component to simplify the design process.

All elements in the CEO Design Kit are created by using components. Components can speed up your workflow by giving you a way to save and reuse common elements across your design system, keeping things consistent. When you make changes to the main component, those changes appear everywhere you use it in your designs. You can even create variants for specific parts of individual components so that the users can be given options for configurations, states, and text input.

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

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.

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.

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

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.

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.

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.