Trends in mobile web design for the automotive industry

MediaCatalyst recently carried out a review of over twenty automotive and motorcycle mobile websites in Europe and the US. The insights of our review brought up some interesting trends and design practices that we would like to share with you and invite commentary.

Visual Design and Navigation

In terms of visual design approach, sites fall into two broad categories. There are the experiential sites and there are the more functional sites (Audi USA/Vespa and Renault/VW respectively). The former presents larger, more lavish imagery whereas the latter focuses more on presenting comprehensive and obvious navigation that aims to get the user to where they want to go as soon as possible.

Sites now offer dynamic navigation brought to you by the wonders of HTML5 and CSS 3. This is where additional navigation options are shown in neatly expanding or collapsing accordions or where navigation appears almost immediately from the sides of the page.

Typical Content

The best sites have spent time thinking about what users are realistically going to do or expect to do while using their phone given screen size and other important factors. This seems to boil down to information on new products, finding dealers and displaying current campaigns. This fits well with what we know about these customers from speaking car owners and bikers at our workplace. Many treat browsing new products as mental oxygen while commuting or during lunchtime, as if it were feeding their aspirations of new ownership. Others appreciate being able to complete the rudimentary tasks of finding a dealer’s number for assistance or to action a sales enquiry.

Some sites additionally offer to book a test drive or to download a brochure.  Although most sites refuse the temptation of including servicing or other technical info about product repair or support. Never did we observe a car configurator or other more complicated functionality. This is left to the premise if the native app.

Pages dedicated to product information concentrate on presenting a gallery of the product alongside selected brochureware information. Inevitably there are varying levels of technical specification, the emphasis being on miles per gallon (km/l) and emissions for obvious reasons. Finally, we observed some nice but rare implementations of interactive 360 views of the automobile (VW).

The find-a-dealer function usually appears a distinct option in the main navigation or consistently at the bottom of every page for easy access. There is a split of sites that incorporate a map into their own pages and those that launch the map application on the device itself. The advantage of the former is a more curated content set. Typically we see a ‘near me’ function and also a search field for more general enquiries. The best examples show maps within the site itself that immediately point out the location of dealers around you.

Finally at the bottom of any given webpage we see options to view the full site, legal terms and social media options that typically cover Facebook, twitter and YouTube.

Next time we will talk about Mobile websites versus Desktop websites, Mobile web versus Native App and The Hybrid, The Web App.

For more insight on mobile web or app design please contact Craig.Stuart@mediacatalyst.com

MediaCatalyst
Herengracht 182
1016 BR
Amsterdam
The Netherlands

About Matthew Carney

Through the power of new technologies, innovation and imagination I am in awe of the possibilities for connecting and engaging people in today’s creative and dynamic marketing space. And, inspired by the possibilities for brands and organisations to impact peoples lives for the better, which I see evolving by the day.
This entry was posted in Experience Design, Projects, Service Design, Visual Design. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Security Code: