Hi, nice to meet you! I'm Louie and I'm a Visual and UI/UX Designer in San Francisco.
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.
