How we crafted a design system for Freshworks
“A design system acts as the connective tissue that holds together your entire platform.”
—Drew Bridewell, Design Specialist
Digital solutions are increasingly becoming more intricate with the rise in customer expectations, and product and design teams are transforming their approach to design—experimenting with style guides and pattern libraries—in order to create inclusive design systems that all users can appreciate.
Design with a systemic approach
A design system offers a library of various design elements, components, and visual styles that can be combined and reused to design a digital product. Design systems are crafted to help individuals and organizations build better products and faster services by making design reusable, and thus, scalable. UX designer Adam Černik likens a design system to a box of Lego bricks which are “uniform in design but can be assembled into nearly any conceivable structure.”
Designs systems enable teams to quickly choose from a collection of reusable, integrated components, patterns, or style options, avoiding repetitive work.
A design system is characterized by clear standards and best practices for designing solutions that foster creativity while maintaining a consistent structure that customers and users will appreciate. “At Freshworks, we design solutions for real people. Our design system is crafted in a manner that allows us to work with a shared language that focuses on the smallest details to empower people to achieve more,” says Bharath Balasubramanian, Senior Director of Design at Freshworks.
As a ‘living’ document, a design system can offer a unified method of communication by establishing a shared language that everyone on the team can use. Well-crafted design systems can reduce design debt—non-reusable conventions, inconsistent styles, and legacy codes that accumulate as products and teams age—in an organization and increase collaboration and communication. They can build bridges between teams and make it faster and easier to reuse work.
We leveraged the ‘atomic’ design system
There are a plethora of approaches to design systems, each more varied than the other. “When it comes to design systems, you just can’t come up with a UI kit and ask your team to follow it. Any design system needs a solid methodology and a larger organic purpose for designing features or solutions,” says Chandan Mallikuppam, Manager of Product Design at Freshworks.
“At Freshworks we follow the methodology of the atomic design system,” says Chandan. Created by Brad Frost in his book, Atomic Design, it consists of five distinct levels: atoms, molecules, organisms, templates, and pages.
“Imagine that a single icon or a single button is an atom. When you include the button inside a row item in a table, it becomes a molecule, and so on to become organisms, templates, and pages,” Chandan continues.
“Our design system is a single source of truth for designers and UI engineers at Freshworks. As we build more and more items based on the design language we crafted, the design system is updated for better adoption, consistency, reusability, and cost-effectiveness,” says Bharath.
“Why do we prefer the atomic design system?” I ask Chandan on a Zoom call. He explains that the four most important things in design are scalability, efficiency, consistency, and security. “You may assume ten different use cases but if the design is not scalable across various products, that is a major problem in your design because then the product is not efficient. A suitable design component needs to be uniform and consistent so that it can be used—and reused—across Freshworks products. The security of these features depends on the design system too,” he says.
The atomic design system enables us to take care of these four important concerns and more. “It also helps us look into the micro level of details—such as what happens when you hover on a button, what happens when you place an icon over it, what happens when you place an interaction on top—and build features that are inclusive, scalable, efficient, and secure,” Chandan elaborates further.
The idea is to grow organically in an enterprise system so that we build consistent and secure features that make efficient use of design components in a product family.
We listened to our stakeholders
“The most important part of a design system is actually the feedback system. It is a working document, after all,” says Bharath.
“In case of a business software solution, especially in the domain of support, the biggest issue arises from the fact that the person who buys the product is not the person who uses it. On a day-to-day basis, the users of the product—which is almost 80% of your user base on average—do not share their feedback, creating a major gap in the loop,” explains Abhilash Pillai, Staff Product Designer (Freshsales) at Freshworks. “To counter this trend, companies need to incorporate user feedback into their design systems,” he reasons.
At Freshworks, we asked various stakeholders—developers, designers, product managers, QAs—from all our products to showcase our design ideas before we began building features and applications. “Designs systems get better with better research. Collaborative debates are more than welcome because the feedback helps us innovate better in the next iterations,” says Abhilash.
We designed for inclusivity
Inclusive product experiences contribute to the usability of the product as a whole. Design systems can empower users to achieve more with wholesome experiences. “All the different components, including the color palette and font options, must be optimized to enable such experiences,” says Abhilash. There are a lot of considerations that go into creating a color palette for a wide range of users, including users with color blindness (Deuteranopia and Protanopia). “We have broadly categorized two different kinds of color blindness and created design and visual elements by extensive testing—what should be our primary colors? What should be our secondary and tertiary colors?” says Chandan.
He continues, “Based on these traits, we work on restructuring our whole layout in terms of hierarchy and how well our navigation elements are placed across all the modules.” The information hierarchy must also be redefined to ensure that users who use the tab functionality to navigate web pages can do so with the help of screen readers and other assistive software, including keyboard navigation.
A key part of crafting a design system that is inclusive is focusing on logical navigation. Elements placed in a hierarchical order are easier to navigate through. Chandan explains this in the context of our customer ticketing software Freshdesk, “We have to make sure that the navigation of the Data tab is logical, i.e., it moves from dashboard to tickets and not from dashboard to knowledge base.” A consistent hierarchy also helps users to use alternative input methods.
We delivered consistent color and typographic experiences
Customers want consistent experiences across products. Crafting a thoughtfully defined palette of colors—primary, secondary, and tertiary—with suitable color contrast can help teams comply with standard contrast ratio guidelines for Level AA, which states that the visual presentation of text and images of text must have a minimum contrast ratio of 4.5:1 except for large and incidental text and logotypes, while keeping aesthetics, usability, and accessibility in mind.
For consistency, we decided not to deviate from the typefaces that are used by most product bigwigs—Apple, Windows, Chrome—in terms of system fonts. “We have chosen the typographical principle called ‘Perfect Fourth’ type scale. The reason behind our choice is that this principle aligns itself perfectly with enterprise software and enterprise layouts,” says Chandan. The line spacing between components also forms a veritable part of the typographic experiences, and the most commonly used is 1.333. “Based on the modules of the alignment, we place the content in our product pages so that users can have a consistent experience of our enterprise products and applications,” he says.
To supplement our color and typographic principles, our designers are working to redesign some of our icons and illustrations in the component library.
We documented our design system
After you craft a design system that is consistent and reusable, you need to work on documenting it. “Just like a design system is the way forward for building multiple components, documentation offers the scope of telling the world (and your customers and other stakeholders) that the solutions you have created can solve problems and increase productivity by enhancing ease of operation and recognizing when users feel excluded,” says Bharath.
Many companies opt for third-party tracking tools to document their design efforts. Bharath explains that while any tool that allows effective documentation is good, they must have a versioning option so individuals and teams can track their progress.
“At Freshworks, we use a new tool called Figma to document all our design components and track our versions as we build better features,” says Chandan.
We tested, tested, and tested
Design systems help in feature-based design implementation, which relies on consistently good experiences. While many companies consider testing an added inconvenience because of the extra time and effort, Bharath explains that thorough and repeated testing can improve design experience and reduce retrofit expenses. On the websites of many enterprises, there are pages that are almost a decade old. Testing can help identify these rogue pages and components—which can render an entire application inaccessible—so that they can be revamped under the principles of a robust design system.
We designed with empathy
Empathy is a prerequisite for a good designer. “If you are not empathetic, you cannot really understand someone else’s position or place yourself in others’ shoes,” reasons Chandan.
Designers and design teams struggling to understand customer expectations must ask themselves while defining a use case or a user journey mapping: How can I map the emotions of a person with color blindness so that they have a wholesome product experience?
A key tenet of inclusive design is to recognize exclusion and practice inclusion while designing products and solutions. One of the ways designers can do this is by including a color blind user while testing or designing. Using tab navigations, designers should be able to figure out how effective a feature is, depending on the various ways it can be used. “Sometimes things might be off—maybe the alternate text does not render properly, or maybe the image description does not make sense. That’s fine. It means you have made a start,” Bharath assures designers and teams working on a design document for the first time.
Companies must ensure that customers are heard. “Empathy goes beyond design systems,” Bharath says, “It is a lens essential for good business.”
We revamped our design culture
“A design system is not merely a collection of different design elements and components. It is about a greater goal—of crafting a design culture across products,” says Bharath.
How do you consistently make good decisions when it comes to design? Create a design culture that appreciates feedback and incorporates other voices into the design system while planning for future releases.
To ensure that the design system is adopted, companies need to build a robust design culture that supports innovation. “It doesn’t matter how big your product is or how big your team is. What matters is asking yourself, How are you going to take your product forward?” says Chandan.
A vibrant design culture stems from clear communication and effective collaboration. There is a growing need for companies to make their employees and customers believe that their solutions are inclusive or follow a consistent branding. Design systems can help in the process. “Because people change, situations change, and products, tools and technology change—but a design system brings consistency and helps you plan for the future,” concludes Chandan.
Cover and image design: Vignesh Rajan
