Crafting cohesion: Navigating the world of the design system
Approach to building the design system powering Internshala’s existing & new products, and seamless collaboration between designers, product managers, and engineers.
We were growing, adding new features, and building new products and needed to ship them at an impressive pace in this competitive landscape. Also, there was a talk within the organisation and feedback from our users about outdated UI and fewer features. The team then recognized the need for a robust design system. It embarked on a bold and pioneering journey of creating a comprehensive system to streamline the current processes and seamlessly integrate future innovations.
Let’s explore the journey of building and expanding our design system, which we’ve named “Flight”.
The problems we were facing.
- Lack of uniformity & reusable assets— We are designers and have noticeable variations in design preferences, particularly regarding details like font size, padding, colour shades etc. For instance, while some of us have a penchant for 24px padding on buttons, others favour 32px padding. Similarly, when it comes to hues, finding two designers agreeing on the same hex code is a rarity. This diversity in tastes has led to a need for uniformity across our product UI, interactions, and marketing and branding campaign visuals.
- A slow process of design and development— Due to a lack of reusable design assets, engineers and designers often find themselves creating assets from scratch for almost every new module resulting in increased development time.
- The current user interface is not effectively appealing to our key demographics, which include college students and employers who are recruiting through our platform.
- We(design managers) used to spend more time than anticipated reviewing and correcting the work of junior designers, ensuring that the overall product maintains consistency.
Objectives
With the DS in place, we aimed to accomplish the following :
- Identity—Establish a distinct and recognizable identity for our brand.
- Uniformity—Eliminate individual biases and design preferences to achieve uniform designs across our different product verticals and on different platforms.
- Visual aspect— Reevaluate and update the styles of our imagery and illustrations.
- Enhanced efficiency—Boost the productivity and effectiveness of both engineers and designers.
Kicking off the project
To build the initial version of our Design System (DS), we embarked on a structured journey comprising several key steps:
- Research.
- Audit of the current designs across all product verticals.
- Establishing the DS foundations—naming conventions, colour system, typography, icons, and spacing guidelines.
- Building a component library.
- Facilitating developer handoff and testing of the components.
- Documentation and usage guidelines. (not covered in this article)
1. Research
Since this is our first time designing systems, we sought direction and inspiration from renowned brands, including IBM’s Carbon, Shopify’s Polaris, Zomato’s Sushi, and Google’s Material Design.
Our goal was to understand how these brands successfully aligned their design principles with their fundamental brand values. We aimed to dissect both the design and documentation aspects of their systems, to identify what is essential for our initial setup and what elements we can incorporate as our system evolves and expands. This approach was meant to guide us in establishing a robust foundation while leaving room for future growth and enhancements in our system.
2. Audit of the existing designs
As a critical first step in creating our DS, we focused on a detailed audit of the existing designs. This crucial step involved an in-depth examination of our current design elements across all product verticals.
We meticulously reviewed various aspects, such as user interface components, layout structures, colour palettes, typography, and iconography, to understand their application and effectiveness.
We looked for patterns and inconsistencies, noting what worked well and needed improvement. This process helped us gain valuable insights into the user experience and identify opportunities for standardization and optimization.
During this phase, we established some basic principles to help guide our designs: Neat, Thoughtful, Fresh, and Trust.
3. Establishing the DS foundations
During this stage, we established our, naming conventions, typography styles, colour palette, iconography, spacing, and elevation levels. Brad Frost refers to these elements as ‘atoms’ in his Atomic Design methodology, as they form the foundational elements that combine to create more intricate and reusable ‘molecules’ or components.
3.1 Naming conventions
Appropriate naming conventions are crucial for facilitating collaboration among different teams, ensuring that everyone is aligned and working in sync.
The naming convention should be designed for scalability. This foresight ensures that as the system grows, the scalable naming conventions will facilitate seamless integration. They won’t disrupt the existing structure, allowing new additions to be incorporated smoothly alongside the current elements.
Below, we will explore the various naming conventions we have chosen for our Design System.
3.2 Colours
Our primary colour, a specific blue hue (#1295C9), lacked vibrancy and did not resonate well with our current audience. In pursuit of a more dynamic colour palette, we experimented with various shades of blue across different elements of our product, such as call-to-action buttons, tabs, and service offerings. Through this process, we finalised #00A5EC as our new primary colour.
Centring our palette around this new primary colour, we developed and finalized a spectrum of blue shades and other hues required for different UI components. We utilized various colour generator tools, including the Eva Design System and Coolors, to assist us in this colour selection process.
The naming convention for the colour system — To establish a convention for the different shades, we adopted an incremental naming system based on units of 100 to maintain scalability. For instance, if we decide to introduce a new shade of blue in the future, we can seamlessly insert it into the existing sequence without disrupting the current lineup.
3.3 Typography
Typography remains a crucial element of any design system. The selection and application of various font families, weights, and sizes are critical decisions influenced by the typography.
Choosing the right typeface for a brand is often challenging due to the plethora of available options. It’s vital to select a typeface that effectively conveys the intended message to the target audience.
We narrowed down our choices to Proxima Nova, Poppins, Roboto, and Inter for our typeface selection. Following this, we conducted usability tests on Internshala’s most frequented pages — the internship search and description pages. We finally decided to go with Inter as our brand typeface. This decision was based on its clear legibility and the extensive range of weights and fonts it offered.
We have categorized our typography into two primary sections: ‘Heading’ for titles and headers, and ‘Body’ for the main text content. From this classification, we’ve developed a structured type system.
The naming convention for the type system—Fonts with identical sizes but different weights should be named systematically, using a common name with a suffix that indicates the weight of the font.
For example, two font sizes are listed as 20 pixels each. The naming convention assigns them names based on their weight. The font with an ‘Extrabold’ weight is named ‘Heading 1 Extrabold’, and the font with a ‘Semibold’ weight is named ‘Heading 1 Semibold’. This demonstrates that the base name ‘Heading 1’ is used for both due to their identical font size, with the specific weight added as a suffix to differentiate them. It allowed team members to quickly understand the style being referred to and apply the correct typography settings in their work.
3.4 Icons
Icons play a crucial role in user interface (UI) design. They provide visual cues that can instantly communicate the function or purpose of a button or feature, making the interface more intuitive. Users can often recognize an icon’s meaning with just a glance, which speeds up the interaction process.
We wanted our icons to be easy to understand and simple because well-designed icons can enhance the visual appeal of an interface, contributing to a pleasing aesthetic that engages users.
We established design guidelines for our product icons, initially creating them at a standard size of 24 pixels. All the icons were created in Figma. To efficiently scale these icons to various sizes, we utilized the Icon Scaling Tool, a Figma plugin developed by Microsoft, which allowed us to generate multiple icon sizes from the original design.
For using icons on the web, the icons are converted into font files using Icomoon.
The naming convention for the icons — For stroke icons, we implemented a naming convention based on the format ‘icon size/name’, while for filled icons, we used ‘icon size/filled/name’.
3.5 Spacing
Spacing plays a pivotal role in the design, profoundly influencing both the visual appeal and practical functionality of a website. It’s essential for creating a tidy, organized appearance and for establishing a clear hierarchy within the design. By skillfully applying proper spacing, a website’s aesthetic quality and operational effectiveness can be greatly improved.
In our design system, we adhered to the 8px grid system, which led us to define our spacing values in increments aligning with it, such as 2, 4, 6, 8, 12, 16, 20, 24, 32, and similar multiples.
4. Component library
After laying down the foundation, our next step was to develop reusable components. This phase involved careful planning and design to ensure these components could be efficiently used in multiple areas of the project.
By focusing on modularity and scalability, we aimed to create elements that not only served immediate needs but also provided a flexible framework for future development.
Component library offers several significant advantages in both design and development processes:
- Consistency— Ensures uniformity across the product for a better user experience. Since all stakeholders are referring to the same libraries and are using the same components, the usage remains consistent throughout.
- Efficiency— Speeds up the design and development process by reusing components.
- Improved collaboration— A shared library of UI components helps bridge the gap between designers and developers. Both teams work with the same set of elements, which simplifies communication and collaboration.
- Easier maintenance and updates— When you need to make changes or updates, you can do so in one place, and these changes will propagate throughout all the instances where the component is used.
- Design exploration and innovation— Designers have more time to explore innovative solutions and enhancements to the user experience, rather than reinventing common UI elements for each new project.
The below image shows some of the components we have created in our design system.
5. Developer handoff and testing of the components.
Following the design phase, we sent the component designs to our engineering team for coding. These components underwent extensive testing before we integrated the new design system into our current product.
Check out our products post-design system integration 🌟🛠️.
Conclusion
- When we first embarked on the journey of building a design system, we perceived it as a monumental undertaking. Little did we know, the true challenge would emerge in the aftermath, as we began the intricate process of weaving this new UI language into the fabric of our product. Following the successful integration of the new design system, the overall user experience and visual style underwent a significant enhancement, aligning perfectly with the vision we had envisioned for our target audience.
- Enabled our designers to shift their focus towards UX, allowing them to swiftly generate innovative concepts and expedite the product delivery process — something we couldn’t achieve as efficiently without the design system.
- The implementation of the design system effectively eliminated personal biases among designers, ensuring that all stakeholders were aligned and shared a common understanding of what to anticipate in terms of UI and interaction in the products delivered to end users.
- The development process has significantly accelerated. Furthermore, there is a newfound synergy between engineers and designers, with both parties sharing a common language and understanding.
What lies ahead?
Consider the design system not as a never-ending task but as the outset of an exciting journey. As our product evolves and we introduce new offerings, certain components may naturally become outdated, making way for fresh additions. This dynamic evolution is how our system continually adapts and grows over time, ensuring it remains aligned with the changing landscape of our product and user needs.
And with that, I conclude this blog post. I trust you found it enjoyable and informative. Farewell for now, and I look forward to connecting with you in the next instalment! 👋🏼
💬 Please feel free to leave your comments or questions below!
👉 Connect with me on LinkedIn ⟡ Twitter ⟡ Instagram if you’d like to engage in a conversation or explore potential collaborations on design projects.
https://app.figmayo.com/sites/3uxNN28bv/Internshala-Design-System/cover
