Volkswagen Website Redesign
After working on this awesome side project for almost one month, it is my utmost pleasure to finally show you my designs with a short description.
Before we start talking about designs I have made you can have a look at a video on Vimeo and also a project on Behance so you have a whole picture in you head of what I have done.
My whole design career is associated with website redesigns. I won one design competition in the Czech Republic with Vodafone website redesign almost 4 years ago. That event really boosted and formed my future direction and career. I have set myself a vision that once I have enough design experience I would like to do a few more redesigns. And this vision came true.
When you’re relaxed, have free time or even want to run away from your clients for a moment, side projects are a great way to take a break. My way of relaxing is designing concepts or redesigning current websites that look bad in my eyes. I’ve already done a few smaller projects in the past, like redesigns of Nokia.com, TechCrunch or Adobe.com. Every time I wanted to show off my skills, show different perspectives of how I imagine sites like this should work, it turned out being only a homepage redesign or just a facelift of a current version. This time, with VW, I wanted to go deeper, make a little story behind it, think about how I can develop my own integrated concept…
I don’t want to stay only on the homepage, one Dribbble shot or one screen presentation. What about making a video about it? Maybe even a long Behance project, portfolio presentation or even a behind the scenes video? Yep, that’s the way I want to do it this time.
I’m very happy and proud to present you my redesign of Volkswagen Website. It’s the biggest and greatest side project I’ve done so far in my design career.
The site itself has several dramatical changes from the current VW site. I’ve completely redone the site navigation, concepts of all subpages and included a few animations to make the site much more visually attractive. I would like to suggest to you to play the video at the top first. It will show you basically all the things I’ve done.
I don’t want to describe everything in this post but only to focus on a few main features.
Homepage and main navigation
The homepage is based on a big product photo (vehicle) with a short and clean title followed by a description. What else do you need? I believe nothing… All big companies have their sites flooded with ads, long articles, etc. These days, it’s really popular to use a video backgrounds on a homepage. Sure! Why not, VW is now ready for that too.
The main navigation is “stuck” at the bottom, so you can see it all the way down and up while scrolling. I’ve also done two types of drop downs for subpages here. You can see one example by hitting “Models” and the second by hitting “Why VW”. The content of the menu changes automatically based on the subpage where you are. But you can always go back to a main one by hitting “three dashes icon” as I call it. The main one will simply appear (check the video).
Chose a model
This page is actually a big drop down which covers the whole page. VW missed a really important thing there — some kind of filter. Imagine you can filter vehicles by type, price, power or consumption.
Product detail page
Do you love nice loooong scrolling pages with a big photo and details? You are in the right place! I used a current layout and photos here, but made a few changes to make this page a little more attractive (animations, more space). This page is really long to show you an image here. But you can open Behance project here.
Values and awards page
I had a serious problem with these two pages. First of all I needed to figure out how you can go to these pages. I didn’t want to make two types of drop down navigation on the site, but I tried almost every option I had in my head on this. I wanted to keep “Models” option, lately changed to a simple one with a rows and icons.
VW has done a great job with Values page. Show actual people and their stories combined with a VW’s values is the fantastic way to convince new customers to buy a new car. I was really looking forward to redesigning these “Why VW?” pages. Improved a layout little bit to fit into my concept.
Request a test drive
My concept is based on a trust and convincing people to try (and buy) any VW car they want. I don’t have any experience with building a site like this. I just want to show how I imagine it should work.
So requesting a test drive is a final screen here. When you check “Why VW”, “Models”, model detail and you are on a way to try some car, just hit the button and you are forwarded to a map. Browser can track your current location in the background and you are allowed to a final step — Just move a pin to a place were you want to be picked up by your chosen car and a test driver. That’s it. Nothing more. Fill in contact info, select a time and you are set.
I’ve made the “try a car” process as simple as I could, cos I believe that nobody wants to travel far to a showroom (which is still an option) but rather wants to see the car in a real traffic, on their street and in front of their garage.Let people enjoy it. Damn, they are choosing a new car. A thing they will have for a couple of years… Make them feel like they already own it, this is the message I want to tell :)
More details and options
Once the project is online, I still have a few more things to do on my list. There are so many ways how to play with it more and more. But there is a big problem with side projects for me. I always get completely consumed by them and forgot to work with my clients on real projects. Maybe my next project will be even bigger or more elaborate. But this time I would like to turn off the lights and let you enjoy what’s already done. This is how I would like to improve the project in the future:
- About VW (company section, job wall, leadership)
- VWNews (some kind of nice looking magazine, blog)
- Owners section (manage your car’s info, stories, personal blog)
Did you enjoy the reading? You may like my new ebook about Instagram — The Perfect Grid: A Creative’s Guide To Instagram
Special thanks to Nikhil Lutra & Ivan Soukup
