Tangible Style Guide

Overview

When: July 2018

Length: 8 weeks

Role: UI/UX Intern, later UI Developer

Team: UI/UX Intern (myself), Design Lead, 2 UX Designers, and 1 UI Developer

Task: Create a design system and code component library for use by distributed Freeman Co. development teams

1

Define

When I started at Freeman as a UI/UX Intern the first problem we set out to solve was how we would go about managing all the styles and design components. Freeman is a large 7,000+ employee company with development offices around the world. We set out to create a component library that would be used by the Freeman Digital team in Boise and could be adapted by other teams within the company.


For this case study when I refer to the team or 'we', I am referring to myself, my design manager, and two other UI/UX designers. My role in this group was accessibility auditing, design recommendations, and some UI coding.

2

Ideate

During the ideation we identified four primary components that were needed:

  • A developer site hosting documentation and examples
  • Design tools including compliance auditing tools, accessibility auditing tools, component library, interaction specifications
  • React JS and Vanilla JS component library
  • A base style CSS library

We would work with the engineers and UI developers to create the development pieces. I would create the accessibility auditing reports. The design team would collaborate to design the various components and specifications.

Various email component wireframes in Whimsical
Map of the components of the Tangible Style Guide
3

Build

To create reusable accessibility audits, I would have to find a way to distill the complexities of WCAG into a format that any Freeman designer or developer could easily use. I created a template report that instructed the user how to sequentially audit an app for each of the WCAG sections and subsections. It included tips and examples as well as places to input offending code so the report could be immediately added to a backlog.

Around the time that we started work on the development pieces of Tangible I was promoted from an intern to a UI Developer. This meant that I would now be working with the team that we had tasked to create these reusable UI components. We created a developer site and built code components in React JS. This site contained all the usual UI elements as well as their different states and code examples so that a developer could copy and paste.

A code component card detailing types of indicators
A card containing progress indicator examples and their code
4

Iterate

The next steps for this project would include a roll-out to the extended digital teams. There's no doubt that this process would have caused us to iterate and adapt the component library as it was exposed to new use cases. Not to say we would have adapted each component ad hoc but rather worked to adjust the pattern so it was more extensible in the future.

5

Lookback

What I liked:

  • Working with the designers to create the components then shifting to working with the developers in creating them.
  • Educating the team and extended teams about WCAG and how we can ensure that our apps are inclusive and accessible.

What I learned:

  • Iterative designing of components to create designs that were extensible and reusable.
  • Seeing a project end-to-end and cross collaborating as a designer and developer.

What I would do differently:

  • Engaged the extended development teams earlier in the process. We could have added their input to our research before we reached a finalized component library.