The early Layar app icon, tilted
Design & Code

Layar

First working prototype on iPhone

First version of Layar's augmented reality browser to run on iPhone, made in 2009 for the new 3GS and its compass. Layar was a start-up before funding, so the work was quick iterations: paper prototypes and rough builds for demos. They rushed to be the first on the platform.

For Layar we developed the first version of their innovative AR (Augmented Reality) browser on the iPhone platform. This version was built for the just-released iPhone 3GS using the accelerometer and the just available compass.

When Layar contacted us, they didn’t have a proper design team and had little experience with the development process. So we helped them with the interaction design for the iPhone platform, using paper prototypes and quick prototypes. And because at the time Apple hadn’t yet released a version of the OS which allowed for an easy overlay of the camera’s video feed, we had to improvise and manipulate their camera photo taking functionality.

At the same time, Layar, as a start-up, wasn’t fully funded yet and their product was in constant flux. Apple’s products, operating systems, and policy concerning the use of AR and the camera were also quickly changing. Apple’s confidentiality regarding pre-release software and new possibilities in their OS for AR made it especially challenging to develop for with the publicity that Layar was seeking in their pre-funding stage. These factors made it obvious we had to use an agile development process.

Close-up of the paper prototype: a cut-out Funda listing for Prins Hendrikkade over a camera view, a Google map folded out below
Paper prototype of search: a printed iPhone keyboard under a search field reading term, loose cut-out screens around it on a tree stump
Paper prototype of the AR view: a Funda house listing, distance marker and radar layered as cut-outs over a photo of Amsterdam
Paper prototype of a settings screen pieced together from cut-out sliders, a text field and a picker, spare table rows beside it
The Funda layer in radar view: houses nearby as blue circles, the selected one red, its address, price and distance at the bottom
The Panoramio layer in radar view: photo markers around the viewer, the selected photo of a tree 570 m away
The Bookmarks list of layers: Layar local search, ANWB, Brightkite, MrMovie and Tweetmondo