UI Framework
Creating a UI Template Framework that speeds up design handoff by 50%
At Eulerity, we created an innovative Template Framework for the Product Design System, that accelerated the design process.
Prototype of a sample Table TemplateBackground &
Implementation.
Background
It started with understanding the core problem via internal design team meetings and discusiions, post which we prioritized a couple of propspect solution and eventually went ahead and with the most promising idea.
Implementation
The implementation heavily relies on the extensive use of Figma's nested component properties to create scalable interface templates. These templates are seamlessly linked to a dynamic design system, ensuring both flexibility and scalability in the design process.
Objective, Action &
Results.
Objective
To reduce the Design Handoff Time and eliminate inconsistencies in UI design by aligning with a global design system.
Action
We designed a unified Template System with updatable components corresponding to the different interface patterns in the product.
Result
By implementing this sytem, we reduced the overall design process time by 50%, making reviews more efficient and direct for managers.
Problem?
Design Handoff to Product, took too much time!
Source design files were oudated
In any project, 60% of the time was invested to identify the source files from the web design repository. Some source files had outdated components while others had broken flows. This caused delays in creating initial project drafts.
UI components lacked consistency across designer’s deliverables
The UI components across designs created by different designers showed a lack of consistency. This was mainly due to insufficient adherence to a unified design system, or misaligned source file for any project.
How did we decide what to improve?
To gain a deeper understanding, we created a time map to analyze how time was distributed across each phase of the design process. We then calculated the average time taken to deliver designs to the product team to verify these findings. This analysis helped pinpoint where improvements could be made, allowing us to optimize the design system and streamline the overall workflow.
Implementation Framework
Lean Strategy
In a business class at Northeastern University, I learned to implement Operational Excellence strategies when solving industry problems. Two key strategies I studied were Lean, which focuses on waste elimination, and Six Sigma, which centers on process improvement.
Shewart Cycle
In this project, our solution aligned with Lean principles, as our aim was to improve existing processes. We specifically used the PDCA (Plan-Do-Check-Act) framework to implement our solution.
Atomic Design Framework
To build the Template System, I employed the Atomic Design methodology, a structured approach for creating modular templates that scale across different product interfaces. Atomic Design divides components into 4 hierarchical levels.
Structural Breakdown
Atoms
Grids, Graphs, Lists, Forms
Molecules
Atoms + Dropdowns + CTAs + Headers Section + Footer Section
Organisms
Molecules + Main Navigation + Brand Web Frame
Templates
Grid Organisms, Graph Organisms, List Organisms, Form Organisms
This structure enabled the team to see how elements relate to each other and provided a flexible foundation to rapidly assemble interfaces with predefined components.
Using Figma Component Attributes for maximum scalibility
In Figma, I utilized component attributes to enhance the adaptability of our templates. Component attributes allowed us to create dynamic, reusable templates that could be easily customized for specific needs. Here’s how I applied component attributes to drive efficiency.
Variants
Created multiple versions of a single component, like different list, graph, form styles or states. This made it simple for designers to swap styles quickly within the same layout.
Auto Layout
Used Figma’s Auto Layout feature to ensure that components were responsive and adaptable to different screen sizes, reducing the need for manual resizing and improving consistency across devices.
Boolean Properties
Developed boolean properties to enable or disable buttons, dropdowns, or search bars within components, so designers could modify attributes without detaching components from the library.
The Collection
I began by immersing myself in the product’s interfaces, collecting each page and component to understand the existing UI patterns. This in-depth audit helped me identify recurring patterns, unique design elements, and inconsistencies across the product.
Approach
The Segregation
The next step in the research phase involved grouping similar UI patterns. This helped to identify distinct layout groups within the product. By organizing these patterns, I gained a clear view of the unique component groups, which enabled me to map out how many templates would be required.
Creating Templates
For each group, I created dedicated templates, starting with a template for forms. Each template was designed with multiple variations, allowing flexibility for different use cases.
Working
Select Template: Let’s say we’re working on a project that requires Grid Interfaces. So we select the Grid Template.
Adjust Atoms: Next, adjust the boolean controls for each template according to the specific needs of the interface.
Select Variation: Next, select appropriate component variation based on the project requirements.
Detach Instances and Start Designing: Now, your have the desired layout in place, you can detach the template instance and start working on the requirements.
Testing &
Feedback
We tested the templates within our team and sought feedback from the design managers. I began using the templates in my own projects, and the results were highly successful. This new approach significantly reduced the time I spent searching for designs in the repository, cutting my project completion time by nearly 50%. The templates not only streamlined my workflow but also enhanced overall productivity, demonstrating the effectiveness of the Design System.
“…one project I was particularly impressed with was their intern project, where Kalsi collaborated with another intern to design robust, reusable templates for our design system—templates we still rely on today.”
Maya, Lead Product Designer
”For me I’ve been finding it really helpful and it’s been streamlining how I work on the screens so I can focus more on the ux / how the feature works rather than on ui so I appreciate it”
Margarita, Lead Product Designer
”I think the templates were generally easy to use, practical and scalable”
Nathan, Product Designer
The Best Part?
Link with Dynamic
Design System
The most powerful aspect of this project is that each component within the templates is linked directly to the dynamic design system.
This means any updates made to a component in the design system will instantly reflect across all templates. Designers can simply choose a template and start designing, without the need to manage individual components—ensuring both consistency and efficiency throughout the design process.
