Glance

A UI exploration for a mobile AR application

Augmented Reality Search Engine

Glance was a branding project that centered on near-future technology. Tasked to discover a brand and have that brand implemented onto an application were the main tasks.

Glance is a geolocation photo search capable application that gives you all the desired information in a quick view through the application. It takes a combination of geolocation and user interaction to progress through the information warranted.

Purpose

GLANCE was developed to ease the stress of search and to provide the next tech of capturing your surroundings. It is a system that allows users to capture the information they need at a fraction of the time in today’s market.

GLANCE is more than just a photo capturing tool; it is spearheading the way people will interact with their surroundings with
augmented reality.

Genre

Thinking of an AR application to remove search was always going to be a daunting task. I decided to pursue it to see where it would lead and what product I could create. AR has always fascinated me and this product really drew me into what AR could be vs what is out currently. There are a number of ways to gather information and this is yet another example of how to do so.

Kick off

GLANCE wasn’t always what it is today and started as a much simpler example of the product. It was initially though of as Vector, a simple geo locator that would tell you what was around you. The AR side of the design process wasn’t explored until after Vector was through phase 1, which was branding and concepting.

GLANCE evolved out of Vector into what it is now.

The Competition

To look at the product I was going to create, I needed to see what was out there already that was similar. Only a few competitors existed and none were as ambitious as this would be. One stood out as an almost clone of what was going to be developed, but stopped short only due to technical limitations.

Yelp Monocle

Yelp Monocle was an update to their already popular search feature for restaurants and services. This directly used AR and a smart phone to search the users relative area and gather key information.

This new feature would be the underlying ideal of all AR apps. Overlaying data in real time into Google Maps was the main function of how it produced what we see to
the left.

The app still exists but is burried in the Yelp Mobile App. Rarely used and cumbersome for some users, Yelp decided to not put any more resources into what isn’t a priority for them.

Google Tango

Google Tango is a discontinued venture into Google’s ARCore program. Using Google’s new AR hardware, this would allow simulated objects to be placed in the real world through a mobile platform. Phones and Tablets could display objects in the real world that the user could manipulate, however the size.

The reason Tango was discontinued was the hardware needed for it to run. Other competitors figured out a way to do the same level of augmentation with the current technology already inside their devices.

Tango was a success into building a functioning app, but failed short to use the technology already readily available. Due to its discontinuation, no further experimentation and man power was used to develop what could have been.

Our Direction

After gathering what was successful and more importantly what has field in this field, I knew what direction I needed to take. What to explore, what the iterate and what flow the users would most likely take. The system needed to be effortless and show what the user wanted
to see.

Target Audience

I needed to understand who was this going to be for and what purpose this platform would serve. To use another tool besides a search bar to get the information you wanted would be challenging. The search bar has been apart of our internet history since almost the beginning and has become a staple of internet exploring.

But what if our audience wasn’t near a computer or was in a hurry? What tools were available on the go and could be as effective? I decided to dive deeper and eventually landed on a tool that would give you the information just by looking at it.

This is where Vector and Glance were concepted.

Google Maps

Creating our audience

This is where Abby, our main persona would come in. Abby is an adventurous type and explores her city as much as possible. She loves to hang out with friends, she’s very spontaneous and she loves trying out new things.

The main focus was to help Abby get the information she wanted quickly and on the go. Using AR to help with that was the ultimately direction to take.

Likes

  • New adventures
  • The city
  • Quick and easy
  • Not tech heavy
  • Social media

Dislikes

  • Too much reading
  • Slow speed
  • Too many clicks
  • Not getting what she wants

Main user goals

For our main audience, we needed to define what exactly they would be doing with the our app that others apps are complicating. Here are some of the main user flows that they will be tackling:

Finding a restaurant

  • Get phone
  • Open phone
  • Open app
  • Point towards street
  • Click on restaurant

What’s near me

  • Get phone
  • Open phone
  • Open app
  • Switch to map view

Viewing pictures

  • Get phone
  • Open phone
  • Open app
  • Point towards street
  • Click on restaurant
  • Click photos
  • Click interior

Showing a review and writing one

  • Get phone
  • Open phone
  • Open app
  • Switch to map view
  • Click on business
  • Write a review CTA
  • Write review
  • Add photos (optional)
  • Give rating
  • Submit

The name

We looked at a number of names and slogans to begin with. This is quite difficult these days with such a saturated field, but we happily found one that suited our goals and personality.

Naming grid

I took words that described the main idea behind the app and did a process of elimination. On step 6, I didn’t think Glimpse was the right word here, but found a proper synonym that made a home run.

The logo

Glance has a unique letter in its name and its the G. I wanted to go with a letter mark that would be modern, simple, and had a form of layering that our app would do in the backend.

First pass

Every logo starts with basic shapes. After quickly iterating some directions with a pencil and pad, I transferred the 4 contenders into a vector format.

Inspiration

Before deciding on the final, I found some inspiration with these logos and mixed them into my design approach.

Final logo

I took the deciding approach and expanded it the modern look we have now.

From A to B

After the wireframes were created, I loaded them up as images into a prototype application. I tested it against 8 users.

Main flow

This is the main user flow of the application. To see the reviews of a business you are curious about and need to know if its worth your time and money.

Second flow

This is the flow to add a photo of a business.

Feedback

After the initial testing, I gathered some of the pain points of the mockups and updated the UI for better performance.

Too much businesses

What happens when there is too much business on the screen?

Solution

We decided that filtering would be the best course here. No matter how the user interacts with the Active View, there will be a filter applied. Where it be restaurants, hotels, cafe’s or pet grooming, a filter will be applied.

From there, a secondary filter applied if they want to view reviews, cost or distance. This gives rather a bombardment of information, but a digestible form where the user can decide how far they want to go in terms of information.

Plus sign

What’s that plus sign above the photo gallery?

Solution

The Call-to-Action for the user to add their own set of photos wasn’t prominent enough. We redesigned the CTA to be more apparent and with a text addition that animates outward for new users.

Once the CTA is clicked, the camera opens and we can add a regular photo, 3D photo or 3D object into the users own album. The collection can then be converted to a GLANCE hotspot where users can view the restaurant in 3D and be more immersed in their curiosity.

Map view filtering

Can we get a better filter system for the map view?

Solution

The initial map has a clutter fault and internally we didn’t feel it met expectations of a 3D capable app. We adopted to a filtered view with zoom, dive and the traditional flat-plane map view when needed.

We also limited the scope of the search to a min 5-min walk from the user. This can be changed to a number of various filter categories from vehicles and other time contraints.

High fidelity mockups

After user testing was completed, it was time to turn the low-fi into high-fidelity mock ups that we can present. This is where additional polishing and additional feedback were tested.

Main user flow: Homepage, detail tab, & review

Take a shot: Photo mode, camera view, add photo

Additional features

After user testing was completed, it was time to turn the low-fi into high-fidelity mock ups that we can present. This is where additional polishing and additional feedback were tested.

Hot Spots

GLANCE Hotspots are designated locations in a business where a user has shared their 3D photo. Another user can view the spot they stood and view what was captured at that time.

We limit the Hotspots, depending on popularity of a business and view counts so not too many Hotspots are available.

Objects

GLANCE Objects are 3D rendered captures that you can take of anything. Food, Cars, Chairs; you think it, it can be captured in a 3D space. Other users can view these objects and see how they would seem in front of them.

This is a feature set for v2.0.

Advertising space

Glance has a wide array of large scale advertising space. While in the app, viewers can see some of their favorite buildings have a piece of advertisement on them. As well as ad space, there could be floating digital blimpse, surprise pop ups from the real world, and many other embellishments they may see.

In conclusion

Glance was an approach into an AR application that I never applied for. Designing for a three dimensional space is vastly different than a 2D application. There are so many factors to think of when a third dimension comes into play.

What I would change

I would go back into more user objectives while testing. At the end of the project, I wish I had more data on the features aspect of the application, like the 3D objects or ad space. I would like to see if the user see’s any benefit from those or if there even is an interest.

Secondly, I would’ve liked to measure more on timing with the testing. How long a user got to a page or a review would have been a great data point to capture.

Last words

I am happy where Glance ended. The short term project was a success and a conceptual AR application could totally be feasible in today’s market. The user’s I tested had a positive outlook on future updates and I would like to see more progression in its development as well.

Glance will be evolving when I have additional time and could enter a more social media aspect. Sharing your interest and current status was never greatly considered, but I am curious to seeing it more developed.

Glance, as deep as an ocean, as vast as you want it to be.