PORSCHEvolution is a parallax scrolling website paying homage to the design of Porsche. As you scroll through the journey, music changes according to the era you visit and you get to learn about Porsche.

OPEN PORSCHEVOLUTION.COM




You might have come across it if you were designing a parallax scrolling experience in the last 4 years. What started as a simple student project, with small expectations, became one of the best examples of storytelling websites of 2015 and 2016.

240.000 + visitors in 4 years!!

Honorable Awwward for PORSCHEvolution


PROJECT LINK
PORSCHEVOLUTION.com

PROJECT TIMELINE
Started in Spring 2014
Redesign One in Winter 2015
Redesign Two in Spring 2018

PROJECT STATS
240k+ page views
1.6k Facebook Shares

TOOLS
Pen & Paper, HTML, CSS, jQuery

Honorable award from awwards.com 240.000 + of visitors, plenty of featured articles and a bunch of people asking me to build the same site with ____ (furniture, other car brands, music bands, hotels etc.). Even in 2018, there are 1000 weekly visitors viewing this website. Now let me tell you how I created it.

Design Challenge

PORSCHEvolution started as a student project back in Spring of 2014. My task was to create a project that would immerse its users. Since I have been based in Stuttgart at that time, which is the hometown of Porsche and I love Porsche cars, I chose to do the experience around this car brand. Choosing such a brand with an amazing fan base had a strong potential to make the project successful beyond just a mere student project.
 A photo of an initial brainstorming

Okay now, how did I create an experience that would immerse fans of Porsche? A photo of Porsche fans in the Porsche Museum

Process

I started with researching the history of Porsche and choosing some of its top cars. Right after that, I went to visit the Porsche Museum to get a better feeling for the brand and its values. A photo of the Porsche Museum

TOP 4 Design Decisions

1. Parallax scrolling

My intention was to immerse Porsche fans into the history of Porsche in a way they have not experienced before. I wanted to achieve a nostalgic feeling, where you feel like “Yeah! I love 70’s and the Porsche too!” or “Oh! I remember that.” To do that I chose parallax scrolling and full-screen images. Parallax helps each "scene" on the page transition smoothly and showcases the progression of the brand.

2. Music

I wanted to add one more layer of immersion and I realized music could enhance that experience (a visual/audio sensory experience). I found a great song that absolutely matched the website - Evolution of Get Lucky by PV Nova. I got his permission and cut it to match my website. The music, while using the same song, is creatively stylized to match the corresponding era. This design pairing accents the car on display and creates a happy, nostalgic effect.

3. Clean UI

The UI had to be useful but minimal with no distractions, no advertisements, no other kind of interaction. I knew it had to be simple so the visitors can focus on the content. Users can either click on the timeline years on the left-hand side or scroll anywhere within the full width of the page and compare the cars themselves.

4. I coded it myself

Even though I knew it will be a challenge, I decided to prototype and code the whole website myself. This gave me a great opportunity to learn what can be done and how it such code works.

Initial Version

My idea was to have a clean start page with a start button from a car. As soon as the button is clicked, the sound of a Porsche engine firing up is heard, exciting users' senses. The other screens would have a brief description of the cars and simple navigation. I wanted to keep it simple. See the initial sketches below. PORSCHEvolution sketch version 1

Due to the short timeline, I had to translate the sketches almost directly into code, without any real mockups, so the initial version lacked a proper design process.

PORSCHEvolution mockup version 1 - intro PORSCHEvolution mockup version 1 - history PORSCHEvolution mockup version 1 - car

Looking back at the first version: Let's say it was a good start, I got a good grade for it and the other students liked it. For a couple of months, I didn't really pay any attention the to the website, and then I realized it deserved to be better.

Redesign One

In December of 2015, more than a half a year after publishing the first version of PORSCHEvolution, I did a design evaluation and the Google Analytics reported only 700 visitors - that wasn’t that exciting.

Before Redesign: Only 700 visitors

During that time I also grew as a UX designer, so I naturally wasn't happy with how the website felt. I went back to pen and paper and sketched version 2.0. It had a cleaner UI, the menu was less cluttered. I added a ‘PlayStation’ game style experience with the flashing ‘START YOUR JOURNEY’ text to immerse website visitors.

Previous Next

After I was done sketching, I updated the visuals - see below. Knowing the website had potential I submitted it to a competition at Awwwards.com.

After redesign: 20k+ visitors in 3 months

Previous Next

Redesign Two

When in 2018, I checked my Google Analytics, I found the following:

2018: 1000 visitors every week

There were still 1000 visitors enjoying the experience, even in 2018. Wow, I was amazed. 4 years later and there are still people visiting it?

There are still so many visitors, so I thought I need to serve them a better experience. Together with Marion Bruells, a talented Visual Designer, we worked out a light design refresh to keep it up to date and pleasant even in 2018. The website got more suitable colors, fonts and a portion of the description improved.

Mockup of the Redesign 2 - intro Mockup of the Redesign 2 - history Mockup of the Redesign 2 - car

Awwwards

On December 17th 2014, I submitted PORSCHEvolution to Awwwards.com - world known competition body, which aims to recognize and promote the best of innovative web design. I wanted to win a site of the day and be featured “The 365 Best Websites Around the World 2014“ book, but the competition was strong and I got a very satisfying Honorable Mention. This drove a lot more traffic and started a wave of publicity and featured articles. awwwards.com Honorable Mention

Link: Open https://www.awwwards.com/sites/porschevolution

Analytics

Here are the stats from February 2014 - July 2018. Pay attention to the beginning of the Page View timeline. Version 1 was live from February 2014 until December 2014 and had uneventful 700-page views. And suddenly when Version 2 has seen its light and it got published on Awwwards, there were 1182 page views in one single day - that is more than in the previous months all together!

2018 stats: 240k + visitors in 4 years

In July 2018 the website had over 240k+ page views from various countries around the world. It is interesting to see that Germany ranked as the last in the Top 5 countries by visits, even though it is the home of Porsche.

Analytics of PORSCHEvolution

My 2 cents

This was one of my favorite projects and I’m still excited how many people liked it. It inspired a number of designers, students, developers and agencies to do a better storytelling and therefore the impact of PORSCHEvolution goes beyond its primary purpose. It also opened a door to Porsche for me and I was invited for an interview.

Please note that this project has not been sponsored by Porsche.


CHECK OUT THE PROJECT

 

NEXT PROJECT: HOMOLA MOTORSPORT   Arrow pointing right

 

© Copyright Ondrej Homola, 2018