Loading...

Dell Pattern Library

Documenting Interaction & Visual Patterns
Dell Pattern Library
  • Role: Interaction & Visual Design Lead
  • Dates: July 2016 - Current
  • Client: Dell Technologies

Description

Research, create and complete an interaction and visual pattern library for the Dell Experience Design Team.

Process

Research pattern history, including previous user studies and existing program patterns. Collaborate with team members and subject matter experts to gather unique perspectives and refine flows. Create user personas to target precise deliverables.

A Pattern Library is Born

On my first day at Dell, I was asked to find an interaction pattern. My instructions were to speak to a few key folks, and search current products for similar interactions. There were dead-ends and delights along the way, and after two days I hit on a solid pattern. An adventurous but inefficient process.

In late 2016, I worked on a converged infrastructe program for Dell called ICEE. Although the program never hit the market, the patterns created in the process live on in other products. We lovingly referred to ICEE as a "buffet" of patterns to be consumed by all programs in the Dell Experience Design Group, from web to desktop apps, consumer to enterprise. When the program ended, my position transitioned into one of pattern refinement and documentation.

The first step was defining our process. I broke the current system into respective parts, and quickly saw areas for improvement. Centrally located storage for patterns, as well as pattern enforcement, were two areas needing our attention.

Dell ICEE Pattern Process

It was proposed to document the ICEE patterns in InDesign. I followed this path for a short time before realizing InVision was the superior tool. It allowed rapid production and encouraged collaboration. I created a key called "Pattern Phase" to allow the group to keep track of where the pattern was in our process.

To ensure a transparent process, a strict Revision History was kept. I compiled a detailed overview of the pattern, as well as in-depth documentation around each interation, to guide my team members through the pattern. They wrote their feedback in the comments section, and their input improved UX and visual design.

Pattern Lifecycle

Many patterns begin with a sketch, as this pattern for a user logout interaction did. What followed were team discussions on edge cases and alternates, ensuring we satisfy the needs of all programs. From this collaboration, advanced comps were created and added to an InVision board, where further feedback was gathered and detailed interaction documentation took place.

Once a pattern was approved, the InVision board was used as a template for the documentation content on the Dell Clarity Pattern Library, a web tool for Dell designers and developers.

InVision Boards