Spatial Canvas

Ar social media • MObile

Overview

Background
Spatial Canvas is an augmented reality API that allows users to create augmented reality applications. Due to the rise in popularity of AR applications in recent years, Spatial Canvas decided to try their hand at a novel social media app that allows users to post content anchored in space.
Challenge
Our team was tasked with producing an augmented reality social media app on top of Spatial Canvas’ existing app “Taggr,” which allows user to post GIFs in space.
Role
I co-led this project and worked with a team of three other designers to conduct research, create low and high fidelity mockups, and a prototype.

Research

SOCIAL MEDIA IN AR
To create a social media app in augmented reality, we needed to understand how social media platforms work and how they could best be translated into augmented reality. Because AR is inherently location-based, since it depends on the existing environment to function, posts wouldn't appear in a feed like other social media apps, but would rather be tagged to physical locations in space. Users could then interact with these posts by walking up to them.
Social Media Feed
Location-locked Posts
Our team used the Hooked Model to brainstorm ideal habit loops to engage return users. Similar to other social media apps, Taggr would draw users by providing a series of rewards such as a feeling of belonging, social validation (likes), and variable rewards to keep users coming back. Learning from other apps, we found that the major triggers for social media are notifications, boredom, and missing a feeling of belonging.
building on TAGGR
Taggr is an app created by Spatial Canvas that allows users to post GIFs in space. These posts are anchored to their location, and can be viewed and accessed by anyone else in the space with the Taggr app. Each space is opened by scanning an anchor point, and allows the user to place and view content in the area around it. This was a very barebones version of the app, only allowing the creation of spaces and placing GIFs.
Usability testing
From here, we had our starting point: an AR GIF-posting app, and our end goal: an AR social media app. In order to understand how users would actually adapt to social media in augmented reality, our team decided to conduct a social experiment and usability testing on 7 users using the existing version of Taggr.

These users shared a common space, and we asked them to post daily in this space knowing that only the other people in the testing group would be able to see their posts. We simulated notifications by messaging them periodically, and encouraged them to post GIFs that they thought were funny. After one week, we conducted user interviews with the participants to learn their habits, what could be improved, and what the ideal use cases for the app were.
Key takeaways
Users adapted to location-based social media fairly quickly, posting GIFs in places that they thought were humorous, in response to other posts, and throughout the space, suggesting that they could naturally adapt to social media in AR. Some takeaways from our user interviews were:
  • 6/7 users opened the app when they received notifications
  • 6/7 wanted greater control over placement and size of GIFs
  • 5/7 users wanted to know who posted content and to like or comment
  • 5/7 users were interested in using with friends or in groups with friends
Additionally, other people in the common space became very curious about the posts that they didn't have access to, thus showing that our "fear of missing out" trigger was working, even in within the scope of our user study.
Users were naturally able to adapt their familiarity with feed-based social media to location-based posts in Taggr, and even expressed a desire for additional social media functionality.

Branding

Inspiration
Before creating a logo, Spatial Canvas and our team came up with a list of adjectives that Taggr should represent through its branding:
  • Intuitive/Simple
  • Creative
  • Fun
  • Rebellious
Colors
The goal was to create a blank canvas with which users could create content in whatever way they pleased, so we decided to go with a cool-toned analogous color scheme that was colorful but desaturated enough that it wouldn't compete with content posted in the app.
For the main branding of the app, we decided to create soft gradients to compliment the clean and modern look. Below are a few of the explorations we did in deciding the ideal color.
Splash screen & app icon
Taggr was heavily inspired by the street artist community, and the CEO of Spatial Canvas wanted to pay homage to them through the logo. The stenciled letters are reminiscent of the lettering by street artists such as Banksy. Ultimately, working together with Spatial Canvas, we settled on a blue-purple gradient for the brand.

Design

Iterative DESIGN: IDEATION
Throughout the course of this project, Taggr was updated and new functionality was added every few weeks. By staying in constant contact with the both the CEO and engineering team of Spatial Canvas, I was able to gain an understanding of the business and engineering constraints of the app, and design the user experience while keeping future functionality in mind. This meant that our design process was constantly shifting and iterating, and we provided multiple rounds of sketches and ideas to the client before we moved to the low-fidelity stage.
Information Architecture
Analyzing the structure of several different social media apps, we quickly realized that there were a lot of different flows that needed to be designed. From posting and viewing content, to profiles views and editing, to viewing and setting up spaces, we had to organize the information architecture in a way that made sense and provided and a smooth user experience. While sketching ideas on paper, we mapped out our flows on whiteboards.
We incorporated the most important portions of social media as well as what we learned from the results from our usability testing to create several different flows. With regular updates to the app and plans for future functionality, these were expanded significantly, but we eventually consolidated our flows into a digital version on Realtime Board that covered all of our bases.
Content types
Collaborating with the CEO of Spatial Canvas, we decided that users would be able to place 5 different types of content in space using the Taggr app.
WireframEs
With an information architecture and a general direction in place, our team moved on to low fidelity wireframes. Here, we made several important design decisions including creating a posting wheel which allows users to select from the 5 different types of content to post. With regular feedback from the client and updates, combined with simple comprehension tests, we made changes including removing the AR focus square and making the notifications icon more obvious.
HIGH FIDELITY MOCKUPS
Using feedback from the engineers and information about the future functionality of Taggr, we iterated on our wireframes to create high-fidelity mockups for the entire app. Below are a few example flows in the social media version of Taggr.
Scanning a space
Before a user can access a space, they must scan it to detect walls, floors, and furniture to accurately place assets within it. Then, the user creates an anchor, which is used to access the space in the future.
PROFILE & ACCOUNT SETTINGS
From the main explore page, the profile button reveals a side menu with options to go to account settings, view and edit the profile, and leave the current space.
CREATING A POST
To post a photo, the user chooses the photo icon from the posting wheel. Then, they can either select an image from their camera roll, or take a new photo with the in-app camera. Then, they can crop the photo if they choose and write a caption before placing it in the space around them. Spatial Canvas's API allows users to pinch and zoom to change the size of content before placing it at a desired location.
VIEWING A POST
To view other people's posts in the space, the user simply taps on content nearby them that is glowing (meaning it is within range). This opens the post, and they are able to view or listen to the content, as well as like, comment, and view others' comments on the post.

Results

Words from the client
"Abhas is a talented designer who was an absolute joy to work with on our augmented reality beta product. He is an idea generation machine and his passion and intuition about spatial UX design was valuable. His greatest strengths lie in user-focused research and his meticulous detail-oriented approach to the design process in general. Abhas was patient, flexible, and enthusiastic during a time when our product was undergoing frequent changes in direction and strategy.

Above all, Abhas is kind, fun, and a true team player. His natural enthusiasm and energy is like a glue that can keep teams together during difficult times, and he would be a valuable addition to any team - particularly if they have a focus on augmented reality and/or gaming. I’d recommend him to any company lucky enough to recognize that he is a rising star in the design field."
—Michael Park
Next steps
As Taggr is being updated monthly, features from our mockups are being added to the app continuously. Features such as multimedia content and content resizing will be integrated during Summer 2018, and Spatial Canvas plans to release a beta version of the social media app by late 2018.
LESSONS LEARNED
This project taught to me to work on iterative designs with cross-functional teams. Similar to most mobile apps, the regular addition of new features and improvement of existing features in Taggr created for a highly iterative design process. Cross-functional collaboration was essential, making sure all stakeholders stayed actively involved in the design, and helped our team to get a solid understanding of the what was possible and where the design was headed.

I also realized that I am incredibly passionate about augmented reality. It is truly the technology of the future, and designing for mobile AR is a market that could potentially create a huge impact on the world. I greatly enjoyed the challenges and excitement involved with designing for such emerging technology, as designing for this immersive experience requires a different level of UX design thinking.