Branding at Brainly and the PENCIL Design System
Students fighting their way through homework and studying, teachers or tutors trying to drive interest in their subject, or parents trying to give their kids the best education they can - Brainly is all about connecting learners with educators.
But how does a brand ensure it consistently connects to this wide audience of both young learners and adult users?
Karolina Kłos, a Senior Brand Designer, talks to us about Brainly’s unique Design System called PENCIL and the benefits of having such a thoroughly thought-through design system. Karolina also talks about how important branding is to build emotional connections with audiences.
What can you tell us about Brainly’s PENCIL Design System?
Simply put, it’s an extensive design system for Brainly, but also has a lot of brand book elements. If you go to design.brainly.com, you can see for yourself!
PENCIL is actually a mnemonic for our design principles:
- Personality on brand
- Effortless experience
- Necessary things only
- Consistent and connected
- Inclusive of everybody
- Legible value
Brainly is unique because these sets of rules and best practices are not only for the product itself but for the whole organization. And design here isn’t only done by our designers. We have the whole team helping out with guidelines and templates to be used by anybody who needs to design anything, like presentations, social media, external events, swag, office supplies, and many others. These can all be found on PENCIL, which is open to everyone.
What is it about Brainly’s design system that makes it so unique?
The holistic nature is what makes it so unique. Our design system is not only for the product but also has separate sections for branding and marketing.
In PENCIL you can find a code style guide and design libraries that are in sync, documentation of components, grid, layout, spacial units. You’ll also find branding assets such as colors, typography, persona & voice, illustrations, photography, brand strategy, and marketing guidelines related to social media, newsletters, and animation. You can go through PENCIL step by step and understand exactly how the company works, how we approach our users, and talk to them.
Another unique part is the fact that we focus on the process to build the shared language between designers, developers, and everyone else - we’re not only building libraries and writing rules.
It’s very complete. It’s not just technical, there is a lot of emotion in it. From it, you get a really good feel for who Brainly is.
What is the point in having this kind of Design System, and why is it on a website rather than a static document?
This way, anyone who starts working for Brainly, whether an employee or an external vendor, can go there and see what the rules are.
It’s available for the whole company to use, and everyone thinks it’s so helpful. From product designers, through community managers and the marketing team to contractors and vendors - this open-source design system is there to ensure we maintain brand consistency.
Using a website to display our design system is better than using an interactive PDF or some other static document because it’s easier to update and we are evolving, literally, all the time.
How would you say your brand connects your product, marketing, and people?
Brainly’s brand is quite unusual, but that’s what makes it interesting. Our goal is to reach both younger and older audiences. The brand language speaks to both groups, but to appeal to the younger audience (students), our brand is fun and relatable.
We have a great way to connect branding, marketing, and our audience. When talking to students who need answers or a parent who wants help - we have a brand persona called “Older Sister”. Some of our persona's characteristics include generosity, fun, loyalty, and confidence. If you design with this persona in mind, you’ll be able to maintain the brand voice.
The language we use on all channels is the same because it’s not just for the younger audience, but for everyone. Using this “Older Sister” persona is an easy and efficient way to help keep consistency across the board.
My team and I are educators. We take care of Brainly’s consistent visual language and pack it all into the guidelines - so it can be easily understood by everyone.
Were recent visual changes a reflection of a product strategy change?
Some strategy and visual adjustments have been happening for a while, as it’s hard to change a whole product in one day. Our strategy and branding have gone through a small revolution from a typical single-product platform (our main feature was community Q&A), into a multi-product platform with 3 new product features.
These changes influenced the visual side of the brand. To highlight the new character of our strategy we become multi-dimensional, in terms of branding. Some might call this “re-branding”, but we call it “brand evolution”. The brand hasn’t changed completely, but there’s more depth to it and various levels of communication.
As an experienced designer, in your opinion, why is branding so important?
Branding is a company's character. It’s not just a matter of recognition, but also how it makes recipients feel. Maya Angelou once said, “People will never forget how you made them feel.”
Branding is so important because it’s remembered, and it’s emotional. It’s so crucial to building a deeper connection with your audience.
How do you ensure Brainly’s branding is inclusive or accessible?
We offer tips for our brand vocabulary to ensure it’s inclusive. Examples of this would be when addressing a group, it’s best to use non-gendered terms like “folks” or “everybody”. We also demonstrate inclusivity in our imagery. In our photos, you can find a full representation of people regardless of skin color, gender, or other characteristics, and the illustrations always take into account the diversity of our audience.
On a daily basis, I go to Brainly’s Krakow office - it’s so great to work with people from all around the world. At Brainly, inclusivity isn’t just in the designs of the product, it’s also ingrained in the company.
One company value at Brainly is “STRIVE FOR BETTER”. Do you feel this represents your work at Brainly? If so, how?
I’ve been designing for 12 years, and I believe Brainly is something special. Even though it’s a big company, everyone is super friendly. I feel at home working here.
“Strive for Better” is a great value that I see across the whole company, especially with the current changes in the brand - also the product has evolved so much in the time I’ve been here. We are always trying to be better for our users, and Brainly is always open to new ideas and areas of improvement.
