CEO Design Kit

Project Details

Client: Wells Fargo

Team: 3 Product Designers, 1 Design System Principle

Role: Product Designer

Project Summary

The CEO Design Kit is a collection of configurable components in Figma, Sketch, DSM Invision and Illustrator which is updated biweekly to align with the Wells Fargo Responsive Internet Application (WFRIA) framework release. The components are used like Lego pieces by Product Designers to create web applications.

The challenge

Make WFRIA framework release change log updates in the CEO Design Kit to match the latest framework release before the bi-weekly deadline.


Publication Process

The following is our Process for updating the CEO Design Kit to align it with the latest WFRIA framework release. This is not a deep dive into the component redesign process.

Step 1

WFRIA Framework Release Change Log Request

Twice a month we receive new feature or new component update requests from the latest WFRIA framework release change log that requires us to update the CEO Design Kit. It must be in alignment with the latest version of WFRIA framework.

Step 2


*Feature update example above: Tooltips border update required to pass accessibility standards.

Component Research Overview

To meet the WFRIA feature request, we must study the visual design specifications in order to comply with the updated component design requests. The WFRIA framework components are studied in the API to understand functionality, behavioral properties 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.

Step 3

Needs List

We compile a list of needs for the feature request component updates and track the workload on our working file page.

Step 4

User Testing
*Feature update example above: Tooltips border object styles are updated to pass accessibility standards.

Component Design Updates and Implementation into the CEO Design Kit

We will redesign all components in the WFRIA framework feature request change log and vigorously test the components functionality and behavioral properties before merging them into the CEO Design Kit. The updated component designs will then be added to the CEO Design Kit so that it is in alignment with the latest WFRIA framework release. Once all the latest features are updated in the CEO Design Kit, we are ready to publish the latest CEO Design Kit release.

Step 5

We run through a “Release Publication” tracking list process that covers the following topics:

  • Preparing the CEO Design Kit release for the following platforms Figma, Sketch, DSM Invision and Illustrator
  • Create CEO Design Kit backups
  • Update the Pioneer Site with the latest CEO Design Kit release links for Figma, Sketch, DSM Invision and Illustrator files


Step 6

We run the CEO Design Kit through a QA process that covers the following topics:

  • Look for any flaws in the CEO Design Kit
  • Specs out of alignment
  • Component layout issues

Step 7


Create announcement email that features the following topics:

  • Latest release version number
  • Latest release change log
  • A link to the Pioneer Site for accessing the CEO Design Kit in Figma, Sketch, DSM Invision and Illustrator files

Step 8


Presentation

We present the latest CEO Design Kit updates in the weekly Product Design meetings.

Conclusion


The CEO Design Kit Bi-weekly version update publication is a multistage process that is developed to limit design kit defects and to increase web application standardization across multiple work streams. Consequently, Product Designers spend less time updating components and results in fewer hours spent designing applications.

BACK