#amazing, ,

Website
Relaunch / Redesign
Kosi-Busse.de

The company Kosi-Busse is Eastern Bavaria’s largest VW bus and VW commercial vehicle dealer with over 20 years of tradition. The company enjoys a high reputation as an expert in the field of VW bus trading, VW bus camping equipment and conversion of VW buses.

[
#amazing, ,

Website
Relaunch / Redesign
Kosi-Busse.de

The company Kosi-Busse is Eastern Bavaria’s largest VW bus and VW commercial vehicle dealer with over 20 years of tradition. The company enjoys a high reputation as an expert in the field of VW bus trading and camping equipment and conversion of VW buses.

[

Briefing:

The main goal was to redesign the company website in a way that reflects the professionalism of the company and the services offered, allowing customers to easily find the information they need in a modern, simple and intuitive design.

The customer should be given the feeling of being in the “VW Bulli (Bus/Van) Wonderland”.

The Problem:

The lack of customer-friendly navigation leads to a high bounce rate. Required information is difficult or impossible to find on the current Kosi-Busse website. Also, the current website does not reflect the expertise and services that the company has.

Timeline:

To guide our client through the process of making their website, we decided to incorporate layout and illustration work into the visualization early on in this redesign project. This allowed us to give Kosi-Busse an early impression of the new website.

#amazing, ,

Solution:

We introduced our client to our way of working. After viewing material, we first created a sitemap to determine the scope of the new website. Then a style guide for the project was made.

Based on this, a wireframe (wire model) was created with all representative pages. Future text layouts were positioned in this wireframe and graphic illustrations with placeholders were planned.

#amazing, ,

Phase 1:

Conception

Style

Guide

Our style guide is designed to assist Kosi-Busse in creating a consistent look and feel for their online presence.

Essentially, our guide summarizes the use of typography and colors.

A uniformly designed website conveys professionalism and seriousness. Customers feel addressed and stay longer on the site.

Typo

graphy

Each font communicates a different message and has different strengths and weaknesses.

The nature of the fonts chosen here helps to focus the user’s attention on the UI (user interface) and the actions in front of them.

Poppins 

Bold

Semi Bold

Regular

– Headlines
– Buttons

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789!@#$%^&*()

Open Sans

Bold

Semi Bold

– Text content

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Color

Range

The special effect of colors plays a big role in web design, because colors touch the senses, trigger feelings and stay in the memory.

Strong Cyan

Cyan is the color that symbolizes freedom. A color that reminds us of water.

#008A88
RGB: 0, 138, 136
CMYK: 100,0, 1, 46

Light Grayish Cyan

#86B9BC
RGB: 134, 185, 188
CMYK: 29, 2, 0, 26

Cyan is the color that symbolizes freedom. A color that reminds us of water.

Grayish Blue

#324855
RGB: 50, 72, 85
CMYK: 41, 15, 0, 67

 Blue is the color that reminds us of calming and trust.

Light Gray

#B3B5B6
RGB: 179, 181, 182
CMYK: 2, 1, 0, 29

Light gray, reminds us of calmness and serenity.

Light Orange

#F3BC6A
RGB: 243, 188, 106
CMYK: 0, 23, 56, 5

Orange is the color of vitality and happiness.

Layout

Grid System

#amazing, ,

Wireframe

Text and Image positioning

#amazing, ,

Phase 2:

Illustration, Design & Prototype

#amazing, ,
#amazing, ,#amazing, ,
#amazing, ,#amazing, ,
#amazing, ,#amazing, ,
#amazing, ,#amazing, ,
#amazing, ,

Interactive

Prototype

Before it went to the implementation of the layout using HTML, CSS & Javascript, an interactive functional prototype of the website was created.

Based on the prototype, our customer could already get a comprehensive impression of his future website.

Phase 3:

Implementation, configuration & test phase

#amazing, ,

Plenty of space for offers and promotions in an animated header:


In order to present offers and promotions to website visitors at first glance, we created an animated hero header slider (header slider) for Kosi. This way, seasonal offers can also be inserted into the website at the desired position without having to change the basic structure of the website later on.

#amazing, ,

Broad offer – compactly packaged and quickly accessible in the navigation:


One of the problems that had to be solved was to counteract the high bounce rate. Our menu, specially designed for Kosi, takes the user directly to the desired point. At the same time, it provides a much better insight into the entire range of services than a conventional navigation, as more information is passed on to the website visitor without loading times.

#amazing, ,

In the spotlight – team presentation with insights:

 

#amazing, ,

Functions that should not be missing on the website of East Bavaria’s largest VW Bus/Van expert:

  • mobile.de API-interface
  • Vehicle detail and comparison view
  • Vehicle Expose PDF print
  • Santander financing calculator
  • various contact forms

 

#amazing, ,

Phase 4:

Live launch of kosi-busse.de

#amazing, ,

Success all along the line:

For a project like this, high quality standards played an overriding role. Measurable successes were achieved shortly after the launch of the website.

&

improvement of search engine ranking

&

signigicant increase in the number of contacts

&

lower bounce rate of website visitors

&

faster loading times

&

longer time spent on the website

&

further joint cooperation between Kosi-Busse and #amazing webdesign agency

Live Website: kosi-busse.de

(Link opens in new tab or window)

Bereit Ihr Projekt umzusetzen?

let's get #amazing

Kontaktieren Sie uns, wir besprechen Ihr Projekt und beantworten gerne Ihre Fragen.

Sie erreichen uns auch telefonisch unter
0941 / 56 99 2742

Workflow

Schauen Sie sich unser Beispiel-Workflow eines Webprojektes an. Dieser gibt Ihnen einen kleinen Einblick, welche Schritte für die Realisierung und Umsetzung eines Projekts gegangen werden.

#amazing, ,

Im Internet beginnt alles mit einem starken Webauftritt

Webdesign

Durch innovative Designideen, modernes Management und Anwendungstools etablieren wir Ihren Webauftritt. Mit unseren visuellen, funktionalen und strukturellen Gestaltung Ihrer Website überzeugen wir Ihre Kunden.

mehr erfahren

#amazing, ,

Social Media Management

Social Media ist ein fester Bestandteil im Marketing-Mix. Wir helfen Ihnen dort zu sein, wo Ihre Zielgruppe ist.

mehr erfahren

Online Marketing

Mit Ihrer Website und Auftritt in den sozialen Netzwerken sind die ersten Schritte getan. Mit weiteren Features setzen wir Ihre Werbekampagnen perfekt in Szene.

mehr erfahren

SEO

Mit den richtigen Maßnahmen verbessern wir Ihre Platzierung in den Suchmaschinen und steigern den Traffic auf Ihrer Website.

mehr erfahren

Hosting & Service

Mit uns haben Sie einen starken Partner an der Seite, um Ihren Webauftritt bestmöglich und rechtssicher zu pflegen und zu betreuen.

mehr erfahren

Pin It on Pinterest