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 ARKit, ARCore, 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+
More product content added
Update of the image slider 3d gallery
Re-design of the UI
NEXT STEPS
Add scenarios which explain in 3d the technical installation of a door.
Add an AR measurement tool, a virtual measuring stick
#ar #augmentedreality #arcard #product #visualizer #produktvisualisierung #mobileapp #ios #android #productlaunch #marketingtool #salestool #arcampaign
Credits:
AVK Terwey, B. Terwey product images by © Herholz