Cutting Design Time by 80% with Modular Generators

Figma webpage builder.png

Project Overview

As a Senior Designer at Blue Corona, I took the lead on developing a rapid page template builder within Figma to accelerate the website design process for clients in the home services industry. The primary goal was to create a system of reusable, customizable blocks to significantly reduce repetitive work, increase design efficiency, and enable designers to focus more on the creative aspects of each project.

<aside> <img src="/icons/timeline_gray.svg" alt="/icons/timeline_gray.svg" width="40px" />

Timeline

Multiple projects over 2 years

</aside>

<aside> <img src="/icons/hammer_gray.svg" alt="/icons/hammer_gray.svg" width="40px" />

Skills/Tools Used

Figma

</aside>

<aside> <img src="/icons/card_gray.svg" alt="/icons/card_gray.svg" width="40px" />

Role

Senior Designer, Lead Design System Architect

</aside>

<aside> <img src="/icons/light-bulb_blue.svg" alt="/icons/light-bulb_blue.svg" width="40px" />

tl;dr

Faced with repetitive and time-consuming design tasks at Blue Corona, I led the development of scalable, modular systems within Figma to streamline workflows and boost design efficiency. This included creating a rapid page template builder for home service clients, a mockup builder for pitch decks, and a comprehensive UI kit for an AI-powered product. These tools cut design time drastically (e.g., reducing page design from 8-10 hours to under 2), automated consistency, and empowered teams to focus on creative problem-solving. The result was faster project completion, reduced manual work, and better adherence to brand standards.

</aside>

The Challenge

Throughout my career, I have focused on scaling design systems, building modular asset libraries, and developing generators to rapidly create design outputs. This case study presents three "mini case studies" that illustrate my experience in building scalable design solutions that increased efficiency and helped teams focus on creative and high-value work.

Mini Case Study 1: Blue Corona Rapid Page Template Builder

As a Senior Designer at Blue Corona, I took the lead on developing a rapid page template builder within Figma to accelerate the website design process for clients in the home services industry. The primary goal was to create a system of reusable, customizable blocks to significantly reduce repetitive work, increase design efficiency, and enable designers to focus more on the creative aspects of each project.

<aside> <img src="/icons/report_red.svg" alt="/icons/report_red.svg" width="40px" />

The Challenge

The design team faced challenges with redundant work, as most websites followed a similar structure based on industry best practices. Recreating these layouts from scratch limited the team's efficiency and delayed project timelines.

</aside>

<aside> <img src="/icons/verified_green.svg" alt="/icons/verified_green.svg" width="40px" />

Solution

I developed a library of modular, reusable blocks in Figma and a custom theming system that allowed designers to quickly apply client-specific styles. This approach enabled designers to maintain consistency while reducing design time.

</aside>

<aside> <img src="/icons/flash_yellow.svg" alt="/icons/flash_yellow.svg" width="40px" />

Impact

The page template builder reduced design time for specific project stages from 8-10 hours to under 2 hours, with some smaller projects completed in as little as 30 minutes. This enabled the team to take on more projects and meet tight deadlines while focusing on creative problem-solving.

</aside>