How Don Norman Helps Me Advocating Design System
Trust & buy-in is a common issue when building Design System.
Everyone is too busy delivering new features that will generate more revenue and sustainability for the business. There’s not enough time to improve internal design process, and consequently slows down feature deliveries. Often we prefer to do it in the next phase, and the next phase NEVER happens…
I was faced with similar problems when building Tokopedia’s UNIFY Design System to serve more than 130 designers in our team. We understand that Design System is important when building complex & extensive products. It will make our collaboration faster while producing consistent and well proven experience. But how to convince everyone to spare their time in building good Design System for a better workflow?
My problem solving inspiration came from Don Norman’s Three Levels of Design which I adapted in my personal practice.
Don Norman’s Three Levels of Design
Don Norman distinguishes the three levels of emotional system in human mind as follows: visceral, behavioral and reflective. Each of these levels, while heavily connected and interwoven in the emotional system, influences design in its own specific way. Below are the explanation of those levels:
Visceral Level
Visceral level concerns itself with appearances and initial reaction (Love at first sight). In the best of circumstances, visceral reaction to appearance works well that people take one look and say “I want it”.
Behavioral Level
Behavioural level has to do with the pleasure and effectiveness of use. The components that determine good behavioural design consist of function, understandability, usability and physical feel.
Reflective Level
Reflective level considers the rationalization and intellectualization of a product. Can I tell a story about it? Does it appeal to my self-image, to my pride?
I decided to implement the approach to convert everyone in my company to appreciate and hopefully love the Design System’s initiative.
Visceral Level: Wow, Design System is so cool!
For Designers
In 2017, our designers weren’t aware of Design System — they were only familiar with style guide and reusable design symbols. In order to attract designers to gain awareness, here are a few of the initiatives:
- Raise inefficiency, inconsistency & clarity problems that is regularly encountered. You can also show design audit results on your product to raise sense of humility and how design system can solve or avoid those design debts from occurring.
- Share Design System showcases & success stories from Airbnb, Salesforce, IBM, Atlassian, etc — ideally a practical guide in video format on design system’s application in those companies.
- Influence the team to read Design System articles & books, like Atomic Design - Brad Frost or Modular Web Design - Nathan Curtis.
- Share & join Design System meet-ups & workshop to gain insights from industry experts on the benefits of Design System.
For Non-designers
When selling Design System to non-designers, these are our approach:
- Convincing engineers on design system’s modularity because they worship the concept.
- Well-structured & consistent design output which can improve engineer’s code reusability and be the main supporter of the Design System project by helping to build the code library.
- For PMs & C-levels who are concern about speed, time, quality and business, we presented the benefit of design system’s convenience and efficiency by using open source UI component library. This allow us to quickly conduct multi-platform changes and deployment. They love the impacts, especially collaboration culture where we can re-use learnings from other team to deliver well proven experience.
Behavioral Level: Wow, Eases and Speeds Up Our Work!
For Designers
- We launch design system in multiple phases. In the first phase, we launched 10 simplest and most utilized components on Sketch & Code Library. We make it as perfect as possible so designers feel happy & satisfied when using it for the first time
- Publish an internal site for comprehensive documentation on Design System so designers can learn and share their knowledge to each other easily.
- Monitor designer’s velocity when using the Sketch Library to ensure that components’ reusability could speed up the process up to 10 times faster.
- Automatic Sketch library updates every time there are changes or improvement made in the main system. Maintaining singular file is no longer necessary.
- With synced Sketch & Code Library, designers wouldn’t need to review them because it has been created by the Code Library.
For Non-designers
- Help engineers re-use front-end code and always get latest design standard updates through Code Library. It makes the front end development 10x faster.
- Ensuring consistent and scalable naming conventions across multiple design system’s artifacts such as website documentation, Sketch Library, and Code library to smoothen cross-function collaboration.
- Share learnings to PMs on how teams have successfully improved business metrics through standardized design components.
- Better communication & collaboration with Business team, especially when delivering design asset in cross team project.
Reflective Level: Design System save my life!
For Designers
- With the maturing Design System artefacts, process and culture, designers can be very proud of working in Tokopedia. They adapt collaborative problem solving culture which could also influence other job functions and increase product ownership to the designers.
- By understanding and implementing Brad Frost’s Atomic Design, designers will adapt a modular mindset which is definitely a unique selling point for them. This will boost their confidence in sharing their knowledge to external parties.
- Our designers will become a top hit list for other companies that haven’t implemented design system in their company.
For Non-designers
- By understanding design system’s boundary & technical feasibility, achieving MVP as quickly as possible is not an issue. Moreover, our team can be more confident when required to build ambitious features within a short period.
- Our team are more confident in working faster due to minimum design bugs on component level, therefore, we can focus on testing functionality instead of worrying about minor design bugs.
By implementing those approach, we have successfully introduced the design system mindset to designers, engineers, PMs, business team and C-Levels. Through this, we have finally achieved trust and buy-ins, collaborate better and faster in solving problems in a broader perspective and produce consistent and stellar product experience.
Hopefully this article can inspire you, especially when you need more trust & buy-in when building a Design System. Good luck and let me know your story!
