HELCIM
Jumpstarting design operations at Helcim with a design system framework
Design operations
Design system
Brand design
AS HELCIM GREW from 30 to over 120 employees in under a year, design needs expanded rapidly. Beyond product development, marketing, web, and internal design needs mushroomed. A glaring pain point was the lack of a dedicated source for all of these design needs. People didn’t know where to go or who to talk with to get their design questions answered.
A glaring pain point was the lack of a dedicated source for all of these design needs. People didn’t know where to go or who to talk to get their design questions answered.
Part of my remit was to organize the existing repository of design assets into a digital asset management system. But with such diverse design needs, I proposed instead building a design framework that ensured consistency across all departments, allowing designers and stakeholders to collaborate seamlessly and efficiently using a single source of truth.
tl;dr
THE GOAL
Organize the plethora of design assets in a digital asset management (DAM) library
MY APPROACH
Audited and categorized all design assets using a semantic system
Interviewed design asset authors and end users to identify what's working and what's not
Researched existing DAM systems, tools, and platforms built to support organizational needs
THE RESULT
Proposed and established a unified design system framework that catered to all stakeholders, authors and end users
01
Building Helcim Design system
The framework centered on a core library of foundational, department-agnostic design elements. From this core, the system branched into three key areas:
Product - Patterns and elements for our digital products
Internal - Design material for employee kits, presentations, internal design collaterals, and branded merchandise
Marketing - Assets for digital and out of home marketing efforts
This ensured tailored design support for each area while maintaining overall brand consistency.
Evolving the product icon illustrations to a modular style and using the new gradient palette. These new product icons add more dimension and context with a clearly identifiable brand flavor in the design.
Before and after we evolved the visual language. The first image shows the application to a landing page and the second image shows how the new design was applied to internal communication materials.
02
Expanding Blizzard
The product design library, Blizzard, was expanded. Together with the rest of the design team we updated and expanded the color and text style, and added new components that serviced the internal and marketing arm of the organization.
Proposed framework for the design system. A core library powers the rest of the branches. Branches are categorized based on the broad needs of the company.
Proposed framework for the design system. A core library powers the rest of the branches. Branches are categorized based on the broad needs of the company.
DANNY JOSE
ILLUSTRATOR, Helcim
The thing that stands out most about Trace is her ability to quickly chop down projects into measurable tasks. She is extremely organized in the way she approaches all segments of life and that’s precisely why she is super efficient.
It was a pleasure working together with her at Helcim, while together, we crafted the illustration system for product and marketing.
03
Impact to the teams
End users were able to retrieve needed design assets instantly from Air, the digital asset management platform we used to house final outputs; layered and flat assets.
We moved to an organization subscription on Figma and created a companion system on Storybook to enable teams to build and iterate more effectively while still having access to the wider organization. Designers were able to create new components and styles relevant to the three different branches while still maintaining brand consistency.
Proposed framework for the design system. A core library powers the rest of the branches. Branches are categorized based on the broad needs of the company.
04
Impact to the brand and to our products
Having a unified design language enabled us to tell our brand stories in a consistent voice, have an identifiable and owned brand experience from lead generation efforts all the way to the user experience in the product.
With a more organized system, it unlocked opportunities for designers to experiment and create experiences that brought delight and surprise for our users.
Proposed framework for the design system. A core library powers the rest of the branches. Branches are categorized based on the broad needs of the company.
Proposed framework for the design system. A core library powers the rest of the branches. Branches are categorized based on the broad needs of the company.
05
What I learned
The design system is a work in progress. When we initially launched the framework I was the only one in design operations. This came with its own set of constraints and challenges, chief among them was the build process. While the framework is a sound foundation, executing it took much more effort and a meandering one at that. There were a lot of instances where the work had to pause in favor of more immediate design needs. Building the system in parallel with teams busy producing new patterns meant constantly playing catch up.
Accepting that the system will always be a never finished type of project while at the same time, you’ll be constantly hitting publish made it easier to manage, at least mentally. There was also the advantage of having leadership that recognized the importance of a system in creating efficiencies in the workflow and the value of a consistent brand experience in attracting and retaining customers. There was willingness to invest in the framework.
To date, there is now an entire design team composed of designers and engineers dedicated to building and maintaining the evolving system.
SHOUTOUTS TO—
Rodolfo Ferro Casagrande - For being an awesome collaborator, a dedicated player/coach, and a design leader who stands by his team even when he has a fractured ankle and should have gone to urgent care right away.
Julianna Wang - For their passion and dedication in learning all things figma. And in their support in building out foundational pieces of the design system.
Max Parker and the rest of the design team - For bringing the framework full circle and for tending the growing design system into what is is now today.
