Blippbuilder AR Editor

augmented reality AR ux Interaction design SAAS

The Setup

I was transferred from Amsterdam to San Francisco to set up a small design team to reimagine Blippar’s AR editor, Blippbuilder.

This was a great opportunity to rethink the meaning of AR creation, in the previous 2 years the industry had evolved moving from agency based creation to a more open approach, it was time to redefine our strategy.

We dramatically simplified the user experience, focusing on most common flows and speed of execution, hiding and automating complexity to suit a vast majority of audiences.

The Problem

Blippar had made itself a household name of providing engaging AR experiences for branding and marketing purposes, these were the result of both in-house bespoke and partnering agencies’ work. Still, the amount of content available was very limited, compromising daily usage and user retention of the Blippar app.

The Goal

Our goal was radically increasing the amount of AR content available to be consumed with the Blippar app while keeping the high-quality experiences expected from Blippar by designing a tool that would enable non-tech savvy people to create advanced 3D experiences and animations with as little friction as possible.

My Role

I was personally in charge of delivering a UX vision, along with a plan for evolutionary, iterative updates, that actualized the larger goal over time. On the production side, I led the interaction design for the editor’s general framework, 3D manipulation, scene storyline and animation timelines.

Strategic View: Fitting in Blippar's Ecosystem

After the acquisition of Layar in 2014 Blippar counted in its portfolio with 3 AR creation tools: Layar Creator, a low-entry AR editor; Blippbuilder Classic a Flash-based tool targeted to partner agencies; and the Blippbasic scripting language.

Discovery Phase

Grounding Research

In order to better understand our prospective users and their needs I organized a series of one to one interviews with existing Layar Creator and Blippbuilder Classic users, Blippar Account Managers, Blippar Partner Agencies, AR Developers and our Client Success team

From these conversations, I elaborated a set of target personas based on both existing and desired users and business goals. These user archetypes' set goals and pains will inform our feature decisions and prioritization moving forward.

Building the Builder

Sprint 0

We ran a series of ideation workshops with stakeholders: business, product management, and engineering, from these we listed out our basic feature set and a list of critical assumptions, this decided on the strategy to follow as a series of incremental releases, each one of them informing the decisions to make for the next.

Early Designs

Design Approach

Our first goal would be designing the main framework, this must be flexible to accommodate our final vision, we will then grow it from there tackling the design workflow by workflow and validating our next steps on each iteration adjusting the roadmap if needed along the development cycle.

The Design Sprint

In order to keep a constant feedback loop between design and engineering we came up with a 2-week sprint for the design team, anticipating engineering’s:

In the first week of our sprint we would present our concepts to engineering to get feedback, likewise they would run a demo of their current sprint to get feedback from design, in our second week we would work on getting the documentation and assets ready to be picked up in their next sprint.

Testing the MVP

To get feedback as soon as possible we developed an MVP with the basic feature set needed to build an AR experience, to minimize building time we bootstrapped with a Material Design library and opted for a design style as neutral as possible, preferring a light color palette which felt lighter, friendlier and easier to use.

My teammate Carina Ngai designed and led an internal alpha testing program, running moderated testing sessions in each one of our office locations around the globe, Amsterdam, Austin, Delhi, London, San Francisco, and New York.

Following the alpha testing program, the beta version was released for internal users and partner agencies.

The feedback received during these testing programs was incorporated in the public release and later iterations.

A new, simplified Blippbuilder

Drag, drop... done

The most basic feature for the creation tool inherited directly from our learnings with Layar Creator, this feature makes edition extremely simple and supports the creation from two different angles:

● Action first: this is the lowest friction flow, a set of widgets in the library contain an associated media action that can be easily configured from the properties panel allowing a certain degree of customization.

● Visual first: designed for higher control to suit the creative workflow, this allows the upload of visual assets to assign them one of the available media actions.

3D World

2D/3D Switch

The default view for the editor is 2D, however by clicking on the 3D switch a new set of tools is made available on the stage and properties panel.

Object manipulation

The transition between 2D and 3D modes must be seamless, this not only applies to the UI and set of tools, it is expected to be able to interact with the design's objects in the same way in both modes.

We intend to translate as close as possible the behavior of the 2D object manipulator to 3D mode, multiple of concepts were explored and countless hours spent discussing the technical challenges of each one of them, the task proved to be extremely challenging.

As our deadline got closer we had to compromise and opt for a more standard translate/scale/rotate switch for the initial release while continuing prototyping and testing different options.

3D Assets

Not everybody is a skilled 3D artist or has one in-house, we offer two ways to enable people without such skills to create interesting 3D experiences:

● The tool includes a library of basic shapes and 3D models, easily customizable by applying a texture image or changing its color.

● We facilitate the use of already available 3D assets by supporting well known 3D formats and including a conversion tool to our proprietary BB3 format, optimized for performance in any type of devices.

Animations

Animation Presets

The core philosophy of creating an AR experience by dropping self-contained units of functionality onto the canvas is also reflected in the approach taken with the animation timeline.

Different types of animations can be selected from the preset menu and dragged it onto the timeline where the start and end time, duration and specific settings can be tweaked.

Initially, 6 animation presets have been designed: Move, Rotate, Scale, Pulse, Color and Bounce.

Hidden keyframe management

Animation concepts such as keyframes feel trivial to motion designers but can be daunting to other type of creators, the animation preset approach hides the concept of keyframes from the user, in addition, easing and tweening is taken care of automatically and the user can edit the path of movement directly from the canvas.

Scenes

AR experiences can be very complex, from interactive storytelling to replicating the functionality of a mini app, with the introduction of scenes we aim to simplify the flow of creating an experience with a relatively complex logic by automating and offering default actions that cover the vast majority of creation cases.

Scene creation

A scene needs an entry point, creating a scene without the linking trigger would lead to ‘orphan scenes’ that are impossible to access.

Scene creation has been designed as yet another widget/action: assigning the Go to scene action to a visual asset will create and link parent and child scenes automatically.

Inherit from parent scene

More than 2/3 of the use cases for a scene consist on introducing a slight modification from the previous one. To support this case, when a scene is created the user is offered to copy the content from the parent scene so all that’s left to do now is tweaking it with the proper modifications, this feature dramatically speeds up the creation process.

Storyboard view

Usually, at the beginning of a project, the creative team draws a storyboard describing the behavior into scenes before this is brought to the developers.

With the storyboard view, we want to provide an overview of the AR experience’s logic, as well as a simple and straightforward way to deal with scene creation and linking.