Ingenious logo
Augmented reality at Museu de Mataró linking to Catalan Wikipedia
Augmented reality at Museu de Mataró linking to Catalan Wikipedia

As a product design agency at Ingenious, we are used to dealing with new technology trends and the design challenges they propose. Augmented reality is not the exception. We have been using augmented reality (AR) for some years now always in the context of a card, a book or anything that the user can get her cell phone camera close to. You all have seen this kind of solution where a 3D model or animation pops out of a picture and begins some interaction with the user.

Design challenges in this cases are related to the content and how to make the experience more memorable.

Some months ago Uruguay Social Security Bank (BPS) a governmental entity asked us to implement a prototype for an idea resulting of an internal innovation challenge. The idea is to augment the inside signs to better explain the different services you can request from each counter, the documentation needed and if they can do it online or not. Today, people make long queues to realize that they are in the wrong place or they are missing some documentation.

We took the challenge without even realizing it was fundamentally different to anything we have done before.

Signs are meant to be read at different distances while usual AR solutions have a distance range to be used.

The usual approach resulted that, in our first prototypes of this solution, we had several discussions about the size of the fonts, how close could the user get to the sign and if we should ask him to take some steps back to enjoy the experience. There were talks about putting painted areas on the floor and other far-fetched interventions to the signs or space around it until we conclude:

When working with variable distances you cannot anchor the information to the marker.

This means that whatever appears out of the signs must not keep their position relative to the marker (the sign), but to the screen. This new strategy solves the problem of scale and offers the same experience to every user regardless of where they are standing, but it’s the same effect a simple QR code displaying a web page could achieve. There is no use of the real-world sign position, and therefore, it is not AR.

Our solution introduced us a new challenge, how can we use the real world position of UI elements to make a more impressive experience. We came out with three ideas that could help you to work with signs and AR.

Development preview.
Development preview.

1. Keep the live video feed underneath the UI

For this, we needed to blur it so it would not generate visual competition with the elements of the UI. We do this gradually, using more blur as the user finds more detailed information.

Development preview.
Development preview.

2. Add a stage

We created a 3D stage that holds the items anchored to the screen and distracts the attention out of the original sign. The scene creates a new context that helps ease the artificiality of 3D objects, allows new elements such as characters and animations to win back some of the marvel lost with the change.

Development preview.
Development preview.

3. Use the original position to rotate elements in the UI.

To keep AR elements in the app the UI needs to react to camera changes, the least disruptive way to the reading experience are small changes to the UI rotation. If the user lowers his phone, resting his arms, the effect will interpolate to the best viewpoint to provide a comfortable reading.

Prototype presentation.
Prototype presentation.

The three ideas combined resulted in an AR feeling without forcing the user to stand at a certain distance to be able to learn about the services, fulfilling both the spectacular and informational requirements of the solution.

The resulting prototype provided BPS with an implementation of the original idea that they can now test with their users.

Hope to see these strategies in other AR solutions!

Are you looking for a passionate team that can help you envision, design, and build amazing products? Use the link 👇 to schedule a call.

Weaving handSchedule a call