Design systems; why your brand should have one
Design is a vast field and thus often perceived as an ambiguous term - not the word design itself, but what it means. Design can be visual, systematic, technological, and much more. Working in tech, you’ve probably heard of design systems, so let’s dive into what it is.
TLDR;
1. A functional design system enables organisations to put more effort into finding the correct problems to solve instead of solving one specific problem.
2. Agile execution is essential - you should have predefined components and designs to reuse.
3. Predefined design enables a team to use components from the design library to quickly communicate, visualise and even test ideas - facilitating swift cross-functional collaboration.
Design systems allow successful organisations to respond quickly to user behaviour and needs while daily pushing new code to production. It’s not the only reason, but an essential one. In a nutshell, a design system is about not having to reinvent the wheel every time we put something new into production. It’s pretty senseless to design and develop buttons, tables & input fields - more than once.
We can use existing components to create new services and products while keeping them on-brand and use the same design patterns that our users and clients already have “learned” by using our service. Teams across an organisation can follow the same principles and guidelines to keep a consistent experience and “look and feel”.
When all components are fully specced and usable, implementation will be incredibly efficient. We’re no longer building things from scratch in every sprint. Implementing already scalable, specified and developed components provides us with the necessary agility. Another positive side-effect of this is that we don’t necessarily spend all the allocated time on building everything from the ground up, creating room for the team to focus more on what problems we are solving and if it’s the right solution. This will, in turn, provide more value to our users and better service.
Atomic Design methodology, principles & LEGO’s
Atomic Design is borrowed from Chemistry, specifically the periodic table of elements. Created by Brad Frost and based on the study of The Composition of Matter. A design system is a fixed set of atomic elements, like buttons, badges, links, toggles, etc. Simply put, things you may interact with, but stand-alone don’t provide much context. You’ll start making molecules when you combine relevant atomic elements, providing slightly more context and purpose.
LEGOs can be a solid metaphor for this. A single piece from the set can be considered an atom. And standing alone, the piece does not provide much context or value. However, when you combine them, you start giving the pieces (atoms) context and thus value. Building the set, piece by piece, will, in the end, provide you with a complete structure and finished product.
In a design system, the first combinations will provide you with molecules. For example, a simple button can be an atom. An input field will also be considered an atom. Combined, they’ll make up a molecule. In a bigger context, the molecule will be part of an organism. It sounds like rocket science, but it’s not.
The more elements you build with, the more complex the construction will be - but you’ll end up with complete pages ready for production in no time. You can split a design system into the following sections;
Atoms
Consider this one element, a button, like LEGO, a single piece. You can’t split one brick into two pieces. An atom will come in many shapes and forms in a design system. A button is not just a button, as it comes in various states.
Molecules
Molecules are combinations of atoms and make for some valuable components in the design system. Molecules establish patterns in the system, like placements of CTA buttons, links, or badges.
Organisms
Organisms consist of molecules and atoms. Providing clear context and can be interacted with in a larger sense. For example, an organism can be a UI table consisting of multiple atoms and molecules.
Pages
Combine it all, and you’ll be able to create pages. Typically a combination of multiple organisms and molecules. For example, if you combine a navigation bar, table, statistics bar, and top bar - you’ll have a whole page.
Never absolute
A design system evolves. Components, layouts, and technical specs must adapt to user needs and developments. I’ve observed web 3 for a few years now, and from a design perspective, web 3 has brought some new patterns and UI interfaces that are unfamiliar to most people. These changes require the users to learn new ways of interacting with the various blockchains to complete the desired task. As a result, design systems must continually evolve, and web 3 demonstrates that a design system must keep up with the times.
Also, the team will likely need to change or update aspects of the service as they learn and gain new insight. A design system must be robust and flexible enough to handle various cases, states and the addition of new atoms, molecules, and organisms.
However, you’ll be well on your way by following a set of UI conventions and best practices.
Accessibility; is super-important.
In finance, you must be regulatory compliant to deliver your service to the public. The same goes for proper design systems and accessibility; an interface must be usable for people with disabilities. That means that colour contrasts, text sizes, focus states, and screen readers must be functional. It’s unfair to assume that every user will have perfect vision and steady hands and be able to use the interface exactly as you planned. So, design accordingly.
Even though gradients are flashy and look smashing, designing usable interfaces that handle your and other people’s money shouldn’t look like you took acid. Be balanced and think things through two or three times before making every CTA button a gradient colour explosion.
Here is a checklist for you to remember:
- Contrast ratio: Buttons, tags, tables - everything (AA is okay, AAA is the safest).
- Text sizes across multiple devices and browsers.
- States of components, how will things look when users only use their keyboard to navigate?
- Native text sizes and density should be flexible for various preferences according to potential disabilities.
- Check your screen reader.
Following established WGAC standards, you’ll be well on nailing your accessibility issues and concerns. Putting these standards into your atoms and molecules will also remove uncertainty when pushing new features or updates into production. In Norway, you are, by law, required to design accessible interfaces and solutions.
Make it easily accessible for the team, too.
There is no better software than Figma for UI design documentation. Figma allows for creating components, symbols, and styles, making it a co-op multiplayer tool for everyone involved. You also have Figjam, a solo or collaborative workshop tool where you can create anything on an enormous whiteboard.
Fun fact: before even thinking of pixel-perfect design, we wire-framed the entire Presail platform in Figjam (Mobile + Desktop). The wireframes help us think about the problems we are solving while not getting too tangled up in how things will look at the end, but that’s an article for later.
Regarding components, Figma is excellent for keeping a single source of truth. A design manager can update any component defined as a symbol, and the symbols are updated globally inside Figma. They save you time as you don’t have to update every button, screen, and document. When handing it over to a developer, all assets will provide usable CSS values and specifications to translate this into functional code.
At Presail, the UI Library is available in Figma, and the predefined components are accessible to the developers. The relationship between Figma and live components on the platform must be tight. So having an overview of what’s what and knowing that you can’t update one without the other is crucial.
Introducing Nakamoto
Presail is launching its design system. Much like the initial ideas about blockchain technology, it does not matter who created the system, only that it is available and accessible to everyone. The system is a collaborative, cross-functional initiative defined by product managers, developers, and designers.
Nakamoto will enable Presail to test quickly, fail, learn & improve on our service - giving us the speed and agility we need to maintain our competitive edge in the space.
