.

The recently launched CLA-Class app is part of a series of eight model brochure applications produced for Mercedes-Benz, this sits alongside the A-Class, C-Class Coupé and E-Class to create a range of interactive product apps.

Working with the agency responsible for the printed brochures, we have investigated a number of ways of approaching the leap from print brochure to digital and wanted to share some of our learning.

Don't ask for too much from people.

Keep interactions as simple as possible, and then introduce any complexity gradually from there. At the heart of the CLA-Class brochure is a fully interactive, 360°, interior and exterior tour.

These employ simple gestures to create a hands on exploration of the product from any angle and form the launch point of a number of further features. We found that simple interactions with instant feedback encouraged users to explore and play.

Users were more likely to switch features on and off repeatedly as a way of making comparisons. An example of this is the switch between day and night, which needs to be set at night to highlight the quality of the interior lighting.

We found learnt actions, such as touch and hold or swipe with three fingers, are brilliant in utility apps but are a barrier elsewhere.

Let people own the interaction whenever possible.

There are the obvious customisations such as product colour or accessories, but it is also worth considering how a person can feel ownership of a standard process or action.

When approaching how to share content, we chose to put the user in charge of exactly which viewpoint they wanted to show off . A snapshot can be taken anywhere in the app and then is presented back with all the filters and effects you would expect from a social camera app.

To complete the process, this is then instantly shareable by Twitter, Facebook and email.

As people become more used to being part of the narrative, creatives must live up to these expectations and design personalisation into their interactive work.

 

Blur the lines between decision and play.

For options on model lines, we disguised the decision making process within an interaction. Users are simply presented with a vehicle comprised of the front of one model line and the rear of another.

The interaction of sliding the split allows users to compare the cars visually, then lifting their finger at either edge acts as a selection that reveals details about that model line.

We set out for a tactile and responsive way to introduce the subtle visual differences between the two model lines and, once a user reveals the full image, further content appears since the decision has now been made.

 

Mix it up.

As people use their laptops, mobiles and tablets alongside each other, it takes a lot more to compete for their attention. Our route to overcome this is to mix what digital can offer in order to keep the delivery of information feeling fresh.

A short video within an article can show how well a feature works, an interaction within an image can draw focus to the different details and a tilt of the device can completely change the light in which you see the product.

 

Find out what works for people.

What prospective customers do with product literature hadn't been measured before.

This is a new layer of customer information that is proving valuable in both refining the user journey each brochure provides and as an insight into the features that people really care about before they take the step into the showroom.

To measure success, the usual metrics, such as number of downloads, simply didn’t cut it, instead we always strive for long engagement times, repeat use and full exploration of content and features.


About the Author:
I'm a Creative Director/Designer who knows enough about kerning and interaction design to be pretty good at digital.

Twitter: @ryanbousfield

 


Links

hr
The promotional video for CLA-Class app.

The C-Class Coupé model line selection.
The C-Class Coupé model line selection.

The social camera.
The social camera.

The B-Class introduction sketches.
The B-Class introduction sketches.



All rights reserved © 2000 - 2014 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Advertise -  About FWA -  Contact