The rebranding of Employes.
Branding
Product Design
Design System
Introduction
For the last year or so, we've been working on a big rebranding of the entire company. New logo, tone of voice, website and of course, an entire new look & feel of the product.
I've been very fortunate to have taken lead on the rebranding of the product. With this article, I hope to give you some insights on my approach and show you some beautiful designs along the way.
Side note: Employes is a Dutch company, so some visuals might have Dutch content.
Approach
A few months before we got word of the rebranding, the product team had decided to move all design work to Figma. Figma had a better dev-mode and for me as a designer, Figma was easier and faster to use than Sketch (I still love Sketch with all my heart though). The dev-team and the previous designer created a solid Design System and workflow in Sketch.
Old design system — Sketch
For the rebranding, we kept the same approach but tweaked it where needed. We used the same system as Tailwind CSS for the naming of colors, text and other components. Other than that, we kept the approach for the design system quite simple by using the Atomic Design method.
Design system & visual identity
The visual identity of the new branding was created by Verve. They created an entire new brand strategy, tone of voice, marketing assets, typography, color palette and icons. For the rebranding of the product, we used the last three.
For the product, we left out some of the colors and created a few new ones.
Color palette
Icons
Previously, we created our own icons. This gives the product a more unique feel, but it can take up a lot of time, if new features require new icons. Luckily, Verve decided to use a icon-library for new branding: Phosphor icons. The library is huge and the icon-style is very aligned with the rebranding.
Icon library
Components
In our old design system, a lot of components felt quite big and took up a lot of space. That's why we decided to go with a default height of 32-40px instead of 40-48px for fields, drop downs, buttons, segments, … This made it feel less compact and also made it look cleaner.
Atoms — part I
Atoms — part II
Molecules
Organisms
The table
In the old designs, almost everything was designed to be in cards. The sidebar was white, the background of the content was a light shade of blue/grey with floating cards on top.
As you can see in the image above, the new sidebar has a color and the content has a white background. We still use cards, but I wanted the table to be the main focus of every page. Everything else was just extra information, the main focus should always be the table.
Table
Old vs new
Full pages
Showing you components is one thing, but of course you need to see it as a whole as well.
Dashboard
Hours
Employees — contract details
Onboarding a new employee
PTO
Unexpected turn
The rebranding of the product was close to being done, and then we got the news. Employes has been acquired by another company. Super stoked for Employes of course, but this meant some changes needed to happen. Because of the acquisition, we couldn't launch the rebranding. At least, not entirely. Luckily for me and the product team, we only needed to change back some of the colors. All other design changes regarding the components, stayed. Phew!
Color palette — reverted
Components
Sidebar
Closing thoughts
I absolutely loved every minute I spent on this project. I'm super proud of what the team accomplished and I'm super happy with the end result! Of course, there were some bumps along the road, but that's always the case. Nothing goes exactly as planned. Best you can do is take it on the chin and keep going.
If you made it this far, thank you for reading :)
