Augmented Reality (AR) City

UI/UX Design | 2018

What's AR City?
AR City is an Augmented Reality mobile application. It combines the street view with a live feed from your phone’s camera to overlay walking directions on top of reality. It gives you instant information on historical places, restaurants, and festivals near you.

Problems

  • Lack of AR apps providing useful information about interesting locations, yet not very famous in big cities, historical places and landmarks
  • Not so many apps with strong AR features and a friendly interface
  • Current AR city apps are more focused on providing navigation than information

Challenge

AR City was a personal challenge. And as a tech lover, I was really excited to challenge myself by designing a mobile app with Augmented Reality feature.

Why AR?

  • AR is about to radically change the way we see the world around us as well as users' expectation from their mobile apps and smart wearables.
  • It is one of the fastest growing and popular technologies, that is predicted to gain market value of $120 billion by 2020 (AR Market Value.)

Company

A side project 

My Role

​​UX designer 

Timeline

Fall 2018

Industry

Travel,Tourism, AR

User Research

Conceptual Models

one of the most challenging parts of this project was to learn about users' conceptual model about an Augmented Reality app. Although, AR is growing so fast there are still so many people that have never tried an AR app themselves, before. So, it was critical to learn about users' conceptual model.

Survey Highlights

To gain a better understanding of my target audience I initially created an online survey. Specific questions asked to figure out the essential features and content to include in the app. 

Key Findings

  • Since most of the users haven’t used an AR app before, the app should have a simple design and be learnable.
  • Users prefer using the AR app in their mobile device

Total of 13 Users

What device do you prefer to use for your AR app? 

Have you ever used an AR app before?

 
 

Ideate

Persona

I love making personas since they are a great motivation for me during the whole design process and remind me of things I need to take to account. So, after implementing user research and an online survey, I have summarized my user's goals, needs, and current pain points into a Persona.
Screen Shot 2019-05-19 at 10.47.17 AM_ed
Albi , 31 
Explorer & Traveller
Manhattan, NY

"As an explorer who loves traveling everywhere, getting quick tips about interesting places near me would be very enjoyable and a big help.”

Goals

  • Get a general overview of wherever I am in the city and find locations without struggling with google map for minutes
  • Be tuned on the restaurants, bars and coffee places near my house
  • Get quick and accurate hints from interesting places around me
  •  Ability to bookmark a place to visit in the future
  • Ability to filter my search for a specific category of places only ( for example Historical places only)

Pain Points

  • Apps with confusing and unnecessary information
  • Apps don’t have a user-friendly interface
  • Spending too much time on google map, trying to figure out the name of places and their exact location
  • Feeling uncomfortable and confused in busy places with many stores and attractions

User Journey

         Mmm.....Where can I find a historical place to visit nearby?! Somewhere close and nice. 

1

         Well! Let me use AR City to get some suggestions from.

2

         Wow! Look at the results. Let's explore with more details.

3

         Yess! I think this is it. It has a high review and is only 0.5 miles away.

4

Information Architecture

From the Research and Ideation sessions, I have narrowed down the tasks that a user might want to use AR City App to do. And here is the summary of it:

Usability Testing

Users' Feedback

After providing the initial version of high fidelity screens, I have tested them with target users and here is what I found:
All users found it easy to navigate to do the tasks including Search, read reviews and navigate to a specific place. They also found the whole experience appealing and very realistic.
However, there were some pain-points for some users while working with the app:
  • Users had an unclear understanding of the compass and thought it was not necessary
  • Users had difficulty reading navigation icons due to the high level of transparency and inefficient color palette.

Colors are not bright and exciting enough

Is it essential to have a Compass?

It's difficult to see and read the icons

Design Changes​

Actions I took based on users’ feedback:​​
  • Eliminated Compass 
  • Enhanced the navigation bar and icons
  • Used specific symbols for each place (Pizza, Burger, Noodles)
  • Revised colors and visual design
Initial Design
Final Design

Deleted the compass

Enhanced Visual Design & Color Palette

Used specific symbols for each location 

Optimized Navigation Bar

Final Product

Interaction deisgn (Using the app in NYC)

tbd

Search

Scan

AR-Nav2.gif

Navigate

Interaction Design

Low Fidelity Prototype

It took me a couple of iterations to get my paper prototypes ready to test with the target users.  From users' feedback on my initial sketches and based on Personas, I decided to focus on two main actions/tasks only:
1- Search for specific places  2- Get information on places you see
So after Sign-up/Login user will be directed to the Home screen where they have 3 options.
1- Search
2- Scan
3- More (setting, profile)

Home

Navigate

Results

Search

Scan

Results

 
 
 

Real User Experience

(Using the app in NYC)