Designing and Developing Outta — An Augmented Reality App

A case study on building and launching a consumer AR mobile app

Kevin Flores
ART + marketing
10 min readMar 24, 2017

--

Us: Wouldn’t it be cool if people could post messages around the real world, but virtually?

People: You mean like comments?

Us: Yea, they could be comments, but also stickers and photos.

People: You mean like Snapchat or iMessage?

Us: Yea… but this is different, this is using live augmented reality — you can put stickers, text, animated GIFs and photos on things at places in the real world. And then others can see them when they view the virtual spaces in the app.

People: Oh, augmented reality…. like Pokémon Go*?

Us: Sigh, yea, but these are virtual 360° spaces that you create and add things to - they can be seen by everyone or maybe just your friends… kind of like a virtual graffiti wall that others can write on, too.

People: OK, sounds cool, but why would I do it?

Us: Well, if you wanted to express yourself or make a statement at a particular place — like leaving your photo to say “I was here!” at a cool landmark, or sharing what you think about a restaurant or trolling your friends with a GIF at school.

People: OK… I’m not sure I’d do any of those things.

The above wasn’t an actual conversation, and I promise not the way that we conducted qualitative interviews. It represents what it was like to get iterative feedback for an app that we launched in 2016 called Outta.

* For the record, we launched Outta before Pokémon Go’s debut in July. 😜

Why did we create Outta?

Outta started out as an R&D project to immerse our innovation team in the augmented reality (AR) space. We shaped what we learned into a consumer product that we thought might get traction.

We don’t know this guy, but we also did this a lot. via Giphy

Virtual reality, augmented reality and mixed reality were experiencing a surge of interest in 2016. There was buzz around VR headsets like Oculus Rift and HTC Vive, announcements about Tango-enabled phones and excitement around the inexpensive Google Cardboard. There were teasers of VR games on the horizon, including the aforementioned Pokémon Go.

After deciding to poke around in this area, we began researching VR and AR capabilities and running design experiments. We set out to develop something that could be experienced with regular smartphones — we didn’t want to build or require custom hardware. And we had a timeline of 4–6 months to develop and launch an experimental product.

We set out with a general mission:

Getting started

We brainstormed potential ideas and a few kept floating to the top:

  • Friends can collaborate by decorating private virtual rooms that are accessed via secret visual keys (1-to-1 experiences are hard to scale)
  • The geocaching community might enjoy scavenger hunts of virtual objects/experiences in the real world (competition in gaming is fierce)
  • Creatives can express themselves by posting messages and art in a “subversive” layer over the physical world (limitless layers of virtual graffiti tagging sounded “edgy” and “fun”)
  • Students or travelers can learn about places via geo-triggered informational experiences (*yawn*)
  • Businesses can give deals to customers via augmented reality in physical stores (e-commerce and biz dev is hard)
  • Entertainers can distribute content in a cool way, such as a pop singer dropping her latest single digitally in Central Park (content deals are complicated)

These were all potential opportunities, but nothing was a significant problem to solve. Could we flip the framing on any of them?

We roughed out personas for the use cases and settled on a demographic and behavioral type attracted to fun, social apps— college-aged (or younger) heavy social network users. Of course, this is every social network’s target. It placed Outta in the same bucket of apps competing for user attention: messaging, Instagram and Snapchat.

What we learned: We had taken the easy route. Perhaps we shouldn’t have readily dismissed some of the ideas. They likely would have been easier to test with clearer use cases and more refined target audiences. Also, only a few of them had plausible monetization strategies.

Design Process

Initial Outta app paper prototype by Sandi

At the time, our UX Design team was building up the practice of getting fast feedback early in the product lifecycle by using click-throughs and paper prototypes.

We continued the practice of iterative design and feedback in our version of design sprints throughout the development of Outta.

Outta app 1.0 wireframes

Brand

We made a conscious decision to be playful as we knew we weren’t going to build a sophisticated technological solution in our target timeline. And, for our target users, we wanted to lean towards the “cute” and “fun” end of the spectrum.

After drudging through brand and name exercises — we landed on Outta — which sounded both slang-y (Get outta here) and gave us a little bit of wordplay (outta space). This provided a theme for the visuals and the Outta Bot mascot.

What we learned: By spending as much time in low-fidelity mockups and prototypes early on, we were able to do more experiments and pinpoint areas of delight for users. This also gave our developers time to ramp up on AR technologies and build a solid foundation before getting into detailed UI implementation.

Technology Path

We started by experimenting with Unity and the open-source AR Toolkit to place animated images in a 360° view with the camera open. I can’t tell you how exciting if was to see a jumping monkey in our app for the first time! 😂

While location and map views would be the primary method for discovering our virtual spaces, we wanted it to be fun to find and open them. This became an opportunity for a delightful, or at least rewarding, interaction.

When users created a space, they would take a photo that would serve as a reference of where the space was (if an obvious photo) or it could be fun to find (if a more obscure photo). The space would be unlocked when another user matched the photo with their camera view in the app.

Early Outta app prototype of photo match to unlock augmented space

What we learned: Even though we decided to develop for only one mobile platform until we proved value, we were still challenged to code in areas for which we had no experience. We eventually needed to add experts with Unity and location-based service experience to help improve performance and reduce battery drain.

Launch, Learn, Repeat

“If you are not embarrassed by the first version of your product, you’ve launched too late.” — Reid Hoffman

We definitely waved that flag! Our 1.0 was very limited — it allowed users to place stickers and filters in virtual spaces from a small library that we created — a few emojis, graffiti tags, 3D animated characters and filters.

Outta 1.0 App Screens

But, we were prepared to do the agile thing! We were gathering iterative user feedback and using it to prioritize our roadmap of features. One thing that was obvious from using the app ourselves and that we heard from user interviews is that the app needed more creation tools. Yay! Build more!

Everyone loved that we added GIF support by integrating Giphy. No one seemed to care that we added photo upload and camera support. 😑

Interaction design to add different content types accessible from minimal UI

One thing worth a mention — we were accumulating design and technical debt with each subsequent release. When executing usability tests, fielding comments from internal stakeholders and even suggestions from our own team members — we had to embarrassingly acknowledge shortcuts and compromises made. Excuses were easy to come by: short timelines set by product management, inconsistent UI design when new features were added, and technical shortcuts taken by engineering.

What we learned: We could have used more design cleanup and engineering refactor sprints. In any case, releasing nearly 20 updates of new features and bug fixes, we were still chasing a unicorn. We were 50/50 on delivering what people actually wanted, regardless of what they said they wanted.

App Engagement

We knew that any app experience that had a message-like component also needed a viral loop. We didn’t skimp in either thinking about this or experimenting with features to promote social sharing. Initially, we thought that sharing a photo of the augmented space (i.e. a photo with a sticker, text or filter on it) defeated the purpose of the receiver experiencing the “live” 360° space. But, users were not sharing links or inviting friends to use the app.

So, we gave in a little, allowing users to share small photo thumbnails of the augmented space. And then gave in a little more, allowing users to share small video clips of the augmented space. And then, before you know it, there was no reason for receivers to download Outta and we were very similar to that other popular photo and video sharing app. 🤔

Marketing

With a foundation of find virtual spaces around you, we created our own hurdle: growth and discovery heavily depended on geographically dense usage — a co-location constraint.

So, we decided to blitz a few college campuses:

  1. Our team seeded virtual spaces to be discovered throughout the campuses and nearby popular coffeeshops and restaurants
  2. We hired street team marketers to promote the app by handing out snacks and stickers
Our 2nd Outta App sticker design printed by the awesome Sticker Mule

Concurrently, we executed a broader strategy running App Install ads on Facebook and Instagram. We experimented with about a dozen different creatives that attempted to portray the AR experience in static and carousel image formats. Despite decent relevance scores, we didn’t see good conversion. However, once we decided to try out short videos ads, our conversions jumped and our cost per install dropped significantly from $3.80 to $0.60! 👏🏼

“Bust out the teacher” animated ad for Facebook and Instagram

It was also pretty cool to see a tiny spike in interest when Outta was featured on Product Hunt.

Not deterred by our mediocre social sharing and retention numbers, the fact that users WERE downloading the app and creating spaces around the world was encouraging!

Over 30K Outta virtual spaces created worldwide

What we learned: Video ads are slightly more effort to create, but resulted in much better engagement for us. However, our marketing showed what that app allowed users to do and how, but not why — especially after using the app once. We needed to really dig into how to get users to share more and come back to the app.

We continued looking at metrics and user behaviors for insights we could use to increase engagement and retention.

Where were our users? How many spaces were they creating? How many spaces were being viewed? What were users putting in their spaces? Were any patterns emerging?

Outta 2.0 Pivot

Metrics of what users were doing led us to another round of qualitative user research. The idea of seeing and experiencing places far away from them — especially around the world — resonated with interview subjects. And, for the most part, users still found the experience of dynamic media in the spaces fun.

Mockup of a “virtual space” with pre-stitched photos and stickers that we viewed in Mobile VR Station to test how it “felt”.

This sounded more like virtual reality than augmented reality to us. As such, we mocked up what it might look like and tested it in a VR viewer app to see how it felt. Different, but still interesting.

We decided to go all-in and built a way for users to capture images that would be stitched together as a panoramic background before placing stickers, messages, GIFs and other media in their virtual space. We removed the requirement to be at a physical location to view a space and we removed the image match unlock experience because it was no longer relevant for a remote viewing experience.

Outta 2.0 — Remote viewable augmented spaces

Conclusion

The app is now a hybrid of panorama viewer with an animated sticker, text GIF, photo and filter experience. While not a significant technical change, it does change the identity of the app. It has moved farther from its augmented reality roots. Is this a good thing? We’re not sure, yet.

Throughout product iterations and continuous rounds of qualitative user research, we keep hearing “This is pretty cool!”.

We’re excited to test the new features and see if we can leverage the enthusiasm to grow an engaged user base.

If you liked this post, please ♥️ to recommend!

Update: And then Snapchat launched world lenses at the same time that Facebook announced its augmented reality camera effects developer platform… so we shut down Outta. But, the codebase may live on in another application!

Many thanks to members of the Outta team: Devin (Product); Rob, Maryam, Sandi, Sean (UX, Design and Research); Srivatsan, Chetan, Dakota, Qing, Basant, Eric, Bart (Engineering).

--

--

Kevin Flores
ART + marketing

Product and Design Leader. Thoughts are my own. Co-Author of the Design Career Handbook → DesignCareerHandbook.com