Users and audience
This design system had to work for large national offices with dedicated web teams, but it also had to meet the needs of smaller offices who have 2-3 people total in their marketing department and no one with web-specific expertise.
Large national offices
- Have a couple content strategists or marketers dedicated solely to the website
- Likely have a small team of designers and developers to maintain the site
- When needed they partner with an external agency for large overhauls
- Core challenge: designers and developers have no collection of components to pull from and need to keep inventing solutions from scratch
Small national offices
- Partner with an external agency to create the website and perform large updates
- Have 1-2 marketers for the entire organization who are split between print efforts, PR, the website, and any other marketing needs. These folks are unlikely to have web-specific expertise but are the ones who maintain the website.
- Core challenge: small marketing team is unfamiliar with best practices and don't know how to write text or select imagery for things like banners, cards, CTAs, etc.
Scope and deliverables
This project had a small budget, so we sent out a survey to national offices and prioritized aspects of the design system based on what they said they needed most. The winner by far? Extensive documentation.
Biggest problems with the current system
- No guidance on how and when to use components
- "Old-fashioned" and "unappealing" design
- Use of colors does not meet accessibility standards
Therefore the deliverables of the project were:
The design system
- 34 freshly-designed components that cover the needs of public-facing marketing sites as well as products and services
- Text styles, new color palette, and spacing tokens
- SCSS package containing brand styles, variables, and utility classes
- Component libraries in Sketch and Adobe XD (and currently adding Figma)
The guidance
- Extensive documentation and guidance for each component
- Resources for designers, developers, and marketers on getting started with the system
- 20 sample web pages that showcase possible ways components can be combined to achieve different results
- Guidance for countries with right-to-left languages
- FAQs
Project team
My role
As lead designer, I designed the system, created a robust component library, wrote the documentation, and coordinated with the developer. I also presented to stakeholders, helped set the project direction and deliverables, and continue to consult on adoption efforts.
Other team members
Also on my team were the creative director who designed the brand in 2014, a couple other designers I directed through parts of the process, a developer, a digital project manager, and an account manager.
Project stakeholders
This project was the epitome of “design by committee:” we worked with two primary contacts who oversee the GS1 brand, a working group of CMOs from five national offices who met every two weeks, and a council of CMOs from 20 of the largest countries who met for large milestones. Ultimately everything we did had to be approved by that larger group.
Challenge
We were working with c-suite stakeholders but building a tool for those in the weeds.
How we handled it
Stakeholders had one week between each of our presentations and providing feedback so they could consult with their web teams who would actually be using the product.
Design process
Visual audit of existing sites
After settling on the deliverables, we did a visual audit of existing GS1 sites from a representative group of countries. We looked at what types of components they were using, what types of pages they had, and how they were laying out those pages. From those observations, we came up with a list of components that the new design system should include.
Design exploration
We started broad and explored many options for visual direction, eventually narrowing it down to three to show the committee. We arranged the components into a couple sample page layouts so the committee could see them working together as a system.
Ultimately, the committee chose to move forward with a combination of options A and B:
Working with an existing color palette
Challenge
Brand colors could not be changed, and almost none are accessible when paired with white.
Solution
We introduced an alternative, darker accessible palette to be used with text when paired with white.
Stakeholder management here was extremely challenging. The brand colors are bright and cheery and do not meet WAAG AA color contrast requirements when paired with white, but adjusting them was not an option as there was a high level of emotional attachment to the current palette. Complicating matters was the fact that the palette contained 20 brand colors as GS1 color codes its initiatives.
The original plan was to have a color system where each hue had multiple values (inspired by IBM's Carbon and the United States Web Design System), but our c-suite stakeholders found that too complex and believed designers and developers would too. Additionally, it's easy to create a color scale for the greens, blues, and purples, but yellow and orange are notoriously challenging to work with in the darker shades as they get muddy and unappealing.
So instead, we ended up with the original brand colors, an accessible alternate for each one, and two darker colors of each hue for interactive states.
We also created a "UI palette" of neutrals meant for text, backgrounds, rules, etc.
Responsive typography
We knew we wanted text to scale appropriately based on the user's screen size, and I worked closely with our developer and wrote a lot of CSS myself to get that to happen. He suggested doing it programmatically rather than defining distinct type styles for mobile, tablet, and desktop. This way, the text scaled automatically as the viewport scaled.
The downside of this was that it made designers' jobs a little trickier since the type styles they'd use for mockups are approximations and not exact values. In this case though, we felt we should prioritize simplicity for developers above 100% fidelity to design mockups.
Final designs
We fleshed out the chosen direction into a fully-fledged design system with multiple variations for each component and that was fully accessible, interactive, and flexible without compromising brand consistency.
Example pages
We tried to stay away from structural, UX decisions as much as possible throughout this project—the national offices know their audience and customers much better than GS1's Global Office, and we intentionally left those decisions up to them. However, there was a request to design what certain pages could look like. We took this as an opportunity to showcase the flexibility of the system and how making different choices with color and imagery could give the exact same content very different appearances.
Component flexibility
One of the key goals of this project was to build flexibility into the components so they could work for different audiences, languages, and preferences while still looking like they belong to the same brand.
Navigation
We created two versions of the main navigation component. The recommended version places the menu items on the right to use space efficiently (this was very important to the stakeholders), and the alternate version has the menu items on a separate row to allow for longer menu items. This will work nicely for languages like German where words tend to contain more characters than in many other languages.
Color
Stakeholders often couldn’t agree on how colorful the designs should be. Should they be mostly blue and orange (GS1’s primary colors), or should they make ample use of GS1’s secondary palette? Because we added the accessible versions of each color, individual offices can determine what’s best for them and their audience.
Animation
Another important aspect to the design was making the interactive components feel more interactive and responsive to the user. This was mostly accomplished through subtle animations.
Cards rise slightly on hover and the shadow beneath them deepens.
Buttons have an option to contain arrows that animate on hover.
Resources and documentation
Creating the design libraries in Figma, Sketch, and Adobe XD
Once the design was approved, we got to work on creating the design files. We started with Sketch since that was the most used by national offices in early 2020. The Sketch library has hundreds of symbols and styles, all responsively created with interactive states, resizing, and extensive overrides. Because Sketch is Mac-only, I oversaw another designer as she created the same library in Adobe XD. We also recently recreated the library in Figma, taking full advantage of features like variants and autolayout.
Documenting the design system
We used Notion as a home for the design system's documentation.
Documentation and guidance were the client's biggest priorities, so in addition to guidance on typography, spacing, and color, each component includes robust information on when to use it, when not to, any content or imagery considerations, expected functionality, the structure of different variations, color use, and several examples.
Getting people excited for adoption
The new design systems was unveiled to the 115 national offices at GS1's annual conference with an introductory video. It was followed by a presentation and tour of the design system's documentation site.
Outcome
Adoption
The project rolled out in the fall of 2020, and national offices have two years to adopt the new design system. Several countries have begun, and I've had the pleasure of getting to answer questions and provide feedback to national offices as they undertake this process. It's clear to me how thoroughly they utilized the resources we created—from using different variations of the components to suit their needs to extending our code in the exact way we'd hoped the organizations would do.
During GS1 Global's migration, their agency partners passed along the message that the designers loved the Sketch library and felt it made their jobs easier.
Next steps
The countries that have adopted the design system are now testing how effective the components are, and there are plans being put in place for them to share the results with the other national offices. This should spread the knowledge and help those who haven’t adopted the system yet.
And though the design system and guidance are robust and we took as much into account as we could, it is of course still the first iteration of what we hope will be a frequently updated project. We’ve made small adjustments to the documentation as questions have made their way to our inboxes, and we’re keeping a list of larger adjustments to make for when there is budget to do so.
Reflection
At the time, this was by far the largest project I had led and I certainly learned as I was going. It was also the first project where I had directed other designers, so I was developing that skill as well. Overall I’d consider the project a success, and the client and national offices are also very happy with it. However we did face challenges that present opportunities to improve in the future:
1. Minimal involvement from external designers, developers, and those who would actually be using the design system
We had the idea in the beginning to include those who would actually be using the system on a near-daily basis in the creation of it, but there were already too many cooks in the kitchen and this wasn’t something the client was interested in pursuing. We often had difficulty explaining web concepts to CMOs, who deal with things at a much higher level than the design system their sites use.
For example a lot of them didn’t understand that buttons often get a shade darker on hover so we needed to add a special darker color to the color palette, and we got a lot of pushback on this. They felt the addition of hover state colors made the color palette too complicated and difficult to follow, and we spent a couple weeks convincing them it was necessary and designers and developers would be able to understand the concept.
I think we handled this the best we could by encouraging the CMO stakeholders to meet with their web implementation teams regularly to solicit their feedback, but if presented with the opportunity to redo this project I think I would be more insistent on working directly with those on the ground instead of the people they report to. One possibility would be to have each CMO select two people on their team to attend project meetings.
2. In the absence of data, accept that decisions will be made based on personal preference and work that into the solution
No testing of any kind was included in the project budget, so when there was a disagreement on the specifics of a component we only had third-party research to fall back on. Often this just wasn’t convincing to the stakeholders and they relied on their personal preferences to make decisions. Naturally, those preferences often conflicted with one another and we were left having to solve for all of them.
A lesson we learned early on in the project was that we needed to take the approach of covering all our bases. Some stakeholders liked a constrained use of color, sticking to the two primary brand colors, while others wanted to use the large secondary palette. So we had to make sure the system works with any level of color diversity. Some stakeholders loved big, full-width components with eye-catching imagery, while others felt they reduce page scroll and overall engagement. So we had to include two different versions of a lot of components: some that took up the entire width of the screen and others that left margins on either side.
Because we knew the national offices would ultimately do what they wanted on their websites, our mentality was that it wasn’t our job to tell them what to use and what not to use—it was our job to make sure that no matter what they wanted to use, we had a solution that fit within the brand.
