(previously known as Findhotel) is an OTA. And we’re not talking about “over the air” here. In this case it stands for Online Travel Agency. It’s Vio.com’s purpose to find and uncover amazing deals for any sort of traveler. Their millions of existing users are testimony to their outstanding competence in achieving this. Their smaller sized team, compared to the other big players in the industry, moves mountains and is an evergrowing David to the big OTA Goliaths. Despite Vio.com’s team-size they have vastly impacted the industry. Fun fact; our relationship goes way back, having designed some product UI years ago. Our gained experience and expertise in the bundled into their new project; working on a real shot at competing with the big players in the industry.
- Company size
100 - 150
- Our services
Branding, Visual Design, UX Design
struggled with their former, more easily forgettable brand identity. Their new brand name called for a new and more profound brand identity that would stand out and resonate with travelers who believe there are better deals out there. One that needed to trickle down all the way into the smallest details of their product. And one that needed to a high impact logo as a cherry on top.
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.
3 concepts, 1 winner
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 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.
A logo for the winning concept
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 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.
Physical brand expressions
As the 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 to apply on any artifact they can think of.
Applying the new brand to the platform
Obviously the new brand had to be applied and translated to the primary brand touch point; the current online platform. This would ultimately turn into . 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.
Pages about Vio.com
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.
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.