Vital House
Do more of what you Love.
Objective
Our client wanted to redesign and rebrand Vital House. However, they didn’t have a fixed concept for what they wanted the redesign or rebrand to look like, which left us a lot of leeway to design something entirely new and fresh. Because the client was open to a new colour scheme, layout, and overall direction, I was able to rebrand their products, redesign their logo, and rebuild their current website.
The Tools
- Photoshop
- Figma
- Sketch
- InVision
- Illustrator
The Process
Having never done a complete redesign and rebranding for a client before, this was a huge opportunity for myself and my UX partner to really deliver a high quality product. With our objectives in mind we were able to start planning our next steps. What did we want to accomplish with our rebrand? What about the website needed improvement? Knowing this was a large scale project, it was important for us to be in-sync and keep communication open. We set up our scrum board and began by writing down individual tasks, when they needed to be completed, who was in charge of what tasks and client meetings. Once we had everything set up, I was able to begin the UI.
Design Inception
The first task to complete was the Design Inception. It was really important to have a solid understanding of what mood we wanted to have for our users. Being a rebrand, the Design Inception was a key component for my next steps because it sets the building blocks that help create a solid user facing product and website that is captivating. The current Vital House had an earthy colour pallet and focused primarily on the ingredients and health benefits of their products. Our client wanted to step away from the earth tones and really focus on their motto “Do more of what you Love.” We wanted to sell the lifestyle, it wasn’t just a product for athletes anymore, but also for entrepreneurs, people working 9–5 jobs who didn’t have time to meal prep and students. Before jumping in to creating mood boards, I asked our client to pick out some of the key words that I should focus on during this project:
- Energetic
- Masculine
- Modern
- Bold
- Trustworthy
Mood Boards
Using my Design Inception sheet, I decided to create three distinct Mood Boards. On the left we have, “Modern Masculine”, the thought process behind this Mood Board was to be very minimalist and modern. The client really loved the trend of simple, duotone packaging that you see so often on coffee bags. Using the photos, I picked out a dark charcoal and off-white to be the primary colours and chose two varying blues to be secondary and complete the masculine aesthetic.
For the second mood board titled “Bold Classic”, I tried to retain the clean and modern aesthetic from the first board, imbued with more warmth. Working to really bring forward that energetic and warm vibe that my client wanted, I added images with brightly coloured packaging. This time around I chose two different shades of orange to be our primary colours. Both oranges created a vibrant feeling and using the charcoal and off-white as secondary colours, helped to balance out and be a stable base for the colour scheme.
“Gradient Apple” was the final Mood Board I created. During our meeting, the client mentioned how much he liked the visual aesthetic of Apple’s website and wanted to incorporate that style. The main key words when describing why he enjoyed their website were, clean, minimalist and modern. I felt as though Apple’s aesthetic wouldn’t work as well for the rebranding, however I felt it necessary to explore the idea. I looked through Apple’s website and quickly realized, that although it is clean and simple with its white backgrounds and black text, they use a lot of gradients to pull the viewer in. This led me to use a warm gradient as the primary colour and two different blues, that would also work as gradients, for the secondary colours. The result was a bold, warm, modern feel.
I presented the three Mood Boards to our client and he immediately liked the “Bold Masculine”, but felt it may be too un-inviting to the users. He then explained how he also enjoyed the “Bold Classics” for the energetic vibe, but was unsure about the orange as a primary colour. The final Mood Board we agreed on was a combination of the two, as seen below, and titled “Modern Bold”. The final iteration we decided on had the charcoal and off-white as the primary colours and used the blues and oranges as secondary colours, which also gave us a palette to distinguish product flavours.
Branding
With a finalized Mood Board to work off of, I started to work on rebranding the current products that Vital House offered. The products were a 1kg bag, a 6 pack of bottles and a shaker bottle.
The original product branding is cluttered and the amount of information visible on the packaging wasn’t conducive to the vision that our client wanted. The earthy colour pallet does not convey a clean, bold aesthetic and having a large amount of the packaging be a dark brown can be off-putting to potential users.
After analyzing the original packaging, I was able to identify the key improvements necessary.
- De-clutter the labels
- Design an eye catching brand that would work across all 3 products
- Utilize the new colour scheme successfully and maintain a clean and simple design
My first question once I had my main points was, where do I begin? I really liked the vital sign from the original logo, so I decided to see if I could adapt it in to a sleeker more modern design. Using the vital sign, I made iterations with different colours, sizings and placements, I made it clear and changed the typography. Once I felt that I had exhausted all avenues using the vital sign, I expanded my thought process and decided to try designs without it. I managed to create a total of 22 iterations using both the vital sign and without, to present to our client. The client was really impressed with both quantity and quality of options to choose from and pulled a few iterations out that they were particularly interested in. From there I received some feedback and we decided to combine a few iterations and try some with iconography to indicate flavour. It was also decided that the orange was too bright and didn’t quit represent “chocolate” that well and they wanted a more neutral colour for it.
For the second round of iterations I focused on finding an appropriate colour for the “chocolate” flavour. I still wanted it to be inviting and to stay away from the original dark brown, so I tried a few different variations and found two that I particularly liked. One was a pastel brown with a soft red tint and the second was a darker hue from the first. I played around with sizing, placement, iconography and colour and presented the client with another handful of iterations. I was not a fan of the icons for the labels, it felt cluttered and gimmicky, luckily the client seemed to agree and continued discussing the other iterations. I happened to mention that I really liked the motto, “Do more of what you Love.” and from there the client decided to discard the previous iterations and to make the motto the centre point of the design.
The final iteration incorporated the key components of our Design Inception. It was bold, modern, and interesting, the motto was a solid focal point and worked for all of the products offered. The softer red-brown was a much better choice for the “chocolate” flavour and the charcoal colour helped ground the overall design. The final product design was approved and with that I was able to begin working on the website hi-fis.
Style Guide
Having the colour pallet already confirmed helped in starting the style guide. The next step then, was to decide on the typography for the website. The original font used on the website was “verdana”, it is a very solid, bold font that is meant for legibility on a computer monitor. I wanted to give Vital House more of an uplift and find a font that was softer yet still maintained the same level of legibility and impact that Verdana had. I chose “Oxygen” for its rounded lettering and versatility as a header and copy text. It maintained the modern, bold look while also being more open and friendly.
As for the buttons and assets I decided to use the darker blue as the primary colour and the charcoal to accentuate and be used for the copy. The blues worked really well to help pop against the white background and bring a liveliness to the pages. The light blue helped to compliment the darker blue and could be used for the breadcrumbs and add-ons to tabs or icons.
Final Design
From start to finish I was excited to redesign and rebrand with a completely new vision for Vital House. The process was a great experience for me and taught me a lot about time management and work ethic. It helped me see how much work goes into designing one label, how to create work with the clients vision, how to implement the design aspects into a website and still make it a stand-alone piece. Overall, I thoroughly enjoyed working with our client, and was ecstatic with the amount of freedom allowed in the design. I felt as though I utilized my knowledge in colour theory and typography effectively as well as pushing myself to think outside of the box when designing the packaging.
