Transmira

Role

Lead UI/UX Designer

Timeline

December 2018 to
June 2019

Result

Connected web and mobile prototypes with logic diagrams and user flows.

Ideation

Working towards a goal

The goal of the project was to create not only an immersive AR experience for users, but also a functional web platform capable of managing it. A two pronged approach, with visuals being the primary focus of the former, and system architecture the latter.

Understanding the Problem

Improving frontend and user experience

The user interface was fairly simple from a design perspective, only requiring the ability to find objects via a camera, and "collect" them in your inventory. Each object would have an attached QR code which could be used to redeem the corresponding code.

The management system was the opposite, requiring extensive research, ideation, and problem solving to create a system that made campaign management easy through automation, randomization, and a set of definitions for advertisement campaigns that would drive sales.

Inventory Interface

I created a clean, sleek user inventory to house items collected in AR on the mobile application, with customizable color sets for a more immersive and branded experience. Each object would inherit the brand colors of the sponsor company, which could be selected in the later mentioned administrator web platform.

Collecting Objects in AR

The object collection functionality was one of the most intensive backend tasks for the team, but the design was fairly simple. Objects were created on the web platform in a variety of different ways, and existed at a specific latitude and longitude on the map. Visible on the user application via the camera, users could find and collect these objects in the real world, adding them to their inventory.

Defining Key Concepts

To begin the creation of the web platform, it was important to first understand the conceptual architecture of the system. To do so, I began by defining basic concepts and creating a comprehensive object hierarchy that would set the stage for further design.

Creating Base Objects - Items

Items are the lowest level of the ladder, and are just a 3D image with a name. They have little to no properties besides this.

To ensure that assets were reusable in multiple campaigns, we came to the conclusion that it would be best to instantiate them when assigning them properties, preserving the core asset for reuse.

Defining Object Properties - Offers

Offers are the second level of the hierarchy, and act as assignable property sets for each object. Every offer has a set of properties, that when assigned to an object, allow that object to be redeemed for a real-world thing, be that money, a product, a service, or something entirely different.

Offers act as a middleman between objects and advertising campaigns.

Creating Groups of Items - Campaigns

In order to push these concepts out to users, we created advertising campaigns, consisting of one or more objects instances, each with a single attached offer.

These campaigns would be set up on a per-client basis, and would be the starting point for populating the AR space with collectible items.

Automating the Process - Generators

Generators were the solution to scale. If every object had to be manually placed by the administrator creating a Campaign, the process would be almost impossible to make efficient as more and more campaigns were created.

This tool acted as a simple circle on a map with a customizable radius, which would spawn objects at an inputted frequency inside the radius of the defined circle.

Visualizing the Data

One of the core principles of the web application was its ability to meaningfully display metrics that tracked the success of advertising campaigns and the actions taken by participating users.

I built a host of data dashboards to visualize those metrics with widget based displays allowing for future dashboard customization.

Performance at Scale

While there are many ways to run a single campaign, one of the primary concerns of the Transmira team was the ability to simultaneously manage multiple campaigns across the globe.

I created multiple live map views and campaign displays to allow for management at scale.

Customized Map Interface

To begin the creation of the web platform, it was important to first understand the conceptual architecture of the system. To do so, I began by defining basic concepts and creating a comprehensive object hierarchy that would set the stage for further design.

Realizing Automation

In order to generate objects consistently across a set radius, I created a system that would allow for the placement of individual generators, alongside interfaces for customizing each generator on a case by case basis.