Background
The
UX Wizards are a community of UX Enthusiasts based in the SF Bay Area. The group started small, with only a few individuals sharing access to a brand guide housed in an Adobe XD file. The
group has grown to include members from all over the world, and it’s time to
move the brand guide online.
One Wizard organized a group of
8 designers and developers to build the
Design System Website so that our guidelines can be accessed by anyone. Instead of just uploading pictures of the brand guide to a website, we dove deeper and made some
usability updates to streamline the creative process.
My role
I owned the Colors page from start to finish. I designed it in Figma and wrote the HTML/CSS code.
It's worth noting that I don't see myself working as a developer. I joined this project to touch enough front end to build rapport with front end devs and design things that are easy to build.
Project overview
The project included:
• The frame site and an introduction
• Who We Are (mission, values, personality)
• Logos and Icons
• Colors
• Typography
• The original brand guide (iframe slides, downloadable asset)
• Contributors page
Each person built their page in parallel, with weekly meetings to check in and course correct if needed.
For this case study, I’ll talk about my build of the Colors page.
The UX Wizards Brand Guide page that I was translating to a website.
Above, you see the UX Wizards Brand Guide colors page I was given. There is helpful information there, and I augmented it by making two main changes:
• HEX, RGB, and CMYK values were only provided for the main variant. UX Wizard content creators had to use the eyedropper tool to sample colors' alternate variants. To show number values for all variants, I needed to update the styling.
• I included HTML and CSS code snippets for each color variant with a component that was provided to me by another developer on the project. This changed the structure of the color info blocks.
Our process
I separate the process into three phases.
Tools
Kickoff
During the project kickoff, we talked about the scope of the project, what our individual goals were, and what our team goals were for the project.
• One of my goals was to learn CSS by creating a public-facing project with real world consequences. I hoped to be able to create common ground with devs for more team cohesion in the future, and to make my designs easier to build.
• One of the team goals was to create an online resource that creators could use to spec their projects and keep UX Wizards content feeling cohesive, no matter who created it.
Competitive analysis
After kickoff, we did a competitive analysis as a group. We looked at other design system websites:
• Google Material Design
• Atlassian
• Shopify Polaris
• Mozilla Photon
• Uber Base
• Salesforce Lightning
• IBM Carbon
Our team really liked Atlassian’s layout. While we pulled influence from other design systems too, we mostly used Atlassian’s design system site as a model for our layout.
We spent weeks 1-4 designing our pages. We met weekly to critique and make adjustments.
Low-fidelity designs
Search might be helpful as our design system grows over time
Each color includes its set of HEX, RGB, and CMYK values. Maybe we can switch to variants with buttons below?
I liked the amount of teaching found in Google Material Design, and wanted to include something like that. We ultimately decided to make our system aimed more at creating assets than educating about design principles, so this section was discarded.
I thought we could maximize screen space by keeping the code snippets in a collapsible drawer.
These sections are based on the original brand guide shapes:
Hi-fidelity designs
Shows clearly which item you're viewing.
This idea was used, but built a different way.
Tabs for HTML/CSS, with code snippets copying to clipboard in one click.
This idea was used, but built in a different way.
Color swatch style is copied 1:1 from the brand guide.
I changed the shape during the dev phase to allow all the values to show on the page at the same time.
By week four our initial designs were ready, and we began implementing them.
During weeks 5-9 we wrote our code, reviewed our progress each week, and prepared for release.
I’ll talk about some of the changes I made to the design, and some of the ways I tackled specific challenges that came up along the way.
From grid to flexbox
In the original brand guidelines, specific color information was only present for the main variant. To use alternate shades, designers were relying on the eyedropper tool to get exact values. I wanted to provide values for all of the variants so I needed to
redesign the layout of the color swatches.
Two of the early ideas that were vetoed by the team were:
• A table-style swatch like Photon's
palettes, because we wanted to retain the large visual color swatches.
• A color-only stream like
Carbon's, because we wanted number value text to stay visible at all times.
I eventually took a lot of inspiration from
Atlassian's color cards, with some modifications.
I started the build with grid.
One of the challenges was indicating which was the go-to "main" color variant, which I eventually solved with a two-column layout.
A goal with the main variant was to draw the eye immediately to the main color, which I eventually achieved by giving the "main variant" a darker header than the alternate shade.
The image below is an early version of that, using non-custom colors from the Tailwind library.
We installed the Tailwind CSS library in the boilerplate and I used it to build the majority of the page. Using Tailwind helped me think about styling more than CSS syntax, which was very helpful. Its colors are limited, so we needed to add our specific colors to it.
Then I updated the styling of the page to make it fit in with the rest of the UX Wizards site. You see the next evolution of the dark header in this version, and I changed the title to "base color."
Note: There's also a background behind the alternate shades. It moves the card forward in space, emphasizing it, so I moved the background to the base color in a future iteration.
I ran into a limitation with grid. On smaller screens, the grid cells overlap!
I solved this with a series of nested flexboxes using screen size percentages so that they'd scale.
You'll notice here that within their column, I changed the alternate shades' succession from horizontal to vertical. This is partially to give room for the code snippet boxes, and partially because one — (just one!) — of the colors has three alternate shades instead of two. Using a vertical layout here gives enough room to accomodate that, where horizontal ordering would not.
The code got more complicated, but it solved the problem nicely.
Another developer provided code boxes for me, which I placed in the build.
You now see the background color behind the base color. Instead of a drop shadow there's an inner shadow, to match another callout element on the page (not shown). The output looks like this:
When I shrink the page, the flexboxes resize and their content doesn’t overlap. Yay!
A note about page width
We had extensive discussions as a group about what to do about screen sizes. Since the use case is probably mostly desktop web use for UX Wizards content creators, we decided to use a fixed page width instead of being fully responsive.
That this project was strictly timeboxed, for the purpose of learning, and largely populated by designers new to coding also played a factor in the decision to simplify.
I anticipate a future project to make this page responsive.
Next steps
For now, the website functions well for its intended use. It describes what colors are available, and I can easily access the HEX codes for any UX Wizards approved color
The next phase of the design system project will add a pre-coded components page and color use guidelines. Specific use guidelines for buttons, links, and more will help give meaning to specific colors, and will help future designers move even faster.
To make the site even more user friendly, I also propose making it responsive. That can be a learning project for Wizards who want to dive deeper into hand-coded CSS.
End
