Web Augmented Reality

How to reinvente the future of business card ?

Overview

Today, Augmented Reality (AR) is mostly used with applications using technologies based on ARkit and ARcore. These technologies are very efficient but they raised a problem. Indeed, users are more and more reluctant to download a one-time-use application. So, how to allow the user to live an AR experience without requiring him to download an application? From this observation, Lynkware had decided to develop AR experiences through smartphones' web browser.

Role

Intern development and web design with Lynkware

I got several tasks on this project. My first task was to develop a Javascript module using ThreeJS to create an online business card in 3D. My second task was to create the UX/UI of these first pages before the AR experience begins. Finally, I design and integrated a presentation page of the project for the Lynkware website.

June 2019 - August 2019

UI design

Javascript

ThreeJS

HTML

CSS

I do think that a significant portion of the population of developed countries, and eventually all countries, will have AR experiences every day, almost like eating three meals a day. It will become that much a part of you. —Tim Cook

Business Card

The idea

Business cards are still used today. It's an easy way to exchange contact with potential future customers. Nevertheless, the place on a business card is limited and it's can be hard to distinguish ourselves from the others. That's why we thought at the business card for the first application of the web AR

Features' choices

I was responsible for choosing the features of the business card. I ask myself: Which information I would like to show but can't on a classic business card? What interactions would I like to have with it? I got several ideas as saving the person in the contact just by scanning the card or display different button to call, email or text, add social media account, display a picture of the business card owner, display a map with the location information, add videos, links to different projects,...

First design realised for the business card webAR application

Technology

Javascript

Three.JS

Development of business card module with ThreeJS

Once I had chosen the features for the business card. I had to realize these elements using ThreeJS and javascript. The goal was to create a library which proposed a different set of features that user can choose to add or not to their AR business card.

See the documentation file

Augmented Reality WebApp Design

The mission

For this second task, I had to realize the design of the page before the AR experience begin. Unlike AR applications, the WebAR requires the users to accept the usage of the camera. As it's not something usual to use the phone camera on the web user, I had the task to find a user journey that allows us to reassure the user and invite him to begin the AR experience.

User flow for the webAR realised on Whimsical

Web design proposition realised on Photoshop

One of the animations realised on After Effect

Technology

Javascript

HTML, CSS

Design

Photoshop

After Effect

Design and integration of 3 webApp pages

After the design finished, I had to integrate them with HTML, CSS, and javascript.

Web AR presentation page

Screen capture of the integrated design

Technology

Javascript

HTML,CSS

Design

Photoshop

Figma

Design and integration of a presentation page

My last task on this project was to design and integrates a page that presents the WebAR project. The page should demonstrate the advantage of this solution. It should show what is possible and invite potential customers to contact the Lynkware society.

20 Minutes Redesign