Augmented Reality App with CBS.

APP DESIGN  |  ICONS  |  WIREFRAMES | DIGITAL

CBS are designers and manufacturers of award-winning ergonomic office products. Their mission statement of “striving for new ways to enhance user experience through the seamless connection of people and technology” resulted in us looking at how we could utilise Augmented Reality (AR) for their Sales teams to better showcase their range of on-desk solutions.

The resulting iOS and Android app allows the CBS Sales team (and end-users) to display and articulate CBS’ suite of products on the desk; in real-time and at actual size. A key part of the build was to ensure the models were visually accurate so end-users could gain an insight into how the solutions would fit into their workspace before purchasing.


Working with CGEye (specialist AR/ Unity developer), we wireframed, designed and art directed all visual interface assets. Phase 2 is due to launch Summer 2021.



Ar-screens—vertical-mobile(1)
AR 0011
Oripura-AR-banner
We started off this project with a series of simple wireframes. These helped outline the general flow of the app, with the basic shapes allowing us to quickly indicate text blocks, buttons, and images. Using Sketch allowed us to easily rearrange elements for quick iteration. Once we dialed in the general idea, we started building a detailed prototype.

CBS-Ar-app—Sketch-Wireframe
It was imperative that all assets, and especially articulation buttons, were responsive across iOS and Android devices, from 5″-12″ in size. Testing was conducted on many different devices to ensure usability wasn’t impacted no matter the size of screen.

AR-Misc-Elements2
AR-Misc-Elements
The app was styled around a simple grid system to ensure maximum compatibilty across iOS and Android.  A modular suite of icons were crafted with accompanying brand guidelines. 

CBS-Ar-Lima-
CBS-Ar-Ergo-Section-Overview
CBS-Ar-Ergo-Change
And to ensure the app ran as smoothly as possible across as many devices as possible we worked hard on optimising each 3D model, without sacrificing render quality.

CBS-Ar-Ollin-
Lima-Ar-articulation
Ar-app-render-quality