Most of us have already heard about Design Systems and how they are beneficial for our team, whether it’s a startup or a big company. For those who don’t know yet,
A Design System is a collection of reusable elements, guided by clear standards that helps teams design and develop a product with a shared vision.
If done right, your team will have the ability to deliver products faster, more consistently, and more efficiently with fewer resources. Most important, designers and product teams will have enough time to focus on user research and the future of your product. But that’s not an easy task, you need to plan ahead and invest time to create and maintain an efficient Design System.
What does it take to create an efficient Design System?
As a UX team we’ve had several of our clients ask us to create a Design System for them and the first question always asked is, “How long will it take?” And our answer is always, “It depends.” The time it takes to create a Design System depends on several factors:
1. How complex is your app?First, we need to audit your app in order to see how many inconsistencies there are. Is it available on iOS, Android, Tablet, and Web? Do you have multiple products or just a mobile only app?
2. How big is your team? Collaboration is key. We will want to talk to a few people from each department to analyze user data and to agree on a team model and documentation from each team. Establishing a shared understanding of making sure everyone is involved in the creation of the Design System is very useful for everyone.
3. What tools do you already use? We have reviewed many of our client’s Figma or Sketch library files thinking that they had already started their Design System. The reality was that they weren’t properly linked to a shared library and the elements weren’t resizing correctly either. It’s possible that we’ll need to redo the symbols and components in order to make them work in different device sizes. If you already have dynamic style guides in Zeplin, we’ll need to make sure all the text-styles, layer-styles, colors and assets are linked to each screen and are properly organized. Design System Manager is a slick web version that’s good for having each component documented.
4. What are your purpose and vision? If they are well propagated throughout your company adoption will be easier. It is very important to let the company know that Design Systems are not “just for designers”. They should be designed and used by everyone, and by doing so, help reach the company goals.
5. What’s your iteration process? How much time does it take to build a new feature from ideation to implementation? How much time does it take for the design team to test a prototype? Do both the iOS and Android teams follow design standards and guidelines? This is important because once you have the Design System in place you will see just how much your team efficiency has improved.
Creating a Design System from scratch is a process. For small projects with a dedicated UX team it can usually be done in 2 to 4 months. For complex projects it could take between 4 to 6 months. But keep in mind that’s just the starting guidelines; a Design System is always evolving as your product scales and your team grows.
What is an efficient Design System?
We have seen cases where the client already has a “design system” in place and it looks awesome. However, they have yet to see it impact team efficiency. Why not? Many times it’s because the dev team hasn’t found it to be useful for them, so they choose to keep the same code and process and ignore the Design System.
UX. Share the same updated design elements throughout the team. They won’t have to redo symbols for each device size or project, instead they’ll reuse the same symbols. Wireframing and prototyping is a lot faster since they will simply grab approved elements without worrying about consistency or resizing. Will have the ability to add new designs if needed. Will have enough time to focus on user research.
Product. Feedback loops with UX and dev will be faster. Will have the time to analyze user findings and prepare next sprints, rather than fixing current features.
Dev. Clean code with ready-to-use design assets. Constraints, design tokens, standards, naming conventions, styleguide, all of that, will be previously agreed with the UX team so their library components match.
Marketing/Sales. Company purpose and vision, Brand guidelines, Tone of voice, Press deck, Public assets, Advertising, Prints, Corporate sites. All these should be accessible throughout the company. And should be consistent without the need of a designer.
QA. Ensure quality and consistency not only when the code is ready to test, but before it’s coded, as part of the design process. QAs will be aware of UI internal standards as well as the iOS design guidelines and Android guidelines and not just test functionality.
Users. Sure, users don’t really care about our internal organization or our design parameters but they are the ones who will reap the most important benefit from an effective Design System. They will perceive harmony and TRUST, their experience will be pleasant, safe and smooth.
In the technology industry we are always pushing ourselves to do things faster, and we know this because we use Agile methodology on a daily basis. We’re not talking about speeding through things or working more than 8 hours per day in order to get things gone, but rather spending our work time well. For that we need to shift our processes and adapt our teams to best practices. In the beginning, as with any adoption phase, we need to invest time to onboard teams.
Once you start using the Design System, you’ll save time avoiding rework, you’ll have more organized and efficient teams and most importantly, you’ll have enough time to focus on product strategy.
If you are starting a Design System, or want to implement one, drop me a line at email@example.com I would love to hear your thoughts and dive deeper on how we can help your team create an efficient Design System.