Accelerated design velocity

Responsibilities:

Design Systems, Design Enablement, Component Library

Role:

UX Designer

Key Outcomes

Standardized components

A single repository for components to be called into design files on-demand increased design standardization across designers.

All new icon library

A new and streamlined icon library standardized icon usage.

New component design

Designed new components from scratch, ready to be used.

Increased design velocity and quality

Creating a single place for designers to go for updated components helped reduce project completion time by 10%

Background

Throughout the process of evolving the Duo brand, duo.com had to evolve with it. With thousands of pages, it was impossible given the budget we had to overhaul the website overnight. As a result, duo.com faced a major issue—design standardization.

The Challenge

As we'd implement new styles, components, iconography, visuals, there would be confusion across designers on what was actually decided upon, causing friction between designers and inevitably delaying projects, or having discrepancies across the site. While these things were most likely to be overlooked by the common user, we wanted to eliminate this issue and increase our design standards.

I took the initiative to spearhead this project as the team member that wanted to push the boundaries of our Figma design maturity. We had weekly Figma learn and practice sessions and I wanted to implement my learnings through a project that could help all of us, and impact the business positively.

Background

Duo.com has gone through several iterations of a navigation redesign over the years as Duo has grown as a company with more offerings every year. As this expansion happened, the navigation slowly grew to be more complex, with user data showing that many areas of the navigation were being under-utilized.

In effort to be proactive about making the overall user experience better for duo.com, the design team (me and my design lead) wanted to target one of the first points of contact for many users–the navigation.

Goals

We went in with these three goals:

Research

Conducting a component audit

The first step was to take an audit of the components that existed across the site. Internally, we didn't have a document or Figma file that held all of our components that was constantly maintained and updated. Of course, this was frustrating, but this is why this project was so important and necessary!

Reverse engineering the current components

Typically, design systems and component libraries are created and maintained at the start of a product or website's creation. However, the Duo site never had one and since the site was passed down without need (or budget) of a complete overhaul, it has been adjusted in increments over the years without major documentation.

This made the project feel a bit more daunting, but I knew it had to be done, and it would ultimately be incredibly satisfying to have this to standardize design, innovate, and work together better as a team.

The tools in my kit

Thankfully, I found a tool called HTML to Design, which converts any website into editable Figma designs. I used this plugin to ensure my designs matched the site down to the pixel, the same way it was developed. The design files I had for many components had inconsistent use of typefaces, fonts, etc. making it unreliable to use. To be honest, the project would have been a lot less effective without a tool like HTML to Design. It would have made designing concepts quicker, but making developer hand-off a lot less efficient.

Starting small, and then moving up

I studied best practices for design systems and how to organize a component library in a way that could continue to grow. I took inspiration from the Webex design library, which was done by a great agency that was incredibly thorough with their work. To me, that was a great target to aim for, knowing it wouldn't end in the same result since their design library was created as part of a complete redesign of webex.com.

I first started with the smallest pieces and moved upwards:

Buttons
Headers

*Note: these are screenshots of the Figma file so they are lower quality. This is for the purpose of showing you the organization of the file.

And then from there, since this is a marketing site, I organized components via categories on how they enable the business:

Product & Solutions
Credibility
Resources
Promotions

Removing the subtext and utilize two-column text wherever possible to make all parts viewable for 100% of users

Maintain a space for brand personality and promotion to increase hot leads

Utilize icons to call attention and thread design across the site

Remove repetition for CTAs to make it clear which actions and pages are prioritized

Build in accessibility by having the highest level navigation headers only pull out the navigation, not take the user to another page

Remove arrows and utilize arrows only when pushing a user out to a separate site domain

The "Backend"

I would call the above the "backend" of the component library, since it doesn't look like the most user friendly (because it's not), it is a bit complex but organized in a way that is flexible for a designer to come in and maintain. Most importantly, it is functional. It houses variants of colors and patterns.

The "Frontend"

For the typical designer that wouldn't be maintaining this, they would simply enable the duo.com component library in their Figma file, then drag and drop.

You can see that here when the library is open. There are a few categories to choose from:

Icons
Project Thumbnails (to indicate status of a design project)
Fixed Page Elements (foundational elements like screen size, navigation, footer)
Components

Here's a very basic example of how it could look for a designer using the library:

Icon standardization

We decided as a team that we would shift to new icons that were more bold, and felt more like the new Duo. Since our team is small we didn't have the resources to have a dedicated Marketing Icon library set, so I set out to make one. I drew from my knowledge as a previous Product Marketing Manager to assign icons to a meaning that could be used across the site.

Before this, we ran into the issue of having multiple icons represent various meanings or products, leading into a delay in designing and in the handoff for development. This was due to icons in the CMS having the same name and being confused with another. It would often result in the wrong icons being used in places that they shouldn't be. To make matters more complex, areas we were using icons in some components had specific image size requirements which meant icons for those cases would need padding.

Long story short, there was a lot to streamline for the icon segment of this library.

Icon audit

I combed through the site to note what icons were being used where (on the top level pages and the pages that I knew we had updated with new styling). I documented all of these and noted what meaning was assigned to each icon.

You can see in this image, within the both categories, we had quite a few icons, old and new, and of different sizing.

From there, I grouped together similar / overlapping icon meanings so that we have flexibility in icon usage and also meaning within a limited scope. This process was a long one, but here's a glimpse into some of it:

Refined Icon Library

After getting approval for the icons with standardized meaning, I tackled the challenge of organizing them in a way that was clear, clean, and scalable. We wanted to make sure this was clean on the backend as well since it could be a constantly updated document that can be referred to by our content team (who do not use Figma).

Impact

Over the next quarter after I had shared the first iteration of this component library, we saw an reduction in time of project completion (reduced by 1 full day!). While this project was an internal project, it helped us make strides in delivering more projects at a higher quality.