Context
3 companies came together to become Haiilo.
In 2022, COYO, Smarp, and Jubiwee joined forces. United by the vision of creating the most intuitive employee engagement suite, each company brought something unique to the table.
COYO, with their expertise in social intranets, fostered communication and collaboration. Smarp, known for their focus on employee advocacy, amplified the voice of the workforce. Jubiwee, through their adeptness at employee surveys, captured the pulse of sentiment.
The goal was simple, yet complex: Unite all three products into a seamless experience, providing a comprehensive toolkit for large enterprises.
Risks and Concerns
Disruption of existing and potential sales.
With each product built on their distinct style and technology architecture, they presented a stark contrast when put side by side. This lack of uniformity in combined use caused a large concern as it was feared to potentially hurt existing revenue.
There was also a risk that this dissonance might also pose long-term issues for upcoming deals if customers did not understand the bigger picture of Haiilos offering.
Goal
Hypotheses
01.
The new unified look and feel will help customers to better understand Haiilos mission and unique value proposition.
02.
A robust design system will increase product coherence while development time is decreased, which posed vital for a successful integration.
03.
A simple plug-and-play component kit will foster independent and creative solutions within the product teams and tribes.
04.
Developing a new visual style for Haiilos product suite will help break down barriers during the merging process of teams.
Principles
Guiding our design direction
Simple yet important principles we focused on during development.
Documentation
One single source of truth in our growing design & code documentation
design.haiilo.com
I need a break pls
Haiilo Design Doc
How to design s…
Intro
Foundation
Tokens
Components
Utilities
Contribute
What is Catalyst?
Catalyst is the design system used by Haiilo. It is developed in-house as an framework-agnostic system based on web components. Catalyst is aiming to replace previously used system by COYO, Smarp and Jubiwee to create a cohesive and unified look.
If you have any questions about Catalyst feel free to join us on Slack.
Usage
Lightweight and solid utility system
Create layouts and interfaces without the need of custom CSS.
01
02
03
04
05
06
07
Scalabality
Platform independence, thanks to web components
Catalyst can be used with all of our major frontend frameworks in use: Angular, React and Vue.
Angular
React
VueJS
Collaboration
Easy collaboration between dev and design.
We paid close attention to keep the naming convention of all components, styles and tokens in sync between workflows and tools.
Look & Feel
300+ New Icons
We moved from an 3rd party icon font to our own hand-drawn svg icon repository.
heart
report
chart
inbox
target
up-circ
up-circ
Contributing
Growing collection of components and styles.
Thanks to its open nature everyone can contribute with their own ideas to the design system. This avoids silos and fosters a feeling of community.
And the best:
It is all open source.
So, did it work out?
Feedback
Customers felt reliefed.
We showcased a set of concepts, built with Catalyst, to a handful of key customers and prospect, especially those who voiced their concerns after learning about the merger.
Their feedback and first impressions were very positive, stating that they felt relieved about the direction the company and product is heading. Overall, we were able to address their initial concerns, making them strong supporters of our future vision.
Unfortunately I cannot showcase these concepts on my website. If you'd like to learn more, do not hesitate to drop me a message! (:
Learning and Self Reflection
Web components are still at the beginning.
To everyone who now thinks:
"That sounds great. I will start building my own design system with web components today!".
Be warned.
We had to overcome multiple challenges to make the current version work as stable as it is. Web components are still in their early days if you aim for full browser and framework compatibility.
Especially if you have to be backward-compatible with previous releases of your app.
Outlook
It's just the beginning.
Every design system is a living thing, which will never be completely finished.
With everything you've seen above, we only laid the foundation as a first version. The goal is to now really expand the system, get more people involved and most importantly, move the entire product suite onto Catalyst.
Thank you for your time.
I really appreciate you checking out my work!
If you want to learn more about this project, feel free to get in touch with me.