Herholz Augmented Reality app

•

Herholz Augmented Reality App
Try before you buy

Introduction

What is this project about?

The goal of the augmented reality app is to offer end-consumers a free decision-making tool and, with that, provide the manufacturer Herholz with a sales aid. The Herholz brand is to be well-placed as a brand in the digital sector. With the augmented reality app, end-consumers can review which door model they like best in their own room before making a purchase – virtually on the display of a smartphone or tablet.

Considerations

With a view to the performance of mobile devices, only 3D models with as few polygons as possible can be used.
The virtual door models can be individually looked at from all sides. Via touch, the user can also select another model.

A photo can be taken from every point of view in order to save it to memory or share it across social media channels.

Apart from the individual products (door models) modelled in 3D, additional photographed products in a specific setting are to be displayed as an image slideshow. Furthermore, an HTML microsite in responsive design was integrated in the app, which contains further information about the company as well as links to all product catalogues.
There is seamless interplay between the HTML microsite and the parts of the app that were natively programmed in C#, Java or ObjC.
The mobile app for iOS and Android should be as easy to handle and user-friendly as possible.

Used applications, SDKs, and APIs:
Vuforia, Firebase, Java, ObjC, JS, C#, HTML5, CSS3, Photoshop, 3dsMax, Dreamweaver, Xcode, Android Studio, Unity3d, Muse, Excel

Update 11/2019:

Migration to the ARFoundation framework and AR plane tracking

DESIGN & DEVELOPMENT

PHASE 1

Prototyping

Persona, characteristics of our typical user
End-consumer, potential purchasers of a door, field sales representatives from the customer, specialist shops

Concept created with
Excel, sketches, texts, UI buttons, CI Herholz:

Design development details

3D models
Using technical drawings and high-resolution photo material, first a high- and low-poly 3D-model was modeled for each individual product. Afterwards came texture, lighting, renderings, an export for additional use in the app, and compression for mobile devices.

User interface
The design of the microsite and the user interface follows the corporate design of the Herholz brand, especially in terms of colors and fonts.

Visuals
In order to avoid sticky app performance, I worked on finding the right balance between low-res textures and good visual quality, low-poly 3D models.

Test no 1

of the very first prototype

The appearance of a door model didn’t always match the light proportions in the user’s room. The virtual door model, without the ContextCard, was not of the correct size ratio and partly turned, or not displayed in the correct angle of the actual wall.

DESIGN & DEVELOPMENT

PHASE 2

Improvements

In order to correctly place the product on a wall, a ContextCard is hung on a real door that is to be replaced by a new door. This ContextCard is scanned via the activated camera. This way, the app can calculate the suitable size ratio and the correct viewing angle, for example, in order to avoid the virtual door appearing too strongly transposed next to the real door or hugely taking up half of the room.
With the help of a simple slider, the user can adjust the lighting of the model so that the white shades of the virtual model match the lighting situation of the real room.

Update 11/2019:

After the migration to the ARFoundation framework and AR plane tracking, no ContextCard is required anymore. The user just has to scan the floor, and optionally a wall to align the door model.

Test no 2

Per request from the customer, the live mode (with an active camera) was supplemented by an additional mode. In this mode, all door models are depicted on a neutral gray background. Each model can be turned 360° on its axis. The user can easily switch between both modes; the previously selected door model will then be cached.

Potential slight perspective distortions that are dependent on the angle at which the mobile device is being held when the camera is started can be compensated for with the slider.

CONCLUSION

The AR app offers a user-friendly interface and ease of operation. It includes information about manufacturers and product-relevant information. It was already successfully used in its first version across all sales channels, by field sales representatives, specialist shops, as well as end consumers.

App-Launch, Version 1.0: In November 2017, iOS and Android
Augmented-Reality Plugin: Vuforia
Development in C#, Java, ObjC

Update 11/2019, app version 2.0+

Migration to the ARFoundation framework and AR plane tracking. More product content added. Update of the image slider 3d gallery. Re-design of the UI

Where to go next:

Addition of an audio guide using Text-to-Speech to play how-to instructions.

Addition of Speech-to-Text so that app users can interactively change models instead of tapping buttons.