How to create a great Design System for your brand
“Aesthetics are the language of feeling, and in a society that’s information-rich and time-poor, people value feeling more than information.” — Marty Neumeier.
This quote by bestselling brand-and-design author Marty Neumeier effectively sums it up. In our digital age, people are more likely to value a feeling over information. This anecdote from a few years ago is a great illustration:
Our friend called us up one night, and without so much as a hello, told us to go to a random website. He was excited and seemed to be running on adrenaline. We went to the website and immediately noticed that it was for a beautiful looking brand. From the logo, type, colors to animations, it was striking. In the main header, there was a live counter that was flipping relentlessly. The number in the counter: $100,000,001 and escalating fast.
It was 2017, and we were at the beginning of the Cryptocurrency ICO bubble. The company raised 100 million in one day, and most of these millions weren’t raised by investors persuaded by the company’s business plan. Many of these investors were going off nothing more than a referral from a friend and a gut feeling based on the website’s presentation. (And yes, we were one of them).
After that call, we got a lot of requests to build brands for cryptocurrency projects. We soon realized that as the cryptocurrency market got more competitive, projects with a well-articulated story, vision, mission, values and beautiful visuals to reinforce these attributes were raising all the money. Investors weren’t even looking at business plans. If the brand looked and felt legitimate, they would invest.
We’ve helped build many successful cryptocurrency brands since 2017, including Buzelle, one of the fastest ICOs to reach its goal. For that project, we helped the team create a strong brand vision, strategy, story, and visual design that was fearless and reinforced the company’s values and personality. The company raised 20 million in two days from thousands of people around the world.
The Gateway to Success: Brand Thinking
During the cryptocurrency boom, we also saw a lot of fantastic innovation and R&D projects fail. The number one reason was not the idea or the team, but, the lack of brand awareness from the people behind the projects. The brands themselves didn’t land with consumers. Brand awareness means knowing your brand’s unique DNA, values, personality, story, AKA your strategy system, then pairing your strategy to a design language that helps you relay that story in seconds through a look and feel — your design system. The final step in brand thinking? Knowing your growth strategy and metrics so you can test to either pivot or persevere — your growth system (which we will cover in our next blog. Stay tuned!).
With that said, we will see a massive change in the way people perceive and talk about brand in this decade. Companies and leaders are going to use brand as a thinking, strategy and marketing tool more and more.
If you’re just jumping in and unsure what we mean by brand thinking, we wrote a blog all about it. If you missed our breakdown of how to build a strategy system for your brand (the first pillar of brand thinking), see our blog on creating a strategy system for your brand.
This article is the continuation of our Brand Thinking series. Today, we’re focusing on taking your strategy system and transforming it into a sexy design system that reinforces and elevates the brand strategy — remember, a picture is worth a thousand words.
How to Create a Great Design System
Here’s a statistic that will make you think: the average bounce rate of a website is less than 15 seconds; that’s how long you have to capture people’s attention and convey your message. If your website and brand don’t feel right, people are out.
We recommend creating your design system within a tool that’s easily accessible. We use Miro and Figma because anyone can access them without logging in. They are also incredibly easy to use — imagine having a massive whiteboard in the middle of your office with your entire brand strategy, and design system organized in it. That’s the power of Miro and Figma.
We have updated our free Miro template with all the exercises in this blog. The updates will be available in the next couple of weeks. But for now, below are the foundational elements and exercises with examples to creating a beautiful design system that captures your brand DNA:
Direction
A strong art direction is critical in the success of any design project. Your art direction sets the tone, vision and artistic style of your brand.
A solid art direction keeps everyone inspired and aligned. It gives everyone an idea of the brand’s look-and-feel without designing anything. If you have a clear vision of where the project is going and how to get there, the results can save you time and money. Remember, it’s all about rapid evolution. Below are the stages for establishing the art direction of a project:
Get Inspired
One of your art direction’s most important roles is setting the vision and tone of the project. This requires inspiration. Take a walk in a new neighborhood, rifle through magazines and go down a rabbit hole on the web before starting. Keep in mind that surrounding yourself with art and innovation will give you a more diverse, unique and exciting artistic direction.
Create a Mood Board
Image from our Free Miro Template
Once you’ve nailed down the strategy of your brand and are feeling inspired, it’s time to translate that into visuals with a mood board. There are tons of free online websites to get inspiration for your mood boards, including Pinterest, Dribble, and Behance. A mood board can consist of anything that inspires the project, including colors, textures, fonts and images — anything that speaks to the creative direction, values, and personality of the project. A mood board serves as a reference for your team, giving them the chance to ask questions and share feedback. It also helps ensure that everyone is aligned.
Pro-tip: add the values and personality words from your brand pyramid on the mood board to see if the art direction you are going for reflects your brand. If the words feel in place, you are going in the right direction, if they don’t, you might be getting distracted by pretty pictures and losing sight of your brand architecture.
Giving (and receiving) feedback at every step of the design process is critical to ensuring that everyone involved is happy when the project completes. Validate your ideas often to make sure your work is in line with the vision, as well as with your client or business partners.
Sketching
In our hyper-efficient digital world, pencil sketching sounds like going back 100 years. But there are scientific benefits to sketching out your ideas, and we always recommend it. According to research from the National Center of Biotechnology Information, sketching enables the ability to think differently, encouraging open-ended thought and creativity. Below are the best frameworks we have found to effectively sketch your ideas:
Crazy 8’s
Image from our Free Miro Template
Crazy 8’s is a rapid sketching exercise that challenges you to sketch eight distinct ideas in 8 minutes. The goal is to 1) push beyond your first idea (often the least innovative), and 2) generate a variety of solutions to your challenge. The critical thing to remember with Crazy 8’s, is these are rough sketches — they don’t need to be perfect, they just need to communicate the idea. They also don’t have to be great ideas, so take the pressure off! This exercise is about letting go of expectations and letting your creativity flourish. Weird and impractical ideas often lead to inspired ones. It’s called Crazy 8’s for a reason.
- Fold a piece of paper into eight sections.
- Set the timer for eight minutes
- Sketch one idea in each rectangle, trying your best until all sections are filled
- When the timer goes off, put your pen down
Solution Sketches
Image from our Free Miro Template
The second exercise is a continuation of the one above. You’re to choose one concept to expand on that you feel is the best solution. This fully fleshed-out concept can be completely new, an idea from Crazy 8’s, or a combination of the two (it can even include other people’s ideas).
A detailed solution sketch includes three frames or states of the concept to help illustrate how it works and a clear title to help people remember it. Don’t be afraid to use multiple frames, pictures and words to communicate your idea, the more detailed, the better. [Design Sprints]
Digital Prototype
A prototype is worth 1,000 meetings, so once all the details related to your art direction are sorted and your sketches are ready, it’s time to move on to a digital prototype. Your digital prototype is an amalgamation of everything that inspires your project — from your strategy system to the art direction to sketches. Interaction Design Foundation defines a prototype as “a simple experimental model of a proposed solution used to test or validate ideas, design assumptions and other aspects of its conceptualization quickly and cheaply.”
Building a prototype might sound intimidating, but it’s actually the fun part. The following exercises will have you well on your way:
Magazine Ad
Image from our Free Miro Template
In this exercise, you need to grab a magazine mockup template, here’s an example, and create two prototype versions of your brand so you can A/B test with your team and customers.
Below is everything you need to include in each of your magazine ad prototypes:
- Your Digitalized Logo
- Fonts, colors, and imagery that reflect your brand’s personality
- Grid/Layout
- Your tagline and some copy that represents your brand’s values and personality
Customer Test
Source: https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
A brand is what customers say it is. You can perform a qualitative customer test with five people. Avoid letting the law of diminishing returns get in your way of testing. What that means is that as you add more people to your tests, you learn less and less because you will keep seeing the same things again and again. The best results come from testing no more than 5 users and running as many small tests as possible through the length of your project, as Nielsen Norman puts it. Below is how we do our tests:
- Create a Google Survey
- Add your two magazine prototype examples.
- Add the following questions:
- What is your first impression of the brands?
- What name and logo do you like the most and why?
- Would you be interested in learning more about the brand? Why?
Send it to 5–10 people that fit your customer archetype. Voila!
Design System
Once you have feedback from your team and customers, implement the changes into a design system. A design system’s purpose isn’t just to create a cohesive visual feel for your brand, it also leaves you with a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications. [InVision]
Airbnb, Uber and IBM are all great examples of companies that have changed the ways they design digital products and brands by incorporating their own unique design systems. As Chris Messina, tech evangelist and former developer experience lead at Uber, says, “Design systems provide a convenient, centralized and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.”
InVision provides a comprehensive rundown of the importance of design systems and how to build one for yourself. Here’s a quick summary of the steps involved in creating one:
- Conduct a visual audit
- Create a visual design language
- Color
- Typography
- Sizing and spacing
- Imagery
3. Create a UI and brand pattern library
4. Document what each component is and when to use it
Checklist
There are so many little details to consider when creating a design system that all add up the big picture. That’s why a checklist is so important. Going through a list once you’ve built the rest of the design system ensures that nothing slips through the cracks. The following is an excerpt from Mike Moser’s United We Brand. It’s an excellent resource and one we recommend reading:
- Brand name spelling
- Logo
- Distinctive product or packaging
- Company colours
- Company typefaces
- Design, layout and unique UI components
- Distinct visual techniques
- Unique architectural images
- Clothing
- Voice over
- Music styles or songs
- Mnemonics
- Product design that’s tactile
- Textures / Patterns
- Temperature
- Unique aromas
- Unique tastes
- Unique animation style
- Unique experience
- Unique, identifiable CEO, character, or mascot
Depending on your company and goals, you will probably want to tweak or add points to your own. As a rule of thumb, add as many elements as you can to your brand system. Remember, your design system is a living breathing ecosystem. It should always be evolving.
Once you’ve worked through the steps above, you will have a validated design system at your fingertips. The design system is more than the first thing that potential customers will judge you on — 15 seconds, remember? It also serves as a collection of reusable components. And a set of standards to guide those components.
Build your design system with brand thinking as a foundation. That will allow you to communicate your brand values, personality and story to your customers effectively. It’s the visual representation of your brand DNA that makes you unique. And remember, it must be both visually appealing — speaking to people’s emotions — as well as functional.
