A fresh brand identity for the cheerful travel company, Travalion

Overview

We were approached by a German startup to design a comprehensive brand identity package and develop the entire front-end architecture for their service.

Our work encompassed logo design, typography, color palette selection, and the creation of a complete set of reusable design components. These components formed the foundation for the website’s design and build, ensuring consistency and scalability throughout the project.

Forming the brand identity

We were tasked with creating a ‘happy’ brand identity that conveyed energy, friendliness, and professionalism. Our approach started with typography, as a great typeface can evoke emotion and often serves as the foundation for a logo.

Given the client’s German roots, we sought a typeface that resonated with their identity. We discovered NB Akademie, a beautifully designed typeface by German designer Stefan Gandl, which perfectly matched the vision for the brand. Its style aligned seamlessly with our design aesthetic, making it the ideal choice for this project.

Designing the logo

The logo incorporates the chosen typeface, complemented by a cheerful smiley face icon that aligns perfectly with the brand’s strapline, ‘The Happy Travel Company.’ We designed this distinct icon to be versatile, ensuring it works seamlessly across various branding materials, including social media shortcut icons and other digital applications. This cohesive approach enhances the brand’s recognition and appeal across multiple platforms.

Research competitors

We believe it’s essential to research competitor websites to understand what they offer and how effectively they deliver both visually and functionally. This helps us identify opportunities to design and develop solutions that not only meet industry standards but give our clients a competitive edge. By analysing these insights, we ensure our work stands out and delivers a superior user experience.

Creating a design system

Building a design system for Travalion was essential for ensuring scalability, efficiency, and consistency in our design process. This design system served as a single source of truth for both design and code, establishing a structured approach that prevented chaos when collaborating with multiple team members.

The design system encompassed all elements, including typography, color palettes, spacing scales, components, patterns, and comprehensive documentation on their application within the service. We created the system in two formats: an asset library prepared in Sketch and an interactive coded resource.

The asset library was crucial for designing new pages, as any updates made to the library were instantly reflected in all design files that referenced it. The coded resource provided code snippets, previews, and guidelines for utilising the components effectively.

With both resources in place, designing and developing pages became a streamlined process, significantly reducing inconsistencies in design and development. This allowed us to quickly bring new pages to life, capitalising on the groundwork laid in preparing the necessary assets.

Scaleable blocks of reusable code

Each component was meticulously designed to be responsive, accessible, flexible, and production-ready. Common elements included date pickers, accordions, menus, pagination controls, tabs, filters, and a variety of other interactive features. This attention to detail ensures that all components function seamlessly across devices and meet the diverse needs of users.

The results

We delivered a clean, attractive, and scalable solution that looks and performs beautifully across all devices. This flexibility allows for the seamless creation of new pages, supported by clear documentation that facilitates future growth and development.