Dow - Design System

UI/UX

Brandwidth

2022 - 2024

Website

2 Design Directors

5 Designers:

• 2 Leads
• 2 Seniors (inc. me)
• 1 Junior

1 User Researcher/Strategist

1-2 Project Managers

10+ Developers

With the constant expansion of Dow’s digital projects and branding for new campaigns/partnerships, the creation of a design system was becoming increasingly necessary. What initially started as a UI component kit to work within Dow’s existing branding and dow.com components expanded significantly to become a larger, more futureproofed/scalable ecosystem called the Digital Customer Experience Design System. Our initial goals when the scope was still treating this like a UI kit rather than an entire design system were as follows:

• make existing components in dow.com and other internal Dow avenues more mobile-friendly
• identify and address typographic inconsistencies throughout existing components with a more uniform set of sizes, styles, and spacing that meet minimum legibility requirements
• make adjustments in order to comply with W3C accessibility standards, when applicable
• create and maintain an icon library
• collect, categorize, and organize all existing components across Adobe XD, Sketch, and Figma files into one Figma file in order to assess redundancies and start implementing the above standardizations

As one of Brandwidth’s senior designers and one of the designers that spearheaded the need for this project, the majority of my tasks involved:

• testing existing and future components against usability and a11y standard
• assess and assimilate/eliminate redundant components and UI elements
• write/revise rule proposals for components and design standards
• update/maintain a Figma variable library that conformed to the new colors, spacing, fonts, etc rules that we were beginning to establish for the design system

I liased throughout iteration and refining processes with our lead designers to ensure consistency, doublecheck ideas and in-progress projects to ensure no overlap. I also did walkthroughs with Brandwidth’s developers (sometimes on my own, sometimes with a lead designer or PM) to make sure that new components and rules would be feasible within the frameworks of current projects. Outside of these design tasks, I would sit in on multiple check-ins each week with project managers from Brandwidth and Dow to address deadlines or issues that may have risen.

This was the first design system that any member of the design team at Brandwidth had created. Since we realized that there was going to be a learning curve across the team, our pain points while gathering/assessing the existing components became about:

• researching scale practices of other existing design systems
• building a platform to be able to present the system to non-design/code folks (the temporary solution was a publicly available Figma preview link with a table of contents)
• keeping the working file organized alongside our org chart to see who worked on what
• animation and accessibility examples and updates

Once it became clear we needed to create additional sets of rules, alignments, and components alongside our ongoing revisions and updates, we needed to expand the scope. This meant a few things:

• find a way to eliminate the Figma preview link solution since it was not easily readable or accessible for someone without knowledge about Figma or design software in general
• be able to do more efficient version control on individual components and page updates
• rearrange layout structure to accommodate drastic content updates for larger sections that needed more detailed writing on subjects like accessibility, user personas, and sustainability branding

The goals and progress at the earliest stages of the project were overseen by Brandwidth’s design director at the time, Rich Cousins. Prior to his departure, we had begun addressing additional project challenges that would need to be addressed, expanding the scope from a simple, small-scale UI kit to a larger scalable design system.

Progress continued under Alex Carvalho, who served as Brandwidth’s design director for a brief part of 2023. His insights into this project’s expansion stage were very valuable, due to his greater design system experience. Without his knowledge and supervision, we would not have been able to:

• make a system like supernova.io easy for us to present the system for stakeholders and the public
• create a more digestible information hierarchy for rules and components
• leave enough breathing room within this new hierarchy to allow for expansion and additions
• force the client to make decisions about the validity of older components (thus archiving them and cleaning up the system further)

One of the largest visual challenges was working with the shade of red that has remained within Dow’s branding for almost a century. Dow understandably did not want this diminished or eliminated, so the expansion and introduction of new colors and color rules went through numerous iterations and tests to meet the accessibility concerns. This reverberated throughout the system, improving accessibility and legibility within nearly every component possible.

To say that this system was a success is selling it short. You can see the rollout of these components and new design standards across every avenue of dow.com, its customer journeys, subsequent branding updates, social media content, and other interactive web projects I did for Dow when I was at Brandwidth. The deployment of these new components and design updates are projected to cut development time for new sites and features by upwards of 40% in 2025.

I need to give specific shoutouts to Pete Brown and Paul Tumber, Brandwidth’s design leads, for pushing me on this project in some specific avenues:

• The creation/cultivation of a variable database in Figma. This tool got introduced to Figma during the course of this project, and Pete dove in headfirst figuring out how to make it work for us. It was incredibly useful for updating large portions of the design system more easily, while adhering to the spacing and layout rules we were refining. All the work I did within these particular nuts and bolts is based on Pete’s pioneering.
• Integrate more microinteractions into the components. Before Paul’s input, hover and transition states in the majority of the components were either too blunt or too sluggish. Components now adhere to a snappier animation style, fitting in more naturally with some of Dow’s more traditional-feeling brand elements. This was a simple adjustment Paul pushed that garnered tons of positive feedback.

This was the last project I wound up doing for Brandwidth and is still a big highlight for me, not just for the scale of everything that went into it, but for the ways it forced me to get out of my box as a designer and problem solver.