Design System Colors Page

Overview

UX Wizards is a design community for enthusiasts of all levels to share knowledge and grow together. UX Wizards launched the first Design system on April 14, 2021 (I joined this first design system project and worked on Logos and Icons page). For the next project, the Design team decided to create the Semantic Colors and Dos and Don’ts sections for the Color page to use colors more intentionally. As part of this update, the existing Colors page was redesigned.

Challenge

UX Wizard has over 10 designers who are working on websites and products. They use brand colors but the usage is not consistent. e.g. One site uses a purple color for the link and the other site uses the same purple for the header text. Users need to remember color usage for each product.

Goals

Create a color guideline to use color intentionally in order to Increase brand cohesion and better user ability across digital products. In addition, reduce color decision fatigue for designers and developers.

Steps

Our plan was to complete the project in 4 steps:

1. Create Semantic Colors
2. Create Dos and Don’ts
3. Review Existing Page and Redesign
4. Review Overall Consistency

This way we didn’t feel overwhelmed and were able to focus on one section of the design at a time. In the final stage, we reviewed the overall page design and content consistency.

1. Create Semantic Colors

Learning from mature design systems

We started with research to determine how established design systems display semantic colors on their website.

We took screenshots and categorized them by similar style

Our favorite user interface was E-trade

What we liked about it

1. There are links that take to the category.
2. Colors are categorized by usage, therefore scannable.
3. Each color swatch has a copy function, users are able to copy HEX, Class, or SASS in one click.
4. The color and description are grouped together. Even though there are similar color shades, it is clear which color should be used.

Other findings

• Gitlab has straightforward and clear descriptions for its color guidelines. However, It would be nice if the description came with color swatches so people knew the exact color they meant with each description.
• Shopify (Polaris), and Atlassian have Semantic color charts that are a nice overview.
• Salesforce, Atlassian, and E-trade have brand colors and semantic colors grouped together. This shortens the page.

Audit existing products and categorized color use

I audited UX Wizard’s digital products (Website and Design system) and took screenshots of key components. Then I categorized them into Background, Buttons, Links, and Accent Colors to see which colors are used. These screenshots are shown below.

Created semantic color categories

After the exploratory research and audit products, we discussed the design layout and the semantic color categories we’d like to include. We selected colors that can be the standard for each category like text, button, and background colors. We hadn’t had error and success colors, but we decided to add them to the page for future production.

Design semantic color Version 1

By using the semantic color categories, we created the Design version 1.

Feedback session with executive board members and a Web lead

We conducted a feedback session with our stakeholders using the V1 Design to ensure our design was heading in the right direction.

The feedback we received was:

1. Breakdown sections more to reach an item quickly
2. Add examples usage to showcase semantic colors in real practice
3. Error and success colors look too saturated. Test more colors to find ones that match our brand

Given this feedback we did 3 iteration to address the issues brought up in the freedback session.

Iterations

Iteration 1: Breakdown sections

We made this change to find an item quickly. Before Text, buttons and banners were in one section, now we created a separate section for text and buttons. The banner color was moved to under the background. In addition, we created Borders and lines in their own section.

Below is before and after changes in detail.

Iteration 2: Add examples usage

To showcase the color guide in real practice, Max made this sample design.

Iteration 3: Error and success colors

We received feedback that the error and success color looks too saturated, but how can we judge which color is the best? Just looking at the color is hard to tell whether this color works or not. To overcome this, we created a sample UI. Then we picked 3 potential color pairs and applied them to the UI to compare the colors.

2. Create Dos and Don’ts

The Dos and Don’ts section is to ground the color guideline to showcase how to use colors effectively and avoid mistakes that we found in the past. Chaela made the Dos and Don’ts content and Max and I stylized it to fit the rest of the content.

3. Review Existing Page and Redesign

Semantic color and the Dos and Don’ts sections were done. We moved to review the other sections on the existing colors page. We had been using the existing page for over 6 months and it was a good opportunity to come back and iterate the design.

The diagram below shows the overview of all of the changes we did.

Should we keep the code snippets or remove them?

We started the discussion about what changes to make with “Should we keep the code snippets or remove them?”

I wanted to simplify the existing design to be more scannable. I brought this up at the team meeting and we had a big discussion. Designers had different opinions. Some agree, and others thought it better to keep the code snippets. We couldn’t come to a conclusion at the meeting, so how should we decide? We decided to ask users. How users have been using it? Is it a useful feature or not so much? Instead of assuming and designing, we conducted a user interview.

User feedback on existing color page

We asked 5 designers and developers who used the existing website for 6 months to get feedback.

Feedback we received

• Have you used the CSS/HTML code snippets feature in the last 6 months :
  • No one used the code snippets feature in the last 6 months.
  • Feels redundant to repeat code snippets for each color since the difference is only background Class name.
  • Have one code sample and the rest can be removed.
  • Can we move code snippets moves to another section or page instead of removing all.
• Other general feedback:
  • Add a color token name. We use token name but we don’t mention it on the page.
  • Do we need RGB and CMYK color codes? I haven’t used those.
  • Nice to have a copy hex code feature. Currently, we need to highlight and copy every time.

Reviewing who is the user and what is the goal of the design system

With the other general feedback we got, we had trouble deciding if we should keep RGB and CMYK values on the page, as this would depend on who our user was. So who is the user and what is the goal of the design system?

• Who is the main user?
  • The main users of this page are designers because our community is for designers. In the future, we could create development-focused pages for things like components.
• Is the Design System for digital products or does it includes graphics?
  • The Design System is focused on digital products

The discussions on the feedback let to the conclusion that we want to make the design simple and make the brand colors the center of the design.

After the user interview and discussion, the team decided what we are going to change.

List of updates

1. Remove code snippets and make brand colors the center of the information to make the page more scannable.
2. Add Global color token and remove RGB and CMYK code from each brand color. Try this for 6 months and bring back them if necessary.
3. Add copy feature to reduce clicks when users copy the hex code
4. Create a components page and move the background code snippets there.

Iterations

Iterations 1 & 2: Brand color swatch

Removed Code snippets, RGB, and CMYK colors. Added each brand color’s tokens.

To remove the RGB and CMYK, we’d like to keep those values in one place. If we decided to bring back the values, we can grab the values from this spreadsheet.

VIEW COLOR FILE

Iteration 3: Copy function

I did a few iterations on the copy feature. The below image was a major change. The original version of the copy icon is small. To copy a HEX code, users needed to press on a small icon area. In the final design, I made the color swatches into buttons. The color swatch enlarges and the Copy HEX text appears if the user hovers over a color. When clicked, the HEX value is copied to the clipboard and the HEX Copied feedback is displayed.

Demo of the copy function

You can see a video of the copy function working below. To have enough color contrast we used a white “Copy HEX” for a dark background and black for a lighter background.

Iteration 4: Move Copy Snippets to Components Page

Even though we removed code snippets from colors page, we decided to keep the code on the components page.

VIEW COMPONENT PAGE

4.Review Overall Consistency

Finally, we have finished 1. Semantic colors page, 2. Dos and Don’ts, and 3. the redesigned brand color section into one page. Now we review the information and design, to make it flow, reduce redundancy and check for consistency.

This page shows the final Colors page

Next Steps

1. The current color swatch is ordered like the original brand guide. We’d like to change this order to be by shade.

2. The colors page is long. How can we enhance the UI and improve usability?