Having spent the past 8 months of my academic career working co-ops and internships in marketing & communication roles, my roots actually stem from arts & design. Although I would best describe myself as an early 2000s child as I was born in the mid 90s, the first-ever piece of technology I recall using was a bulky family computer running Windows 95.

The World Wide Web made its surge by 1992-1995. Social media back then was only limited to instant messaging systems—the “Uh oh!” sound from ICQ rings a familiar bell. Instant nostalgia to me though, happens to be Kid Pix, where I’d stamp these bitmap polka dots on a pixelated screen and call myself the next Picasso. I feel like these programs contributed to the proliferation of computer graphics, advantageous of its usability and flexibility, as compared to traditional design mediums.

Fast forward some twenty-something years later, where my brain is now filled with research methods and academia from my undergrad days. Taking a break from the books and joining Rangle in January 2020 as a Marketing Co-Op, was when I first heard about Design Systems. Familiarizing myself on this topic reignited my lifelong passion for design. I thought, with the skills and approaches taught during my post-secondary studies, can be leveraged and used to illustrate the role of theoretical research into creating an effective Design System, which can mitigate various design issues later on.

Conducting design research

There are so many design systems you can stumble upon with just a simple Google search—based on my findings from galleries and repositories, examples of industry-standard design systems include:

  • Polaris by Shopify
  • Material Design by Google
  • Atlassian Design
  • IBM Design Language / Carbon for IBM Cloud products
  • Airbnb Design
  • Lightning by Salesforce

It is very important to note that “one size does not fit all” does indeed, apply to design systems. Just because one design system you might come across looks aesthetically pleasing, doesn’t mean that it will be a good fit for your project needs. Same thing goes with the design system’s creator—if a multinational company whose industry actually lies in e-commerce or hospitality made their own version of a design system (eg. Polaris by Shopify, Airbnb Design).

Design systems are products. To no surprise, creating a successful and effective design system comes with following the traditional methods of design research that has been used from all its disciplines (eg. UX/UI, IA, IxD). You may be familiar with the standard and typical user interviews and surveys, to the more qualitative analogous experiences (web surfing) and contextual design (drawing flow models). These methods derive from long-time subjects from the social sciences, such as psychology, sociology, anthropology, and linguistics. Consider expanding your research scope to include topics from these subjects, as their focus is on the study of human societies and their interactions and behaviour in sociological aspects.

Speculative design

How to use design as a tool to create not only products, but ideas to speculate about possible futures. Designers are also problem solvers—they are given a problem, and are asked to solve it with function and beauty. With speculative design, it is to imagine how these futures can end up entirely disparate, encapsulating moral, ethical, political, and aesthetic problems.

Consider these common questions of design fiction when creating your next design system:

  • How should your design impact the entire world?
  • How should we design to benefit our greater good?
  • What can our design do to influence future audiences?
  • How can future technologies be impacted by our products, services, and designs? What don’t we want to see from the future?

Accessible visual design

In design systems, there are tokens, assets, components, and libraries of variance. Such parts of design systems are synonymous from visual design (eg. colour, typography, images, grids). Oftentimes, people get “design systems” and a “style guide” or “pattern library” mixed up, thinking they are all the same thing. Think of style guides as a type of documentation that describes the look and feel of a brand, pattern libraries as a set that is to be used across a company, and finally, design systems acting as an umbrella for these subclasses—“the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.”

In my early days of graphic design, when it came to producing the visual identity of a brand, the typical brainstorming sessions regarding colour and typography would be based on the client’s needs & wants, and likes & dislikes. This is still applicable today, but with accessibility & inclusion guidelines now in the mix, you want your design to be suitable to the needs of all users too.

What does this look like? Take a read at the AA of the Web Content Accessibility Guidelines, published by none other than the W3C. Start with colour contrast, with the ratio being:

(L1 + 0.05) / (L2 + 0.05)

  • L1 is the relative luminance of the lighter of the colours, and
  • L2 is the relative luminance of the darker of the colours.

An example for text / background would be the contrast ratio acting to at least 4.5 to 1. Still confusing? There are many tools to help with this, one of which being the Contrast app.

While colour is evident and fascinating, it shouldn’t be the only critical tool used to address design problems—people with colour blindness or other deficiencies may have a hard time following through. Try the black & white test print on your printer to see if you can still understand your information. Use web elements like textboxes with labels, icons, and typographical styles (eg. font weights, underlines) for better visual communication. And speaking of information and web elements, write alternative text for your images and other perceptual content.

If your design system follows some of the accessibility guidelines from the W3C, it will have a better chance showing up prominently in search results, reaching a bigger user audience, having a faster download time, encouraging good coding practices, and of course, better usability.

Emphasize accessibility as part of your design research, and know there are always people willing to help.

Visual audits

An “audit” might sound intimidating—adding the word “visual” to it probably won’t make it sound any better. But performing a visual audit before launching your design system will serve as a beneficial exercise to you. Just like what a regular audit means, a “thorough analysis of a project”, a “visual audit” analyzes the design elements that are in use. You will need to manage its bits and pieces, making sure consistencies are in place, that everything answers the “why’s” and “how’s” of your product, before finally, making sense of its brand messaging before you send it out for release. Think of an audit for your design system as an opportunity for reflection—to check on the quality of your work, contained assets, and user experience.

Heuristic evaluations

Stringing along with the pattern of accessible design, comes the heuristic evaluation, “the usability and accessibility of a website or app”. Jakob Neilsen, one of the two worldwide leaders from the NN/g Neilsen Norman Group, published the 10 Heuristics for User Interface Design back in 1994 that still reigns to this day. Although his 10 principles were written for this specific branch of design, they are called “heuristics” for its broad rules of thumb and general usability guidelines.

  1. Visibility of system status - Your product should always be available to its user within a reasonable timeframe.
  2. Match between system and the real world - Users should be able to comprehend your system’s language. Avoid using overly technical explanations and focus on using easy-to-follow, real-world concepts.
  3. User control and freedom - We all make mistakes. But if you make a mistake in an app, you will need a required “emergency exit” without having to go through a lengthy, unwanted process. Consider implementing simple actions such as “undos” and “redos”.
  4. Consistency and standards - Users should not have to wonder whether different words, situations, or actions mean the same thing.
  5. Error prevention - Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
  6. Recognition rather than recall - The digital world has caused the narrowing of our attention span. Make your design contain all necessary instructions to help guide the user.
  7. Flexibility and efficiency of use - Accelerators, unseen by the novice user, may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
  8. Aesthetic and minimal design - Less is more.
  9. Helps users recognize, diagnose, and recover from errors - Error messages should only be expressed in plain language, address the problem, and suggest solutions.
  10. Help and documentation - Sometimes you can’t help it—certain tasks may be too complicated to follow. Such information should then be provided with adequate support.

Atomic design

If you want to get more into the specifics of visual auditing for design systems, Pittsburgh web designer Brad Frost coined the term “atomic design”, “a methodology that allows (and requires) you to describe and organize every component of your design system.”

  1. Atoms - The smallest building blocks of your design system. Examples include text styles, buttons, icons, input fields, and checkboxes.
  2. Molecules - More complex entities, consisting of several atoms. Examples include notification toasts, data values (label: value), input fields with buttons.
  3. Organisms - The truly functional parts of a page, composed of groups of atoms and molecules. Examples include navigations, sidebars, forms, pop-ups.
  4. Templates - Pages without real content. They combine organisms into a proper website layout.
  5. Pages - Once you have a template, you can create pages using templates. An example of a standard page:

If simplicity is your thing, atomic design reduces the gruelings of a meticulous audit. It breaks down elements into digestible pieces that allows for timeliness, uniformity, and less components.

Compiling it all together

With all of your hard work now paid off, how do you know when your design system is effective? There are some gaps that we still need to fill in—one being documentation.

Initially when I thought of documentation in design systems, of course my academic mind instantly thought of “research” documentation where you look up scholarly articles and reference them in a works cited. Documentation tools in design comprise of information retrieval and feature version control, so you can go back to a previous version and see what fallacies you made that you want to improve on. Design system documentation also inspects components and variables, managing all digital assets, in addition to programs even syncing up with your design tools when you’re at work, such as Sketch, Figma, and Adobe XD. Prioritize your needs according to importance when deciding on a documentation software. There are many types available—pure documentation like Gitbook and VuePress, and design documentation like Zeroheight and Frontify.

You have heard of the phrase that you can come up with multiple solutions to one single design problem, and design isn’t a linear process too. Not all design systems are created equally, as there will always need to be room for improvement. What is the state of design for 2020?

“The future is interactive, accessible, and uses tokens.” Google Material Design

Building a design system is an exciting venture, but it is also a strenuous task that requires the involvement of many people—not just those in the design and product teams, but also developers, project managers, even test users and clients, and various stakeholders—the list goes on and on. Your well-crafted design system is a product, but it can be more than just a product. Your audience is of your fellow designers, but your reach can be more than just your designers. With the right dynamic, design systems can help bolster and value a proper design thinking mentality across all aspects of the organization. Some even launch their tools to the public to help establish themselves as a leader or pioneer in the industry. Design systems are here, and they are to dominate the state of design this decade.

Further reading