MERCEDES-BENZ INTERACTIVE DISPLAY

Digitising the showroom

Developed a design from wireframe stage that considered the fixed positions of existing digital displays in Mercedes-Benz Retailers nationwide, modified to be touch-enabled.

UI & UX project at Digital Annexe

Brief

The client provided a collection of demonstration videos and gallery images for which an interface was needed. This would allow people to explore the features of the new Mercedes-Benz E-Class Saloon, at their own convenience, on digital displays within the showroom.

Wireframes

MB-Display-Wireframe-20160321-1
Wireframe v1

To create a simple interface, I started by dividing the screen into areas dedicated to video footage and navigation between the different videos.

MB-Display-Wireframe-20160321-2
Wireframe v2

For convenience, I added an in-video navigation area. I then tested this with people of various heights, discovering the areas they could comfortably reach.

MB-Display-Wireframe-20160720
Wireframe v3

With only the screen's top half being suitable for interaction use by the people I tested with, it was suggested to use the bottom half for a promotion message.

Testing

After researching where the displays were positioned within retailers, a screen of the same size and distance from the ground was set up in the office.

I then used it to test the initial wireframes on people of various heights to see where on the screen they could comfortably reach and used the insights to adjust the wireframe.

In retrospect, I now realise the design is unempathetic of wheelchair users and little people. To solve this, I would implement a button lower down on the screen that would swap the positions of the interactive and promotional areas so that it was comfortable for a seated or little person to use.

20160321-E-Class-Wireframe-Test

Result

Using just a few videos, an ‘x-ray’ graphic and a fixed screen position, I created a comfortable experience that allowed customers to easily discover the new car’s features at their own convenience.

MBdisplay-1SelectFeature-HiFi
Home screen

The car ‘x-ray’ visual that was supplied by Mercedes-Benz became the foundation of the home screen, allowing navigation between the different videos we had to show.

MBdisplay-2RemoteParkPilot-HiFi
Interactive demonstrations

To enable a clear understanding of each feature, gestures from the car's mobile app were mimicked as closely as possible on the display, recreating the real-life experience.

MBdisplay-3DrivePilot-HiFi
Convenient video player

Integrated ‘chapter markers’ were used to help people jump to the particular section of the video they were interested in.

MBdisplay-0Idle-Photo
MBdisplay-1SelectFeature-Photo
MBdisplay-4InteriorTechnology-Photo
MBdisplay-3DrivePilot-Photo
MBdisplay-4-CarWrap-Photo

More of my work

Lily’s Kitchen International TemplateUI & UX project for Lily’s Kitchen

easyJet Cheap Flights web pagesUI & UX project at Valtech

The Mall’s RewardMe appUI project at Digital Annexe

Evans’ iPhone appUI concept for Evans