Redesigning the current
Volkswagen Landing page
The Volkswagen brand is one of the largest car manufacturers in the world. For more than 70 years, they have been making innovative technologies, the highest quality and attractive designs accessible to many people – with the likes of bestsellers such as the Beetle, the Golf and the all-electric ID. family for the new world of mobility. They are present in over 140 markets and produce vehicles at 29 locations in 12 countries. The Volkswagen brand employs more than 170,000 employees.
I was responsible for extending the new brand identity to the digital products including for web and mobile.
My role in this project: UX/UI Design, Journey mapping, Wireframing, Information architecture, Mobile display and Handing off.
The problem
The current Volkswagen design does not have an order in the composition that is shown within the website. There is not much interactivity with the categories or management of iconography according to the brand. Their team want to use the same components as possible
Their team wanted to use the same components to redesign the landing page, it is also allowed to add new elements that harmonize with the graphic line and style of the brand.
The Goals
The primary goal was to design with the same graphic line and add some new components. The current landing page would serve as the MVP and would develop in collaboration volkswagen development team.
The MVP solution would define the framework and visual style of the new brandmark. It was essential to establish a design system and component library. As the design is intended to be implemented with the development team, it is also necessary to hand of all design material ready for development.
The Users
The landing page would be used to diverse target audience that includes the middle class, upper-middle-class and upper class. The passenger cars are targeted to the middle-class segment who are looking for a study and safe vehicle at an affordable price.
Volkswagen has divided its market in the following ways to create something for every target segment: Professionals, young people between the age group of 20-27, A consumer who regard a vehicle as a status, A consumer who prefer better speed and engine, Good transporter for small scale businesses and A consumer who haul equipment that has advanced features.
Discover and analysis
Working with my favorite methodology, I turned the project into four key phase, each comprised of important steps. This approach helped plan out the project roadmap and determine key milestone and deliverable dates.
With the tight timeline to MVP, working with an agile, sprint-based process allowed me to iterate on and validate potential solutions early and often.
After conducting research on the company and its digital products to learn about their current workflow, set project goals, define the project roadmap, and sketch high-level concepts. I created the entire wireframes to the landing page and mobile version. These steps guided the development of low fidelity business flows to work out screen-to-screen interactions.
Concepting
I wireframed all screens to define the information architecture. I also explored various navigation approaches to determine the best experience for the user. I collaborated with Volkswagen users along the way to validate concepts and gather feedback to continue improving the experience.
Design solution
The MVP is the landing page using the visual style of the brandmark using the current and new components. The UI is designed to be very visual and offer the user previews of news products of the company.
Give importance to what is new within the company with a more intuitive preview with the user, show the categories for new cars and be able to interact with the user with the implementation of selecting the ones they like the most.
Hero
New Cars
What´s new on Volkswagen?
Features
Handing off
As part of the project process, at the end of everything related to design, guidelines for developers must be created.
So that they can start the development process of the web/mobile product. All the necessary parameters are established to be able to create the design with high fidelity.
