Constructing Augmented Realities with Blippbuilder

Rethinking a Creation Tool's Design Systems

My Role

I worked with a team of designers, product managers, and engineers to redesign this augmented reality editor tool. My role was to create a pattern library, UI kit, and rethink the tool’s design systems; furthermore I helped develop interaction models and reshape Blippar’s user-generated augmented reality strategy.

discovery

Blippbuilder Goals

At Blippar we have been working to bring trigger-based augmented reality creation to novice 3D users. This form of augmented reality allows businesses and individuals to build awareness and engagement around their brand through animations and interactions.  

The original Blippbuilder tool, Blippbuilder Classic, was created in Flash and that was partly the reason we needed to discontinue that product. We redesigned Blippbuilder to be intuitive, modern, and with user-requested features such as 3D. Since many of our users were novices, we wanted our product to be as simple to use as Powerpoint and often described our product as Powerpoint for augmented reality creation.

As a business we wanted users to create as much content as possible to enhance the app experience for consumers. Over the last year, we have successfully launched Blippbuilder, it now has design systems that can be scaled and common interactions used in 3D tools.

Research

After conducting an internal alpha study, we found four points of focus as to where we could make high-impact changes. We found that users mentally thought of the creation process as four steps:

1. Plan
2. Prepare Assets
3. Build and Design
4. Test and Publish

Based on these four steps we identified several areas in which the product could improve. For preparation of assets, we needed to educate users about markers/triggers; giving error messages such as “low quality” weren’t clear enough. We worked on a more informative trigger-loop, notifying users what a good trigger image is to reduce errors. In terms of building and designing, there was a lack of guidance for first time users and we needed a better onboarding experience. Naming of each feature needed to be a focus as well, the term “Library” could be overlooked, whereas “My Uploads” meant something meaningful to users. For testing and publishing, users did not click on "Test" (a necessary step before publishing), so that action was renamed "Preview".  

Across the board we found was that the UI and visual design was one of the most consistent areas in which users wanted to see a change - they wanted a friendly, intuitive, and less-intimidating interface.

Success Metrics

The business goals for Blippbuilder were to increase the amount of content that can be read by the Blippar app. With more content, the consumer experience becomes richer and thus downloads, engagement, and augmented reality experiences seen all increase. The number of trigger-based augmented realities created and active Blippbuilder users were our two primary metrics of success.

creation

Design Systems

This redesign intended to create cohesion and structure for Blippar’s creation tool, the user dashboard, and analytics dashboard. These guidelines are used by Blippar’s global engineering and design teams. Inspired by Google’s Material Design systems, I developed a systematic approach for scalability.

The goal was to create a baseline system that could evolve over time. With the cooperation of Blippar’s engineers we began using Zeplin as a conduit between design and engineering.

Features

Blippbuilder offered a set of functions: dragging widgets/buttons, upload asset library, primitive shapes, rich text, 3D shapes, animations, and motion effects. When designing for animation we considered dropping keyframes along a move path as well as within a timeline (seen below). To edit the settings of a keyframe, we initially had a pop-over interaction, but found that offering the same property inputs within a panel reduced clutter and was easier to use in testing.

Blippbuilder Analytics Dashboard

Many of our users were marketing professionals wanting to spread awareness of their brand via augmented reality. They needed to see the value of augmented reality by knowing number of experiences seen. This analytics dashboard was highly requested by our customers. I designed the visual and UI of this page with a lead interaction designer.

Project Dashboard

The Blippbuilder project dashboard houses each project an individual or group creates. Considerations for this dashboard included: ability to create a new augmented reality experience or project, sorting, viewing in list or grid form, search, help, displaying project statuses, view count, and accessing various functionality within the "more" section of a project.

results

After Launch 

Within 3 months of the Blippbuilder launch, we saw a 350% increase in our user base. This increase happened without any public relations or marketing campaigns from Blippar - only an announcement email and subsequent feature release emails. We tested with users and asked, why and how they increased their Blippbuilder usage to determine how we were being successful and how we could improve.

Learnings: The Right Place for Creation

We learned that although the interactions of Blippbuilder were easier to use, many users wanted to understand the general value of augmented reality creation. Values for creation include: sharing with others and letting others discover your creations. We learned that sharing and discovery were essential strategy components for augmented reality creation. We also learned that a portion of our user base would rather create augmented realities that are mobile, quick, and simple. These findings influenced our mobile application’s Makers Lens.

Furthermore, creating design systems and guidelines is something many small start-ups tend to overlook at the beginning, but as features evolve and scale, the design systems become essential for designers and engineers to move quickly. Now that we have a means for communicating patterns and scaling the design, we are able to make faster decisions about our strategy for augmented reality creation.

Learn More

Blippbuilder has been featured in Techcrunch, VR Focus, the SAP Blog, and Digit. 

One of my very talented design teammates, David Montero, wrote an in-depth case study about Blippbuilder, which I highly recommend. 

Design team: David Montero (UX/interaction lead) and Carina Ngai (UX lead and research).