Designing For Development: Building A Design System At Brainly

Knowledge / Inspiration

Designing For Development: Building A Design System At Brainly

Continuous Design
UXDX Europe 2020
Slides

Design Systems offer an opportunity to consolidate processes, improve collaboration and speed up product delivery.
In this talk, Patrycja will guide us through the journey of how a small team from Brainly sparked a design system revolution in the world of developers. The talk will also share the struggles on the way to establishing a full blown Design System for a small team that develops the product for millions of users.

  • How your team can improve collaboration
  • How to speed up product delivery
  • How to establish a Design System in your company

Hi, my name is Patrycja Rozmus. I'm a Design System Lead at Brainly, the biggest online learning community in the world. We are still a relatively small company but at the same time, we make products that it's used by over 250 million of users in 35 countries which interestingly creates tensions in development.
I will tell you how making a design system looked like in this environment. From this talk, you will learn obviously how developments of our design system look like and how we solve the idea to the business. I will also talk about our design principles and our famous design system tools made in Brainly, about the structure of our teams and actual buy-in across the company and finally about these like systems secret source that makes it all work for us. Hope it will be able to use some of those insights in your organization. Let's get started.
The story begins in 2015 when our developers made first comments to a Brainly open source style guide. Unfortunately, it was one sided and designers use their own UI kits which after some time resulted in problems during implementation. Our designs contained elements that were older or newer then those in the style guide. So, after two years, our implementation process started to look a little like this. Does this ping-pong look familiar to you? During the handoff, both parties had to make decisions if given elements should be changed on the designs or on the production. Developers were often unable to make the product look like it did a mock up and it was tiring for both teams or even for the stakeholders who didn't understand why the final product differs from the prototypes they accepted. So, it was a problem. Seeing those problems, I made an inquiry about our team's work with the style guides. All members of design and front-end teams participated in the workshops during which everyone could share their biggest problems and prioritize them.
We ended up with a bunch of post its' that described our issues and there it is: our biggest problem. The workshop confirmed that the biggest issue is lack of shared libraries and logical structure in them. We decided we have to address this and started working on the design system with a shared language between the teams as a priority. After some research, I came up with this. You'll see Brainly design system needs to be focus not only on the product but also in marketing. It's not so common but in our case necessary, as we didn't have a marketing team. This kind of work is done by our community managers and they are not designers. Strange. I know but this is how we roll and still managed to get that growth. Imagine that. So, to help non-designers designed for Brainly, we needed also libraries, guides and templates for marketing initiatives.
In detail, it looked like this: we have brands in the heart of the design system with all elements you would find in more advanced brand book. The guidelines and patterns for product and marketing emerge from the brand. This is how our design system is actually built now but before with this start, I needed to sell the idea of the design system to the business and it wasn't easy. This was the typical reaction when I've said those mysterious words "Design System". Nobody knew what it was. Today, it is much easier as design systems became an industry standard but then they were not. One of the main selling points was the quality of our product and it's consistent branding that now are more important than ever. In today's digital world of social media users became brand ambassadors through their feeds for example, and they have more impact on bread's popularity. Advertising agencies are becoming more and more supplementary in the time of this digital and social revolution. This is the model that Brainly chose as we didn't use TV ads or outdoor advertisement but rely on the product itself. So, having a design system was quite appealing to the business. Second selling point and even more convincing was the fact that without shared language between design and front-end, we were losing money because we were in so-called design and technical debt and it was increasing with every implementation. We not only produced unnecessary code but it was slowing us down. We didn't get full and business support then but where there are cautious one with limited time for developing our shared language.
Shared language sounds easy, right? Actually, it wasn't easy. No trivial. We were super lucky to have a front-end genius on board, Konrad Dzwinel, he spent some time getting to know Sketch and found out that this tool has the open file format. So, he as a programmer could understand it and play with it. He thought if Sketch files are .jsons maybe .jsons could be Sketch files. Maybe I can translate HTML to Sketch and he did it. Of course, he started small from a simple rectangle export and it took us weeks to make the complete usable tool. It was the world's first open source tool to export HTML code to Sketch.
HTML-Sketchapp was giving us a chance to export the entire style guide to the Sketch library. Colors, textile symbols, all with proper naming so that both teams can not only build from the same components but also color them the same way. Here's how the style guide exported to the design library works. The designer can make a design in minutes and remember it's all consistent with the style guide. Also, developers seeing the names of textiles and components in the hand off can implement it quickly. And finally, the product can look like a mockup and our biggest issues fixed. Creating shared libraries will cost you some time but it surely will repay. We wouldn't be able to use it then, however, but as it was open source tool from day one other companies where. It was a little frustrating but also amazing because to our surprise, the tool had some media coverage. For example, by Smashing Magazine, Protopie which brought Brainly on the merging of design and development timeline alongside AirBnb, Webflow and Google. We were stunned to see that HTML SketchUp was used by companies like Seek, Yelp and *drum roll*, Microsoft, which was quite shocking considering that our tool was made by a team of three people or actually one person because Konrad did most of the break for work.
Let's go back to the story and to the design domain for a minute. At the beginning of the work on our design system, Brainly design principles who are defined. The whole design team participated in a workshop where we tackled areas that are the most important for us to achieve better quality of our product and then I wrote down the principles with the PENCIL mnemonic in it . So, the first letters of our principles form the name of our design system, PENCIL. Every principal has also description and question, you should ask yourself when thinking if the principal is fulfilled. Later we make cards to help us work with them and give structured feedback at our design critique meetings which by the way, named Sharpener. If the principal is fulfilled, we put the fill outside on the table, if the principal is not mad, we put the empty side on the table. Obviously, working with those cards is kind of difficult during remote work. So, one of our interaction designers, Maciek Nowak, created their own life version. It works like that. Recently, we even added custom emojis to our Slack to give design principles feedback daily and internal anonymous Brainly design team survey showed that two years after the introduction, these principles are present in the daily work of our designers on 100%.
Back to this story. In the meantime, our developer Patrycja Radaczyńska who was also a co-creator of HTML-Sketchapp. Finished working on the first complete export of our style guides. It became our basic design library used by all designers and we could start refactoring elements of the system. I think this is a good moment to tell you a few words about our process.
When it comes to the implementation of mockups down within the product teams. Our approach is quite classic. After the designer’s finish mockups down with the shared library front of this code in it and we are A/B testing the proposition because every challenge is tested in Brainly. In this example, however, you can see the situation when a new component is introduced. The component is not present in the style guide and in the library. When a designer from the product team needs something we don't have in our design style guide yet we do it a bit differently. First, we discussed within the design system crude to check if it's possible to implement to our design system logically, then it is designed and coded as a custom solution and put to test. If the version whether it wins in A/B testing, we are adding it to our style guide and replacing custom with this newly other component. Adding new components to the style guide without the process was making design and front-end libraries out of sync in the past so we created a circle of process to keep those shared libraries up to date in the future and this is how we roll. Here, you can see our basic tooling. First, the designers make mockup of the new components in Sketch. Then we use abstract for handoff. Then we collaborate with developers or variance naming and last details and then the code is made and sent to GitHub. Next, engineers export the newest version of the style guide with those new components as a Sketch file and the design system core team overwrites the old Sketch file with a new one on our Google Drive. From that moment, all designers have an updated version of library when they open their Sketches. And this circle of life how some call it goes on forever.
If you are interested in how HTML-Sketchapp works, here's a little sneak peek. As you already know, HTML-Sketchapp turns HTML code into Sketch files. So, we need to create a page where we render components from the style guide or whatever we want to export. So, the developers build the page with selected components to be exported. In this example, this will be the page with the color masks and textiles. Then they start the puppet here that opens that page and using HTML-Sketchapp export the components to .akketch .json file. Then we import already exported files to Sketch using asketch2sketch plugin. By the way, its full name is Almost Sketch to Sketch and viola color masks and textiles are now available in Sketch. And you can use it as a library for the whole design team. This and other processes and the whole design system, documentation workup at our confluence. Later we migrated part of it to the public domain but I will tell you more about it later.
We had the export and the process. So, we started all these and refactoring. First textiles, the new layout, spacing colors, button inputs, labels, almost all elements had to be A/B testing so it took us quite a long time. On this slide, you can also see that our team grew we hired interaction and visual designers and after that we grew some more. Let me tell you how the structure of the teams changed over time.
In the context of working with the design system, we divide members of teams into system contributors and its users. These are the point of view at first, we had only one official contributor and it was me and a few product designers working in different product teams. From the beginning, the product teams were cross functional. They had product designers, frontend and backend engineers, analysts, and of course, product owner on board. But by the way, it's just a scheme. Our product is having a lot more people than before. After we hired more designers to the design system team or core team, if you will, we were not only making design system but also supporting all product teams with the UI. At that time, we still have fewer interaction designers then product designers. And then we grew more also product teams, new product teams were formed. At this point, interaction designers were transferred to product teams. But they were still main contributors to our shared libraries in product teams, interaction designers, work hand in hand with product designers in the model we are calling "2 in the Box".
This model designers work on the same features but they are giving different perspectives and have different responsibilities. For example, Magda's main job is to satisfy key needs of our users and to create solutions that will meet business goals. She also documents the development of our product. Maciek supports Magda within creation of the ideas. And of course, by visualizing them and adding delight with interactions and animations, he's also an advocate for the design system in the product team. So, he's making sure there are no custom solutions and if necessary, he makes new components and documents in our design system. But the common goal of those pairs of designers is of course making the product that people love.
Coming back to design system story. We migrated hermetic documentation from confluence to zero height with a sexy address design.brainly.com. Brainly people love this and then we gain an actual buy in across the whole company. Why? Well, one source of design tool was finally easily accessible for all. All teams not only product teams could find their resources like styles, presentation, templates, illustrations, et cetera. We also became visible for design and deaf communities. All that gave our leadership confidence to invest into the area and we finally got the budget to hire dedicated developers for the design system court. design.brainly.com, our design system with HTML-Sketchapp in it became a benchmark for many it is a very valuable asset in our employer branding internally and externally. Every design candidate is amazed by it there just a few of recent testimonials with my favorite one from Agnieszka Lewicka, who was our interaction designer candidate and now works at Brainly who said this is so 2025.
After introduction of designs.brainly.com, we get the yearly Impact Awards from the rest of Brainly employees. That kind of recognition for design was unusual and very needed in the team. On the slide - the beautiful design system crew celebrating this fact. And this is the secret design system source was promising to reveal. The secret is dedicated people and treating the design system not just as an isolated strict set of design rules and components but as a thing that connects people, designers, developers and everyone else. It's also good to have a lead who will keep the fire burning but lead is nothing without the people. And so, with the remodels of design systems just don't work. But of course, components are also important part of the system.
In 2019, we continue work on shared libraries of items and began working on design libraries of bigger organists and pages. Then COVID happened and our plans had to change. We couldn't build our team as fast as we would like to and we focus on working with supporting developers from product teams. We started making the foundation for design system and mobile with logic for stuff like dark mode, for example, delivered by Dina Sabat our Interaction Designer. But when it comes to implementation of the mockups on mobile apps, there are challenges. While Brainly designers and developers working on web can collaborate seamlessly. Thanks to shared libraries by HTML-Sketchapp, 2025 processes our got our new designer coded on mobile apps. We have the similar situation we had on web in 2017. Remember the ping pong. With every implementation, there is a lot of bugs redlining that take hours, or sometimes even days to correct. And we would love to see happy collaboration of designers and developers or so on mobile apps teams. We are planning to invest more in shared language development also on mobile but as Brainly has very smart people on boards even in these difficult lock downtimes, our team was able to deliver something awesome while developing the product.
One of our engineers, Bartosz Lorek, with the design support of Dawid Lewandowski created the tool that gives designers full control over making lightweight production ready animated SVGs. So, after HTML-Sketchapp, we had another tool behind Brainly, SVG Animates and like HTML-Sketchapp is an open source and free to us for all. The tool was used to update our homepage with a juicy animation of Brainly community. On our medium, you can find an article with details like this comparison of similar tools. This might be a game changer also for your team as the animations are light with better control over your vectors. You can even use a puppet warp tool in their illustrator. With a new tool that were stable. We are planning to make a system for illustrations that can be easily edited and then animate that to delight our users. We also started working on design system for motion. For example, ethic like this one can be standardized described in details when it comes to timing and these things and he was in other places on the platform for the coherent experience of our users.
There is a lot of educating to do to connect all Brainly people through design and to make quality that students, their parents and teachers will love. Olga Wysopal our visual designer is design system main educator but the whole team is doing it as well. We are Brainly we love educating.
So, to wrap it up, the key takeaways would be first of all, how to convince stakeholders to start making a design system. Our world is changing fast to the users demand product that's not only worked but work better than yesterday. Users appreciate consistency and delight and design system can help achieve that faster. Designers and developers are also changing. Today, it's important to care not only about user experience but employee experience as well and design system can improve it. If you are already developing the design system or starting to develop one, the key takeaways would be: Shared language between design and development is the key used tools like HTML-Sketchapp to make it a process. Add gamification through your tools like design principles cards, people like to play. Let people see what awesome things you are doing. Communication is crucial for design systems to get the necessary buy in and adoption. And finally, treat the design system, not as a strict library and set of rules but as a thing that connects people and that's all from me. Thank you.

Got a Question?

More like this?

Wed, Jun 24, 11:20 AM UTC

Unity, Not Uniformity With Design Systems
Hayley Hughes

Hayley Hughes

Design Director, Nike

Wed, Oct 07, 2:25 PM UTC

Design Specialist vs Generalist: How to Manage handovers and bottlenecks on workload
Jennifer Cardello

Jennifer Cardello

VP and Head of UX Research & Insights, Fidelity Investments, Fidelity Investments

Kelsey Kingman

Kelsey Kingman

Principal User Researcher, Fidelity Investments

Patrick Mooney

Patrick Mooney

Director of User Experience, United Healthcare Group

Thu, Oct 08, 1:15 PM UTC

Design Ops: How do you Scale
Hayley Hughes

Hayley Hughes

Design Director, Nike

Patrycja Rozmus

Patrycja Rozmus

Design System Lead, Brainly

Guillermo Martinez

Guillermo Martinez

Head of DevOps, Liquid Studio | Accenture

Miriam Soesan

Miriam Soesan

Interaction Design Lead, Liquid Studio | Accenture

Nadia Udalova

Nadia Udalova

Head of Product Design, Moonpig