At the beginning of this year, Movio’s branding got a refresh and as innovation plays such a key role in our daily work lives, we decided to explore how we could take this rebrand to the next level. One of our outcomes was the creation of digitally homed brand guideline.

In today’s day and age, brands live on digital and social media platforms, along with more traditional mediums such as print ads, business cards, and presentation templates. All of these touchpoints matter and the goal is to have everything look and feel like they belong to a larger body of work. This is where a brand guide comes in.

The purpose of a brand guideline is to create consistency. Different teams, both internal and external, will at some point work with our brand and even represent us. It’s crucial to set the scene, show examples, and educate people on how we should look and sound, so that all the touchpoints mentioned above, give the same feeling or experience.

Traditionally speaking, brand guides are physically printed books, but because Movio both as a product and brand mainly operates in the digital space, it only made sense for us to build this in a digital format. This was particularly exciting for me, (a designer with a traditional graphic design background, excited to work with the flexibility only digital design can give) because it meant we were given the opportunity to build this from the beginning with a blank canvas. That we had the skills to do this in-house was an incredible advantage.

The process

Research
We began the process by running internal interviews on how our staff were currently using our brand, and how they accessed brand assets such as logo files and presentation templates. This was a crucial step and we gained lots of insight from everyday habits people had developed. We were primarily designing this for them, so we had to understand their pain points, what was easy and what was still unclear or hard to relate to.

Brainstorming
Brands can be made up of many different elements, but here at Movio we narrowed it down to 5 core elements that we decided to focus on:

We wanted to make these the stars of the show in our digital brand guide and for that to happen, we had to consider functionality; how do we go from corporate to product logos? How easy can we make it for people to use our colour palette HEX codes?

Design & development
We wanted the experience of navigating through the guide to be as intuitive as possible, as well as visually appealing with hidden surprise moments along the journey. In order to achieve that, we had to design a layout focused on consistency so that users could learn what to expect from page to page. We started with a template that would be the foundation for all pages, and from that we built exceptions for pages that needed to serve different purposes, communicating and reflecting how to use each brand asset. We also wanted to incorporate sleek, subtle interactions where possible, making the most of our digital approach to the brand guide.  

UI Testing
Usability tests ensure our functions and journeys work as they should. They validate the usability of our designs and written content and help identify any mistakes that may have been missed. As we were building this as a tool for our staff to learn and understand more about our brand, and because they would be the main users, we ran UI tests with some Movio crew and put our site to the test. Would this actually make their lives easier, educate them and help create an environment where the Movio brand could thrive? With a set of questions and a good old chat, we were able to experience first hand how people would respond to a project we had been working on for months. This helped us validate design and functionality choices we were unsure about and allowed our peers to shape what would soon become part of their weekly tasks.

Some technical talk

Most of the websites or web apps you see these days are incredibly interactive and very fast. Users are no longer willing to wait for a page to load, they want the information as quickly as possible. We wanted our brand guide to be easily accessible, and deliver content instantly whenever the user needs it. With this in mind, we decided to create a simple static website, with the `create-react-app` which solely delivers content without any complex backend.  `Create-react-app` is very powerful and helps developers start new React projects instantly without needing to configure anything. It also makes it easy for other engineers to understand the codebase since most of them are already familiar with React as all of our products are also built using the same platform.

We wanted to create a brand guide that not only delivered essential information, but was also engaging to use. There are a lot of simple animations implemented but also simple functionalities that make a big difference to a users experience. For example, on the Colour pages, we created colour palettes that copy the hex code when clicked.

What the future looks like

One of many benefits of having built this in digital format, is that it can grow and scale in the same way that Movio does as a business. It’ll be easier to make sure we are building consistent and up-to-date collateral across all offices, especially with more staff coming onboard globally.

It was such an amazing experience to be a part of and we can’t wait to see how it will improve the daily lives of our staff, and how it will continue to evolve in the future, you can check out our brand guide here.