Designing for development
How one little team sparked a design system revolution in the world of developers.
STORY
Four years ago, Brainly helped spur the digital industry’s move toward formalized style guides, and since, full design systems. Our original style guide added some much needed cohesion to the Brainly UI, but it soon showed itself to be inadequate. The problem was that our style guide was driven by the views of frontend devs rather than a healthy balance of dev and design. As such, it couldn’t serve as any kind of common ground for the teams to cooperate from. So, we ran an internal inquiry about problems in the design to frontend workflow and decided that the two teams would join libraries to unify the process. It was this expansion of scope that led us to create an end to end design system we call Pencil. It’s an ongoing collaborative effort that defines everything from our brand strategy and design principles all the way down to rules for font sizes and padding.
A brief history of our design system, Pencil:
Kudos to everyone who helped sharpen Pencil so far. You can meet them all here.
IMPLEMENTATION
Seeing as our users are the audience for all that we do, we always make sure to get their reaction to a proposed design via an A/B test. So, during a set time period, half of all users see the new design while the other half sees the old. With 150 million users worldwide, we very quickly have statistically significant data to inform our final decision. As a rule, unless the A/B test shows a neutral or positive reaction to the change, it doesn’t go forward to implementation.
TOOLS
Our work to close the gap between design and development inspired our (then) developer Konrad Dzwinel to invent Html-Sketchapp.
This homemade bridge between worlds turns HTML nodes into Sketch layers or symbols, thus translating directly from dev to design. Bringing the work of Design and Frontend together under the same roof like this was a revolution in cross-team communication and cooperation. A revolution that turned out to be so effective that it spread to dev teams all over the world [1, 2] , including those of Microsoft, Yelp and Seek.
Our main tool for actual design work is Sketch. Its introduction of libraries combined with our invention of Html-Sketchapp has left us with a toolbox we can feel confident in. However, we have been testing Framer and, more recently, Figma, which is looking more and more promising thanks to its unification of design, prototyping and handoff in a single tool.
Another milestone in our process was introducing Abstract for versioning and handoff. With it’s GitHub-ey versioning structure, multifunctional comment section and unique support for custom symbol naming, Abstract remains our weapon of choice for iteration.
When we need the occasional prototype, we use Principle, Webflow or ProtoPie. Whatever the designer prefers.
Similarly, devs use code editors of their own choosing but all iterate together in github.
Both the design and the frontend team use Google Drive for storage. This is also where we keep asset libraries created from our design system.
Our toolset handling the introduction of a new component:
TEAM MODEL
We work in a federational model where interaction designers on the Design team are also members of the various Product Teams developing Brainly features. This means each designer acts as a design system advocate and liaison to frontend engineers, product owners and business intelligence. This close cooperation between designers and the stakeholders of their work is what allows for user-centered design from us and design system respect from them.
Our federational model does have a hint of a centralised model, since we have a Design System Lead, and we work with a frontend engineer from one of the product teams who takes time out to translate between frontend style guides and design libraries using Html-Sketchapp.
Meanwhile, our Visual Designers work on non-product projects like marketing, which also generates new and distinct libraries.
All these libraries are organized within the overarching design system architecture that is Pencil, to be used and followed by anyone in need of a Brainly design, even when no designers are available.
How members of the team work on our design system:
WHAT’S NEXT
Currently, we’re working on expanding our design organism library within Pencil. Rather than putting together smaller atoms and molecules for every iteration, the goal is to have all versions of all organisms included and accessible at every stage from Sketch to Html-Sketchapp export. This day-to-day record-keeping will dramatically improve the ease, speed and consistency of future designs — especially those messy multi-version projects.
Hopefully, this gives you some inspiration if not outright guidance on how you might take advantage of your own design system to make life easier and results stronger — not just for your fellow designers, but for your differently-skilled coworkers as well.
Kudos to best editor Shyama Johnson!
