Honorable award from awwards.com 275,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 a fantastic fan base had a strong potential to make the project successful beyond just a mere student project.
Okay now, how did I create an experience that would immerse fans of Porsche?
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.
TOP 4 Design Decisions
1. Parallax scrolling
I intended 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 entirely 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.
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.
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 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.
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
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.
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.
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 altogether!
2018 stats: 275k + visitors in 4 years
In July 2018 the website had over 275k+ 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.
This was one of my favorite projects and I’m still excited about how many people liked it. It inspired a number of designers, students, developers and agencies to do better storytelling and therefore the impact of PORSCHEvolution goes beyond its primary purpose. It also opened the 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
External Links
Explore next project: Homola Motorsport
