The company’s 2023 strategy was to build a platform for its suite of products. I was tasked by the executives to design the new platform and ensure all current and future products would have a consistent look and feel.
TL’DR
Here is an internal video I posted on Slack to present the new look and feel.
At the start of our UI project, the brand team had just published their first version of the new marketing website.
The brand featured vivid blue and orange, my least favorite color combination. They mocked up what the apps could look like with the new brand. It looked like vintage wireframes circa 2010. We could do better!
The senior designers and I got to work. Our first step was to read the branding documentation to understand the intention behind the brand so that our UI adaptation would convey the same qualities.
The high-level direction was practical and playful, a Charismatic Doer: "There is a pep in their step, friendliness in their demeanor, and a sense that they get others. People trust them."
It was important to understand that the company wanted to appear more mature to attract larger businesses. Officevibe had often been criticized for being “too colorful,” with illustrations that made it look “childish.”
We balanced the rigidity of the brand font with rounded corners on cards and buttons.
This made the interface friendly and approachable. But how could users tell what was clickable? Our previous design system used rounded corners exclusively on buttons. To boost affordance, we added soft drop shadows to clickable elements.
We used the brand blue as our primary color and expanded the palette to cover all the tones of our design language (interaction color, success, warning, danger, etc.).
We used this technique to ensure that our colors would be WCAG AA accessible. The standardized jumps in shades and luminance of each color made them predictable and easy to use. You can read more about this on my Design System case study.
The previous brand only had “candy” colors. To convey a corporate feel, we added muted and greyish colors.
When paired with the brighter colors, the contrast was elegant and refined. The final look and feel was quite different from any other SaaS.
We aimed to use colors purposefully. For the most part, we used only warm greys and dark greys; for example, the sidebar, checkboxes, and control bar faded into the background, while the data visualization and status label colors stood out.
We also created playful decorative colors to liven up the apps.
Rebranding the product suite
The rebrand provided a coherent look and feel for all products.
Employees called it “the biggest rebrand lift to date.”
