40%40%10%10%Primaries Ratio
Prioritize Peach & Yellow over purple
30%70%Warm/Cold Ratio
Prioritize warm hues over cold ones
80%20%Light/Dark Ratio
Prioritize light hues over dark ones
tl;dr
When I joined, Helcim was growing fast from a team of about 30 to more than 120 in under a year. But brand and product weren’t keeping pace with each other. The brand spoke one language, the product another, and that fragmented experience showed up as churn.
Originally I was to organize the design team’s artifacts. Instead I created the Helcim Design System or HDS. One ecosystem serving product, internal, and marketing, powered by an intake system I built. Out of that came a more consistent user experience from first touchpoint all the way to the product.
impact
- ONE SYSTEM
- 3-1
- Product, internal, and marketing audiences served by a single design architecture
- REDUCTION OF UNSTRUCTURED WORK
- 80%
- Led to higher quality work and faster turnaround times
- ORG-WIDE INTAKE ADOPTED
- 1
- The request system powering the HDS was later adopted and replicated by other departments
HDS CoreStyle
Guides
Asset
Libraries
UI
System
Graphic
System
HDS
Internal
HDS
Marketing
HDS
Product
Breakdown
Two brands, one company
When I joined, the website looked like the brand Helcim was becoming, but the product still looked like the company it used to be. Every user who crossed from one to the other felt the gap, and the brand experience churned with them.
The original ask was to organize the digital asset management system. Research across teams showed the real problem was bigger: nothing held the brand together across product, internal, and marketing.
The HDS architecture
I architected the Helcim Design System as one ecosystem with three consumers: product, internal, and marketing. Each pulls what it needs from shared pillars.
- A style guide documenting how to use the brand
- Asset libraries backed by a DAM
- A full UI system carrying product, crossing over wherever sales or marketing need product visuals
- A graphic system holding the identifiable core
One structure and one source of truth, so a design decision made once lands everywhere at once.
The engine underneath
An architecture only matters if work can move through it. I built a centralized intake system to power it: a request form that adapts to the type of work, routes straight into Asana, and sits one click away in a company-wide browser bookmark.
- Ad-hoc design requests dropped by 80%, giving designers their focus back
- Other departments later adopted the same intake structure for their own teams
Evolving the brand at pace
With the structure and the engine in place, we evolved the brand faster than the team had ever managed before. The refresh ran across product, internal, and marketing together: new iconography, a new color spectrum and gradients, updated components, and templates for the teams selling and supporting the product.
The product caught up with the website. From top of funnel to the workflow inside the app, Helcim now presents itself as one brand.
As HDS evolved, I developed a brand guideline to aid in understanding and usage of our new brand elements. The guide is an open project with new entries added as the HDS grows.
Drag the scrollbar to scroll the site
Learnings
Design ops is the dark horse
There are a lot of moving parts to managing brand and product together. What came out of this work is how strongly design operations informs the success of a brand evolution, and how the tactical work cascades from it: updating the design system, achieving consistency.
Different pieces of the brand get built in parallel and get used across different functions. Getting that right leads to a much better brand experience, and that in turn impacts the business by improving the churn rate and increasing customer acquisition.