Mobile layout was a huge consideration of the brief. I used an all-device first methodology and designed all device breakpoints simultaneously. The end result was a fully responsive layout which could handle multiple components and layouts.
The vehicle page focused on car features. Each section has an interactive element or design features to keep the page visually interesting. At the conclusion of the project the client was extremely happy with this methodology, and this approach is to be used for product releases in the future.
A large part of the brief was to make the page more engaging and interactive for the users. This was achieved by creating multiple interactive sections of the page. As the users scroll down, there are areas to click on and explore. Each section of the page has an interactive elements, either tap/click or scroll triggered. Below are the exterior and interior interactive elements.
I started the design process by trawling the net for car manufacturer sites. Below is one of the many moodboards which were complied.
I sat down with the UX team at Tribal to nut out the content and hierarchy . We looked at the existing content, the assets which were available and the vehicle features.
Some initial sketching was done before moving into more higher fidelity wireframes.
To get the concept over the line i creating the below wireframe. This was used to show the page hierarchy, assets required and page interactions.
A style guide was created for the front-end team.
Role in project : Lead Design, Art Direction
UX Input : Mark Seabridge
Agency : Tribal Melbourne
https://au.volkswagen.com.au/models/touareg/
