Breathing new life into the world of travel and stays

The project started by another agency but didn’t work out in its first stages. We took over by starting an audit on their current work, and created 3 different brand concepts which accumulated into a brand guidelines document. Defining colors, typography, patterns, you name it.
We designed an articulate logo and logotype. After which we worked on the brands’ expression in the form of digital, but also analog products.

Starting out with the intention of sparking the imagination we were on the hunt for a concept that plugged in seamlessly with the company’s DNA. Although the first two concepts — one revolving around a keyhole as Vio.com opens doors, and one concept we named “Go & Stay” which leaned into Vio’s original Latin translation of “I travel, I journey” — had some real potential, it was the third concept that resonated most. We called this third concept “Deals come in all shapes and sizes”. A fresh take and extension on an existing concept: There’s a deal for everyone & for every type of traveler.

For the main typeface of Vio we turned to Lineto’s Circular. Not only to connect with the rounded corners in the brand’s shapes but also due to it’s sturdy yet optimistic character.

We‘ve used different typography scale factors for desktop, tablet and mobile breakpoints as multi-device support is important with the scale of Vio.com’s (potential) user base. Another big focus point was the ability to support multiple language characters and currencies. Something Lineto accommodated for perfectly.

As a representative of passageways worldwide, we knew Vio.com needed something colorful and inclusive. And accessible in the context of their online platform. The foundation colors are therefore a 2-parter; the punchy Topaz Blue and a series of grayscale tones. But the real pizazz in the brand comes from the accent colors combined with a dark shade of Amethyst Purple. To be used in roughly equal amounts we’ve got Ruby Red, Amethyst Purple, Amber Yellow and to finish off with a strong contrast instrument: Rock Black.

While on the creative hunt for a conjunctive logo we stumbled upon a set of shapes that tied perfectly in with the new brand name. Not only did we fall for the how the shapes could form an arrangement that spells out VIO using the shapes. The shapes could also be arranged to form into a V shape. For the logotype we focused on recognizability when displayed on a smaller scale (think listings in search engines). We rethought the scale of the “.com” part to be slightly smaller in comparison to “Vio”. By doing this we met Vio.com’s need to including the entire web domain as a brand name for the sake of brand awareness and findability. The V’s arched tail was a play on Vio’s definition in Latin: “I travel, I journey”.

The shapes from the logo and the Vio.com brand personality were the starting point for the motion animations principles. We translated these into fundamental motion principles and made sure they were included in the provided brand identity guidelines. These would serve as a directional anchor  for whenever motion animation would be used in brand messaging.

We pinpointed two fundamental motion animations principles. When animation would be used within Vio brand touch points, it would take an ease-in-out transition into account. The second motion animation principle concept was Morphing; the effect of two or more shapes seamlessly changing/morphing into one another. This hints at the vast amount of deals and the ability of changing the parameters of a search in order to find the best deal for you.

As the Vio.com brand extends further than just digital products, we’ve incorporated the brand into real-life objects too. Some for actual conceptualization to be prepped for production. We worked on various types of collateral. From sweaters to billboards, from tote bags to posters and of course business cards. All add to a cohesive expressive brand-language for Vio.com to apply on any artifact they can think of.

Obviously the new brand had to be applied and translated to the primary brand touch point; the current online platform. This would ultimately turn Findhotel.net into Vio.com. We focused on letting the brand breathe through the interface. We needed it to feel like distinct interface with subtle hints of the shapes and overall appeal that made the Vio,… Vio. And all of this while keeping the user experience familiar and consistent to the platform’s users.

Our UX Design team worked together with the Visual Design team to set up the “about the company” pages outside of the platform. Attempting to convey their culture and new brand into an evocative set of pages, we created wireframes and visually designed a handful of screens. These were subsequently brought to life by the marvelous Vio.com development team.

Vio.com is completely set with everything they need for the definition and execution of their brand; A comprehensive brand-guideline document for future amplification as well as a complete package of designed webpages and physical brand-expression designs. Now ready for a real shot at competing with the big players in the industry.