Puheet rebranding

Rebranding project for Puheet, a Finnish company that helps companies to build better customer relationships and increase sales through SaaS-based branded communities. The project covered the completion of the rebranding, documentation, production of visual materials, and website renewal.

Introduction

The company had previously hired a designer to redesign its brand and make it more modern. When I joined the project, the designer had already made the first definition of typography, main colors, logo, and style line for the visual material, such as illustrations and icons. However, nothing was published or implemented and there was no style guide or documentation of the assets besides the assets themselves. My role was then to continue the project based on the materials already created, with the biggest emphasis on putting the new brand to use. I was given the liberty to do any modifications or improvements if considered needed.

Process

I started the project by inspecting the existing materials, getting to know the company and its mission & vision, and listening to the internal opinions regarding the new brand. Based on the observations gathered, I made the decision to keep the basic branding elements as they were and continue building the brand on top of them.

All of the materials were scattered around in different design files and they hadn't been made accessible to the other teams of the company. I also noticed that there was a huge lack of documentation regarding the new brand. So, my first action point was to organize all the material and kickstart a scalable design system. I created the design system in Figma following the Atomic Design principles and connected it to Zeroheight so that it would be accessible for the development and marketing teams to use.

When the base was created, I started to put the new brand to use. I re-designed the company’s website, its layouts, and graphics respecting the look & feel of the preliminary design proposal of the previous designer. While doing this I worked together with the company’s marketing team to build up the content and information hierarchy of the site. As the company was using a third-party website builder, I also implemented the design to the platform and added manual CSS styling to it. The manual styling was necessary as the platform's styling options were limited.

A glimpse of the process to improve the information hierarchy and navigation structure — A glimpse of the refinement process of the information hierarchy and navigation structure of the website.

After the first version of the website was published, I started to create other supporting visual material based on the needs of the other teams of the company. These included materials such as infographics, social media banners, and illustrations to be used in sales presentations and marketing.

All the designs and visual materials of the project were made in Figma. The CSS styling was done in the website builder’s CSS editor.

Final results

Here you can see pieces of the final designs and materials created for this project:

A glimpse of the redesigned Puheet website in desktop and mobile views — A shot of the redesigned Puheet website in desktop and mobile views.

Puheet website pages where "scrollitelling" was applied through visual elements — Website pages where "scrollitelling" was applied through visual elements. The idea was to make it more intriguing for the users to continue scrolling and maintain them engaged with the content.

Illustrations and icons created for the Puheet website and visual materials — Illustrations and icons that were created for the Puheet website and visual materials.

Infographics and visual material created for Puheet.

Thoughts & Learnings

This project taught me above all valuable leadership skills as I was the main responsible for the design. I really appreciate the trust the company put in me right from the beginning and the ease of our cooperation. Which actually made this project turn into a continuous collaboration with the company.

Another important learning experience for me was actually getting to implement my own designs. This gave me an opportunity to work a little from the Dev team's point of view and understand their perspective better. Thanks to this I learned new ways how I could improve my designs and documentation so that they would be easier to implement.