What exactly is a design system?
Atlassian’s Design System
The perks of adopting a design system
Ability to design (and develop) at scale with speed and consistency
Teams can continue to use the same elements over and over again, reducing the risks of inconsistency.
Allows designers to focus on more complex problems.
With a set of principles to follow and build components, we can save time by reusing similar components instead of constantly building them from scratch. We are thus able to focus on more important aspects of the product like information prioritization, workflow optimization, and journey management.
A unified language between cross-functional teams and cross-platform projects.
The design, engineering, and product teams can have one single foundation hence creating a more consistent experience across all platforms.
Serves as an educational tool and reference for junior-level designers
Hell yeah, sounds good. Let’s do it! But wait…
As agency designers, we have to work with clients’ different expectations, tight timelines,
and budget constraints. This hence surfaces some concerns, for instance:
- Clients may not see the need to pay for a design system since they are end-product oriented.
- It does not seem practical to spend time creating a design system for a 3-week long project.
- It is impossible to create a one-size-fits-all solution for different clients since they all have different needs.
- It takes time and effort to create and maintain a design system.
How can we work around it?
When faced with the aforementioned issues, here is a personal process I follow:
1. Find out which tech-stacks the front-end engineers will be using
The final output of the product is to code, so there is no point in designing something that is impossible to code.
2. Pick a front-end framework and use it as a reference
By using these frameworks as a baseline, things can move faster. You can save a huge amount of time without designing error states from scratch or thinking about how to design certain layouts.
Two comprehensive and favorable front-end frameworks to use as starting points are:
Material React(a React library based on Google’s Material Design)
Ant Design (a React library created by the Alibaba group)
3. Evaluate which components are crucial and focus on them
Start off with:
- Color system
- Typography system (Scale and hierarchy)
- Form components (Buttons, input, dropdown menus)
So… Is it still worth investing in a Design System as an agency designer?
Yes! In this increasingly complex world of design, business professionals are aware of how consistency is able to value-add for branding. Can you imagine having a mixed color scheme with conflicting colors that do not represent the client’s brand? Among other inconsistencies of the user interface, here are other reasons why you should adopt a Design System:
Change in Culture and Mindset
Based on a 2020 survey by Sparkbox, 54% of the respondents from agencies said they saw a client’s culture change due to the introduction of a design system.
Systems Thinking Approach
By using a Systems Thinking approach, the team (and client) can debate less about how the elements on each page are designed and instead focus on the overall vision of the product.
Future-proof Your Designs
In agencies, the work for designers usually ends after the project ships. But with a design system, we design for scale and potentially even a roadmap for future iterations or enhancements to the product.
To sum it up…
As an agency designer, there are obvious benefits of adding this process to our workflow. While it may take some time to set up, the complexity of a design system can be adjusted to best fit different projects’ scopes and timelines. At the end of the day, the system is flexible and does provide a more structured and guided way to build solutions for our clients.
Intelligence is the ability to adapt to change.
– Stephen Hawking
—
If you enjoyed this article, check out Overrating ‘Design’ or ‘Thinking’ in Design Thinking
Looking for bespoke digital solutions for your business, or have a great innovative product that you need help building? Connect with us at 2359!
