We built a Design System for Small Teams

Our learnings from building a design system at Pathao

For a rapidly growing tech startup fast design iteration is super important but compromising consistency could be a big prize to give. So at Pathao, even being a small team we decided to build our own design system and started working on it on last April.

Design System is a big thing, actually it is a product serving other products. It has a wide scope which includes — design principles, brand guideline, copy guideline, ui library, motion library, code standards and much more. While the benefits are tempting, it requires so much resources that it is scary for small team to build a Full Phase Design System.

So we asked ourselves few questions — how can we pull this off as a small team of 10 designers? how much will we cover in the design system? what are going to be included? what are the tools we going to use?

Start Small & Plan Early through Auditing

We decided to start small and planned to build three components of Design System initially — Style Guide, UI Library and Copy Guideline. These three parts of the system will be enough for guiding our team for better consistency, helping faster iteration and ensuring usable & useful Design.

It is required to understand the scope of the system before start working on it. So, we planned to conduct an Auditing of our current design. We listed all the screens we have in our app, pointed out different empty & error states, checked typographic styles & colors applied, named icons used, and noted possible UI elements. We used Airtable for conducting this audit.

The audit helped us lot for planning early & better to map our next steps. It is better to provide unique names to all the screens, icons & UI elements that are going to be created in the System. This will help team for better communication and speak same language 😉

Create a Style Guide

Next step was creating a detailed style guide for Pathao describing — colors, typography, icons, spacing and illustration guideline. We already had a guideline for these but that was not organized enough. So, we started to improve on that.

As we have multiple products running, we decided to incorporate multiple colors — each assigned to separate product as primary color. Enough color contrast and better accessibility were two important factors in choosing colors. Google Material Color System and Color Tool are great references.

Cleverly chosen Typographic Hierarchy can give the UI a cleaner look yet convey all the information clearly. Thus for a text heavy app like Pathao, typography guideline is very crucial. Readability is another major consideration. We defined all possible cases and depending on that we choose typographic styles and documented use cases for each style.

A compressed version of our style guide

For Icons we decided to use 3 different sizes — 16px, 24px & 40px. This is helpful to maintain clarity & structure of the icons. Scaling could distort the clarity of icon.

Illustration is another important part of our system because for all the error & empty states we decided to use illustrations. We created a guideline for it as well thus we can ensure same tone of message all over the app.

Develop a Copy Guideline

Great copy helps UI to create great user experience. Thoughtfully written copy can evoke emotion and convey complex information easily & clearly. To ensure consistency in copy and to keep a tone that ensures better interaction, copy guideline is a must.

Short view of our Copy Guideline

We developed a copy guideline that guides copy writers to maintain community driven, friendly, reliable tone in copy. We also documented several use cases and right & wrong way of using copy.

Build UI Element Library

The biggest challenge is to build UI element library for the system. The initial auditing helped us in this phase. As we noted down where each elements was used, we could easily identified elements that can be group together. We could also get rid of the unnecessary UI components that can be easily replaced by other elements.

In this phase we had to determine the tools we are going to use to build the system and maintain it in work flow. InVision and UxPin both have design system tool. But we decided to go for the Sketch’s new Symbol Library feature along with Dropbox because this will reduce cost while give us full customization opportunity.

Our library in use. Still needs more organized structure 😢

Few learnings from the endeavors are:

1. Avoid making symbol for all element: Building UI library doesn’t mean you have to make symbol for each element. Few symbols can be avoided by using shared style feature of sketch e.g. cards, shadows etc.
2. Sketch Plugins are Dope: As we started building UI Library we found out Sketch is not good enough by itself. We realized the importance of Sketch Plugins which are free yet powerful to take your workflow to new level. We found out a good bunch of plugins that made the process so easy. It will be a separate article describing each of those plugins. (Will be published soon, Stay Tuned 😉)
3. Avoid fully dynamic Symbols: Sketch’s nested symbol feature is awesome! but in building UI library that are going to be used by many people, it is best to avoid using complex nested symbols. Complex nested symbols could make the properties panel so messy that the fast iteration benefit could be gone.
4. ALL CAP for typo style naming: If you have any ALL CAP typo style in the system, try to use ALL CAP for typo style naming as well. This will help you better grouping typo styles.
5. Name each element uniquely: Naming UI element will be crucial for future use. Better naming will help you find the required element easily. It’s better to use some short code as well e.g. ‘dtpik’ for date-picker.
6. Padding around icon symbol: Keep small padding around icon symbol. This will allow you better position the icons in UI.

Our library is still evolving! 🤩

Conclusion

Our process of building Design System is still ongoing. We are working on it and learning new things in every moment. As we are working on revamping our current design we are already seeing benefits of having a system in place. If you are a small team like us, we would recommend you to not to fear and build your own system. You will be amazed how it improves workflow.