Powerful Web - Design efficiency

Summary

Powerful Web is a web service provider based in Oregon specializing in web development and solution services for utility districts and municipalities. As their business demand continues to scale up, they’ve started to feel the constraints of outdated processes and tooling. In order to keep pace with new work, they needed a more efficient and economic solution for delivering the same high quality work with a lean team of designers. Assessing the current work flow I suggested a tool switch from XD to Figma and developed a global design system that preserves all design foundations needed to build custom experiences for clients.

Project Details

Timeline: August 2023 - April 2024

Role: Product Designer

Tools: Figma, Adobe XD, Wordpress

Deliverables: 9 themed desktop templates with 3-8 related color palettes, 9 variable sets, 1 global design system

Overview

Through testing & analysis of the workflow myself I was able to identify opportunities where figma features could decrease production time and expand designers tool set by leveraging figma features. This might seem like a simple and generic solution, which in some regard it is, but the way in which this process was executed is what brings the unique value to Powerful Web.

Delivery Overview

  • Migration to Figma: Transitioned tools from XD to Figma significantly broadening their design capabilities in management of assets, artifacts and overall design execution.

  • UI Asset Library: Created a central UI asset library that host 9 main theme assets comprised of 1,023 components supported by 2,340 variables. These individual variables are assigned to their related variant collections that facilitate and support nuanced style variations within the 9 main themes.

  • Variable Collections & Modes: Merged themed variable collections into the component design to provoke mode & template switching, from whole page themes down to individual element states.

  • Tokenization: Created color token system within variable collections to better scale and apply the vast number of variable assignments supporting the asset library.

  • Integrated Delivery: All of the above deliverables working as a single unit provides the cohesion and ease of use that provides value in more ways the one.

Delivery

Retooling

Overall there were 55 theme variants that belonged to 9 main web themes, all of which had to be recreated in Figma as a first step of this transition. Once I had the templates in Figma, I began to go through and pull out UI assets layer by layer to identify the base atoms to begin building with.

Comprehensive Library

A troubling bottle-neck in the previous XD workflow was the need to create a new set of components for every new project, not allowing the sharing of components from .xd file to .xd file. With figma, designers have access to all components available in the local file, as well as assets outside that workspace with certain permissions.

Variable Tokens & Collections

Color variables played a significant role in this project. In creating groups within the collections, I was able to build a color token system that allowed for easy transitions as I pivoted through the project.

Scalable & Efficient Customization

Powerful offer a variety of web templates that fit specific client needs related to their customer base. With the content layouts being relatively fixed, it made it much easier to build a collection structure that could execute the appropriate color treatment to the UI components across every theme. This significantly impacts the speed in the production process skipping duplicative steps and leveraging reusable components.

Collaborative Ability in Workflows

Not previously available in XD, the collaborative features in figma offer multi-player workspaces with the ability to comment and chat with colleagues working in the same file. Figjam also offers robust tooling & Ai features for workshopping with clients, brainstorming sessions with the team and many other collaborative tools.

Benefits

Reliable Scalability: The collection of these deliverables working as one creates dynamic flexibility that can better scale with their business needs than previously.

Efficient Design Customization: Infusing variable collections into the asset library makes for a plug & play type of workflow. Using modes, team designers can now pull assets from the library and directly apply it to their mode frame without manually adjusting color assignments.

Increased Profitability: With more robust tooling encouraging a decrease in average production times, the team can spend less time on redundant tasks and focus more on building better quality experiences for higher premiums.

Improved Asset Organization: Having a central hub from which all UI assets live in figma is a luxury not previously accessible in XD. This affords systematic & stylistic updates at scale with speed.

Impact

The overall impact of these deliverables has been significantly noticeable. With a comprehensive design system working with variable collections and modes, the overall process has condensed while expanding the ability to handle more service volume. Leveraging the page components with nested instances and variable modes, I reduced the production process by 40%. The time saving aspect is driven by the reusable component using baked in color tokens that have specific assignments depending on their parent mode frame.

Currently as Powerful web uses this system, they’ve been able to expand services to include a wider variety of clientele. The outcome of this collaboration has been extremely rewarding to witness and it has been a fun challenge to navigate. I still currently work with Powerful Web as a part time contractor intermittently providing support over the last 6 months.