Creating a Scalable Web Application

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 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.

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.