Top-banner

Yamarin & Cross

Implementing a brand renewal into the digital space

Scroll down icon
What we did

UX design, UI design, Website development, Drupal Back End, React/Redux, JavaScript, HTML5, CSS3 Front End, DevOps, Continuous development and maintenance

As part of our client's comprehensive brand overhaul, we created websites for two unique boat brands, Yamarin and Cross. We crafted distinctive design systems for each to ensure consistent brand identities in the digital landscape. We worked closely with our client and their branding agency in the content-heavy project.

Over its 40-year journey, the brand Yamarin has become one of the best-known boat brands in the Nordic with more than 70 000 Yamarin boats currently cruising the seas. Owned by Yamaha Motors, Yamarin prides themselves in the uncompromising quality of their boats and their deep understanding of customer needs. 

In 2018 Yamarin was undergoing a major brand renewal. The existing Yamarin brand, which carried both Yamarin glass fiber boats and Yamarin Cross aluminum boats under its name, would be split into two distinctive brands. The glass fiber boat range would carry the legacy of the Yamarin name, while the aluminum boat range would be distinguished under a new brand name - Cross. Our client came to us with the need to distinguish the two new brands in the digital space and create a new website for each to aid sales.

Their existing website was a marketing channel and a showroom for Yamarin boats, which are sold by third-party dealers. With our client’s business objective in mind, we wanted to create something bigger: two sites that would drive growth, turning users into high-quality leads that we could pass on to the dealers. We wanted to create websites that would truly affect our client's bottom line.

Goals:

Two websites that work as drivers for growth, turning users into high-quality leads

Differentiating two unique brands visually in the digital space 

Distinctive digital identities for two brands

The new brand identities were created by our client's branding agency Avidly. Avidly delivered brand guides containing the look-and-feel and the tone-of-voice for each of the brands. We worked with these guidelines to design how the identities would adapt to digital platforms. 

2 sites example

The brand guides were only our starting point. Implementing them into web design was a joyful challenge of its own. Every design choice we made would be based on usability and purpose while maintaining the distinct characteristics of each brand.

Cross graphic
A distinguishing feature in the Cross brand identity designed by Avidly was the diagonal layout that would be repeated in all graphic materials. Implementing this diagonal line into the responsive web design was a challenge that we had to solve in the user interface. Read more about it in our blog.

Design Systems for scalable design

We created a flexible Design System for each brand with multiple components that would give the websites coherence without making them visually repetitive. The Design System includes all the UI components needed to ensure the design scales up with the brand’s digital presence. 

Colors

 

Typography
To know more about Design Systems and whether your brand should have one, read our designer's blog post.

We dug into the website information architecture to design as simple and clear a navigation for both sites as possible. We prioritized the information that was most important to our client’s mission while keeping the primary pages visible at all times.

Both websites carry a similar structure and flow, which are based on the tried and tested design we created in the Buster website project. The flow is designed in a way that users naturally and easefully navigate towards the heart of the site – the individual boat page. We ensured that throughout their journey users would be able to navigate easily while staying well informed about where they are on the site.

Animation

Our aim in the project was to improve conversion through user-centered design and create two sites that would have a real impact on boat sales. On the individual boat's page, users can design their dream boat and effortlessly save or send the design to the nearest dealer for a price quote. In this way, we turn users into qualified leads for the dealers.

We chose to build the site on top of Drupal CMS for flexibility, good support for language versions and effortless content management for the client admins. We built the front-end using Bootstrap 4 library. The boat design tool was built on React.

Yamarin on iPad iPhone

Cross iPad iPhone

Results

The new websites were released in January 2019. Results so far have been promising. We've seen a significant improvement in organic traffic and retention compared with the same period of time last year. We've been able to decrease the number of page views per session, meaning that users can find the information they are looking for more easily and quickly.

Numbers
Comparison between 1.2 - 26.3.2018 vs 1.2 - 26.3.2019

See our work at Yamarin.com and Cross.boats.

Do you want to know more about this project? Get in touch!

Mikael Koskimaa

CEO

mikael.koskimaa@sangre.fi
+358 50 371 9516

Got a project in mind?

Let's create something good together. Fill in the form and we'll get back to you by the next business day.

You can also call us on +358 50 371 9516.