Generative design tool for a health tech company to automatically create brand assets
We at Moonraft recently created the visual identity and brand strategy for UST Healthproof, a health-tech company streamlining health plan operations in the US using their cost-effective platforms and solution portfolio
We also delivered a generative design tool to assist their in-house marketing and design team in creating brand assets. This case study documents the entire process of designing and developing the product
UST Healthproof
3 Months
2023
Product Design
Creative coding
Front end dev
01 OVERVIEW
The generative design product
Create base grid for design reference
Create directly usable visual assets
Modify pattern parameters
Generate and download unlimited assets
A glimpse of the assets created using the generative design tool
02 WHY EVEN BUILD A GENERATIVE TOOL?
Healthproof's identity is built around the idea of disruption it brings to the industry. Inspired by this, we created a dynamic brand identity that truly reflects the uniqueness and innovation at the core of Healthproof.
However, creating a new pattern each time was a tedious task. To streamline this process, we developed the generative design tool. This tool uses logic of our established brand identity, ensuring consistency while maintaining uniqueness.
The generative design tool significantly reduces the workload for the newly formed design team at UST Healthproof, and help them ship marketing material, presentations, etc faster.
Additionally, the tool minimizes the chances of error. Manually creating a new pattern each time for the identity can lead to mistakes, but the tool ensures precision and consistency in every design.
03 THE BEGINNINGS
The first spark
The first spark for creating the p5.js tool came when our visual designers were doing early ideations on the project. One of the ideations called "Thread of innovation" was a perfect place to start using p5.js for making brand assets. Here is the style scape for the concept :
Developing the proof of concept using p5.js
After defining the transformations, I coded them in p5.js and added sliders to adjust the parameters. This resulted in a tool that produced visual assets similar to what our visual design team was manually exploring
Conclusion
Alongside this style scape, we presented two more directions to the client. While the above concept was not chosen, everyone appreciated the idea of the generative design tool.
The concept 'Connected Ecosystem' was selected by the client for their visual identity. I was given the opportunity to develop a similar tool for this identity as well
Selected stylescape
Not selected
04 BUILDING THE TOOL FOR THE CONCEPT 'CONNECTED ECOSYSTEMS'
Defining the logic for the visual identity
We began by developing the logic for the concept. The first step was to identify and segregate the unique components of the identity.
This process also helped us craft a more mature narrative for the brand story and identity
First attempt at the tool
My initial approach was to render the entire canvas at once and then delete and add components to refine the visual identity. You can see the step-by-step logic below
Create canvas with the isometric grid
Place nodes on the the intersection
Generate random lines between nodes
Delete some of the nodes
Limitations of this approach
Rendering the whole canvas at once reduced the control we had over the pattern and also led to undesired randomization within the canvas. Here are a few problems we faced with this approach
05 TAKING AN ATOMIC APPROACH
Finding out the smallest repeating unit
Instead of rendering the whole canvas, we defined the smallest repeating unit and added the randomization algorithm within the unit.
Adopting this component-based approach made the whole code simpler while providing more control over the pattern
Smallest repeating unit
Dividing it into layers
Adding rules for randomisation
06 OUTCOMES AND THE LEARNINGS
The generative design tool
A web app which generates patterns and grid based on the brand identity. Option to create unlimited pattern and download editable SVGs. Here is the tool in action
Outcomes
The tool helped our internal design team in creating assets for the brand book and initial marketing material
During the website redesign part, the tool was used to design the web components and website's design kit
Once we shipped the project, the tool is being used by marketing and design team from UST Healthproof
Learnings
Learnt front-end coding, p5.js and it's application in creating a dynamic identity. Pentagram's case studies were huge inspiration.
Took a component based atomic approach, which not only made the algorithm more accurate but also helped us in expanding the brand strategy better.
I pitched and worked individually on the entire generative design track.This experience was invaluable, teaching me how to lead a project and solve problems independently from start to finish.