Design System
Design System for digital content publishing platform.
- Consulting & maintenance
Duration: 8-14 weeks
Timeline: Oct 2019 - Jan 2020
PM & Report: Monday.com, Slack, Gmail.
About client
The success of their Izzi platform has left them in demand for clear design process that put standards in place.
There is where our collaboration started. Building design design system equaled in consistency and speed of software design and development, having unique source of truth and decreasing maintenance cost.
Challenge
Problems to be solved
The larger the organization - the more complex the design and development process is. Ideally, all the teams within the organization (designers and developers) need to share a single design language and set of libraries, that would help them reuse existing design - and code-base and collaborate efficiently.
But design doesn’t scale easily. Efficiency doesn’t emerge from thin air.
Scaling design without putting standards in place, is a myth. With every new hire, or just development of new demanding feature, there are new ideas for color palettes, styles and patterns appear in the product, growing the inconsistency and increasing the maintenance cost. All of this often happens and it’s hard to maintan in long term.
Design system as solution
Here’s only one way to stop the growth of the chaos. Committing to running a design system process. Building design system equals in consistency and speed of software design and development and having unique source of truth.
A design system is a set of standards for design and code along with components that unify both practices. Think of it as the same instructions and Lego kit for everyone.
What is design system?
Atomic principles
As I was considering how to approach building design system, I've looked to existing methodology— primarily Atomic Design by Brad Frost.
Atomic Design methodology involves breaking an interface layout down into its basic components, which are then reused throughout the same interface. The main point in using this method is to create a flexible design elements without reinventing the wheel, with unique source of truth. This means managing elements and components from one unique place, but re-using them in thousands places if needed.
Atomic Design vocabulary and structure has been invented by analogy to atomic theory. Like in chemistry, each element of the layout is basically classified according to its own composition. Or, you can think of it like popular Lego blocks
There are five distinct levels in atomic design:
How to start
The approach
A big question at the start was where will this system live and how would it be maintained. I’ve decided to build it out in Figma, although I worked in Sketch for long time. But that’s story for another time.
Providing A Single Source Of Truth
I started work on the Design System by auditing everything that was available files and folders of previous designs files. My first challenge was pulling together an initial source of truth for the brand colors, typography and grids used across the product. Through this audit, I discovered there were many inconsistent colors and typography as well as many different variations of elements that could be merged in one unique source of truth.
Base (Atoms)
On the atomic level, everything is quite simple.
I've made basic items (atoms) that serve as the foundational building blocks that comprise all our user interfaces. These atoms include elements like buttons, controls, icons and others that can’t be broken down any further without ceasing to be functional.
In the context of a pattern library, atoms demonstrate all base styles at a glance, which can be a helpful reference to keep coming back as we maintain design system. But like atoms in the natural world, interface atoms don’t exist in a vacuum and only really come to life with more complicated elements.
Molecules (Elements & Components)
Here the things are getting a bit more challenging. For molecules (components), I've used only the atoms (items) that were created at the previous step and some of the base elements that I’ve created in style library (font & color styles, shadows, etc..)
In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule. Let’s say we use same input field in multiple form elements. If we change style in base element (single input field), it’s so much easier to mantaint form style because we only make changes in one item that will be applied across all system.
Organisms (Detalied Components & Sections)
Organisms can consist of similar or different molecule types. A header organism might consist of dissimilar elements such as a menu, logo image, navigation list, avatar image...etc. We see these types of organisms on almost every website we visit.
Building up from molecules to more elaborate organisms provides designers and developers with an important sense of context. Organisms demonstrate those smaller, simpler components in action and serve as distinct patterns that can be used again and again.
Page Templates
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. Another important characteristic of templates is that they focus on the page’s underlying content structure rather than the page’s final content. Design systems must account for the dynamic nature of content.
Final thoughts
- For big companies with complicated products, having unique design is a must. Main challenge is to provide consistency across all teams. If an organization wants to change the brand color of an action button, this requires significant efforts from all of the teams. The teams usually have their own business-related tasks and they might not feel the importance and value of it. As a result, there can be a need to explicitly track such changes and manually apply them everywhere.
- Design System is a fairly new concept, but it is already quite widespread across large organizations. Developing a design system for your organization can be quite a time and money-consuming task, but it's definitely worth building in in long term.
"Franka is like a unicorn among designers: she is a blend of an analytic and systematic mind of an engineer and a deep, yet subtle design expression of a true artist - a rare find among designers and UX specialists. She approached our project with an open and curious mind, always asking questions to understand the project even beyond the scope of her task. Never misses a deadline and delivers flawless work that exceeds all expectations."
Head of Digital at Klett Profil & Izzi
