CLIENT/AGENCY
Volkswagen - Tribal DDB
MY ROLE
Concepts, UX Wireframes, UI, Responsive design
MONTH/YEAR
August 2015
TEAM
Myself, Digital Producer
brief and objectives
- Develop a responsive landing page to promote Volkswagen’s new car technology called App-Connect.
- Introduce new prospect and Volkswagen owners to App-Connect, clearly communicating USPs, customer benefits and drive to relevant app stores.
- The core business objective of the new in-car technology is to drive relevancy and interest to potential buyers to Volkswagen with a broader product offering that is competitive.
DESIGN PROCESS AND RATIONALE
- The design had to use the Volkswagen branding, website header, footer and navigation, so with that in mind, a scrolling page worked best for the UI structure within the main website.
- With some key assets such as the promotional video and hero image provided, I drew up sketches for the desktop UI concepts, adapted to display best on mobile and produced wireframes.
- The design consisted of a series of blades (using the brand colours), splitting up the content into four clear pieces of information - What the product was, What it did, What apps worked with it and where to get it.
KEY CONSIDERATIONS and challenges
- The key challenge for this project was ensuring synergy of Volkswagen branding driving interest and excitement in the new in-car technology product.
- Responsive Elements - App icons were stacked in the mobile view and scrolling arrows made larger for the mobile view, considering finger size rather than the mouse cursor.
- Responsive Fonts - In the mobile view, text sizes needed to be bigger for ease of viewing
- Hidden Content - In the app showcase section the desktop view displays images of iOS and Android phones whereas in the mobile view, the device images were not shown as it is not necessary. The promo video will resize in the mobile view to fit to full width of the screen.
- When clicking on App icons, a slightly transparent black overlay allows for further details to be viewed, without the distraction of the landing page but still visible in the background.
OUTCOME AND RESULTS
- Responsive UI design was approved by the digital producer and sent to client for further feedback.
- The final design of this landing page is very striking, visually appealing and showcases App-Connect.
- I am very proud of this work and I learnt a great deal about considerations of responsive design.
