Creating a Scalable Web Application

To scale effectively with the design and engineering departments, a design system was built from scratch to meet current and future recruiting needs for our clients.

Problem and Goals

Problem: Build It did not have a reliable service that could handle hundreds/thousands of applications. We recognized the need for a robust service given the dynamic nature of the human resources industry. The ability to fill multiple positions concurrently is essential and building a scalable system was a key objective for our platform.

Our goal was to create a design system that can control the entire suite of products (web app/marketing campaigns/emails). We wanted to have dynamic components that can scale and adapt to positions and talent available inside the platform.

Said design ecosystem would be an automation tool that helps us provide coherent design choices that will scale in the future. At Build It, we challenged ourselves to close the gap between design and engineering to have constant changes deployed and so, in a matter of months we had an MVP that was iterated with research and metrics in mind.

Research Insights

Research obtained through primary and secondary research:

• Low usability scores of 34% as a result of ineffective information architecture (gathered through Maze surveys and HotJar Heatmaps)
• Recruiters were taking too long to browse candidates of interest (the time to perform tasks was too long inside Maze)
• Card Sorting techniques were used to analyze how users categorize information.
• A market competitor analysis was made to understand relevant building blocks and opportunities with information such as business details (number of employees, foundation date, subsidiaries, etc.), product offerings (primary vs secondary), unique selling propositions, platforms, marketing channels, and more importantly, design patterns that we could adapt to save time. This chart included competitors like Indeed, LinkedIn, Monster, BairesDev, Tecla, and more.

Ideation and Solution

A design system was made from scratch based on users' needs and wants. Technologies used for this solution include Ruby on Rails for the functionality of its components, Bulma CSS and SASS for the customizable aesthetics and flexible styling classes, ViewComponent framework for quick component and encapsulated components, and Atomic Design Principles and BEM model for naming conventions, organization, and documentation.

The main benefit of creating this system would be consistency. However, we still have other compounding wins such as:

• Having a defined style guide with a type scale and color scheme.
• Access to component libraries with dynamic variants to quickly generate mockups and prototypes.
  
• Easy to digest documentation so that the entire team is knowledgeable of when and how to use each tool inside the system.
  

Atomic Design Principles

Brad Frost's principle, Atomic Design, helped us generate future-proof solutions. This concept divides digital interfaces into subsets that change dynamically to save time in production:

• Ions: Design tokens or assigned values used in subsequent elements. Divided by base values and use cases (like color-background-button for example).
• Atoms: Typography, a color system with shades and tints, spacings, grids (4pt horizontal and vertical grid), icon systems, and more.
  
• Molecules: Result of combining atoms, producing buttons, input fields, dropdowns, and more components.
  
• Organisms: Collected molecules to solve complex features inside an app. A great example of an organism would be a profile card component that combines other pieces of the system with elements such as buttons and images.
  
• Templates: Built these sections to slowly shift the technical language barrier and try to speak the user's language. Entire app sections were made to save time in creating customer-facing interfaces.
  
• Pages: The final interactive product created from template instances.
  

Results and Impact

These are some of the results directly and indirectly made by the creation of our in-house design system:

• A dynamic, modular, and scalable design system that boosted productivity inside the design apartment (calculated 3x)
• Improved user's usability scores in our components from 34% to 91%
• Improved our target audience’s task success rates by 50%.
• Accessibility Criteria Met (WCAG 2)
• Updates took less time to implement (with the help of design tokens)
• Optimized component's performance and visual elements with research in mind

We constantly kept in mind the importance of closing the gap between engineering and design principles through:

• High-fidelity prototypes and animations
• Style guides and design and component documentation with proper use cases
• Presentations and handoffs made in an isolated environment (Zeplin)
• Code and pair-programming sessions to adopt best practices

User testing should be at the core of every digital product to know about the constraints and possibilities of our designs. Therefore, at Build It, we are constantly testing and validating design solutions to provide accessible and user-friendly interfaces.