Accelerating UX Workflows with Generative AI

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.

Timeline

3 months of development and implementation

Skills/Tools Used

Figma

Role

Senior Designer

The Challenge

Blue Corona was a marketing agency that catered primarily to home services companies. The design team faced challenges with redundant work since most websites followed a similar structure based on industry best practices. Designers were often tasked with recreating these similar layouts from scratch, limiting the time available for creative problem-solving and customization. This repetitive workload hindered the team's efficiency and delayed project timelines.

Goals & Objectives

Business Goal

Develop a modular, reusable design solution that would speed up the creation of client websites while maintaining consistency across projects.

User Goal

Enable designers to leverage reusable components to create customized web pages quickly, freeing up time for creative enhancements.

My Approach

• Creating Reusable Component Blocks

I started by analyzing the common elements across our clients' websites, identifying key components such as hero sections, service offerings, testimonials, contact forms, and call-to-action blocks. I worked on this initiative alongside another Senior Designer, and together we collaborated to ensure the components were flexible and effective for the design team's needs.

• Custom Theming System

One of the more technical aspects of this project was developing a custom theming system within Figma. This system allowed designers to quickly apply client-specific styles to the modular blocks without affecting the core components. At that time, Figma did not yet support features like variables, so I created a workaround that involved themed files, allowing easy customization of colors, fonts, and styles specific to each client.

• Technical Integration and Workflow

I integrated the page template builder into the team's workflow by providing training and documentation. I also conducted testing on smaller projects to ensure the new approach could be smoothly adopted by the team. I leveraged Figma's prototyping and component features to ensure the blocks were easy to use, customize, and combine into full page layouts without breaking. Each component was structured to snap into place, allowing designers to maintain alignment and consistency effortlessly.

Solution

• Deliverables:
• Developed a library of modular, reusable blocks in Figma to build web pages efficiently.
• Created a custom theming system to apply client-specific branding to the modular blocks.
• Provided training sessions and documentation to onboard the design team and ensure successful integration.

Impact

• Reduced Design Time: The implementation of the page template builder cut down design time for specific project stages from 8-10 hours to under 2 hours, with some smaller projects being completed in as little as 30 minutes. This allowed the team to take on more projects and meet tight deadlines with ease.
• Enhanced Creative Focus: Designers were able to focus more on creative problem-solving and customization rather than repetitive work, leading to greater innovation and more impactful branding solutions for clients.
• Scalable Design System: The modular nature of the blocks made the solution scalable, allowing for the addition of new elements as new best practices emerged, keeping the system relevant and adaptable to evolving client needs.

Reflections

• Key Learnings: Building a modular system of reusable components not only improved efficiency but also highlighted the importance of maintaining flexibility in design systems. The custom theming solution proved to be effective in a time before native variable support in Figma.
• What I'd Do Differently: I would have liked to involve developers earlier in the design process to ensure seamless handoff and compatibility with development frameworks, further optimizing the workflow between design and development.

The rapid page template builder was a game-changer for the design team at Blue Corona, significantly improving efficiency and freeing up creative time. By creating a modular, reusable system within Figma, we were able to deliver high-quality, consistent web pages for clients in record time, ultimately enhancing both team productivity and client satisfaction.