Augmented Reality (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.

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 $140 billion by 2025.

Role

Interaction Designer

Project Type

Course project 

Platform

iOS app

Timeline

Fall 2019

MY PROCESS

EMPATHIZE

DEFINE

 IDEATE & PROTOTYPE

TEST & ITERATE

  • User Interviews
  • Surveys
  • Competitive Analysis

  • Information Architecture
  • Empathy map
  • User Journey
  • User flow
  • Personas

  • Lo-Fi and Hi-Fi design
  • Usability testing
  • Iterating on Design
  • Lo-Fi and Hi-Fi design
  • Usability testing
  • Iterating on Design

EMPATHIZE

Secondary Research

Since I wasn’t very familiar with the AR industry, I began with some secondary research to gain a better understanding of the market trends and demographics. I then conducted a survey study and interviews to learn more about the different experiences people have had with navigating apps as well as AR tools. 
Through my research, I wanted to:
  • Understand the market trends of the AR industry

  • Identify competitors and evaluate their strengths and weaknesses

  • Learn about the current trends of AR and how it’s being used in businesses

  • Understand the experiences people have with navigation apps

  • Identify target users and personas

  • Discover the goals, needs, motivations, and frustrations of target users

AR

  • 1% of retailers say they are using AR.
  • 71% of consumers say they would shop more often if they used AR
  • 40% of consumers say they would pay more for a product that they could customize in AR
  • 83.1 M people in the US used AR monthly in 2020
  • people find AR positive, helpful, and fun, and 45% of respondents said it had saved them time.

Demographics

  • Millennials are the main users of AR products
  • 70% of consumers between ages 16 and 44 are adopting of AR. 

Primary Research

To gain a better understanding of my target audience I ran a survey study with 20 participants. I was wondering:
  • How familiar people are with AR technology?

  • How comfortable they are trying an AR specific device – AR glasses 

  • How open they are with the idea of using an AR app on a day-to-day basis?

  • What benefits can users get from an AR app that isn't achievable with other technologies? 

Key Findings

  • Most participants have used an AR app before
  • Some participants felt uncomfortable with the idea of using AR glasses
  • Users prefer using the AR app on their mobile device instead of a new AR built-in only device

  • Almost all participants said they find AR beneficial in navigating
  • More than half of the users said that they would struggle to navigate to the destination specially when they are visiting a new place

Competitive Analysis

After learning more about the industry and users, I wanted to take a closer look at the competitors and how they’re using AR on top of their other app features to help users achieve their goals. I identified three main competitors within the industry through my market research: Yelp (Indirect competitor), Google Map AR, and ARCity Navigation. Direct competitors were navigation plus AR focused like my app while indirect competitor was mainly focused on crowd-sourced reviews about businesses especially food industry. Exploring each of their apps, I evaluated the strengths and weaknesses of each to see how my app could fill in any gaps moving forward.
 
 

DEFINE

Persona

To make sure that my decisions moving forward in the process are user-centered, I wanted to have a clear understanding of who the users are. Using what I learned from patterns from my primary and secondary studies, I created a user persona to represent who I will be designing for - Meet Albi!
Screen Shot 2019-05-19 at 10.47.17 AM_ed
Albi , 31 
Explorer & Traveller
Manhattan, NY

"Living in NYC, there are tons to do and explore! Sometimes there are too many options that it gets confusing to choose one."

Goals

  • Learn about places that I see pretty instantly
  • Navigate to where I want to go without struggling with google map for minutes
  • Get tips and interesting fact about the neighborhood I'm visiting

Needs

  • Improve my knowledge about the history of the neighborhood I'm in
  • Locate and findexciting places to hang out

Pain Points

  • Need to spend a lot of time to pre-research to learn about places I'm visiting
  • Feeling confused and distracted in busy places and left alone with too many options

Problem Definition

Now with my understanding of the end-users, I started thinking about what problems we are trying to solve for them. Using the user Insights and Needs, I was able to create point-of-view (POV) statements and How Might We (HMW) questions that would help drive my brainstorming process.

Brainstorming

Taking the HMW questions, I started my brainstorming process to come up with solutions for each of these problems.

User Journey

Now I wanted to dive deeper and get a better understanding of the overall journey that a user would take throughout the app I've created a user journey. This helped me to put myself in the shoes of the users and empathize with what they think, feel, do, and say.
         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:

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 the persona, I decided to focus on two main actions/tasks only:
  •  Search for specific places 
  •  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 for new places
2- Instantly scan the places that they see
3- More options to set preferences and customize
 

Wireframe

After a few rounds of feedback gathering on the paper prototypes, I've created low fedility wireframes and added necessary UI elemnts to the design.

TEST

Users' Feedback

After providing the initial version of high fidelity screens, I have tested them with 5 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 unnecessary to have a compass
  • Users had difficulty reading navigation icons due to the lack of contrast and inefficient color palette

Colors are not bright and the UI is not appealing

It is not essential to have a compass

It's difficult to see and read the icons

Design Changes​

I've updated the UI based on the feedback that I've gathered from the users.​
  • Enhanced the navigation bar and icons for a better user experience
  • Eliminated unnecessary UI elements  
  • Revised colors and visual design
Initial Design
Revised Design

Deleted the compass

Enhanced Visual Design & Color Palette

Used specific symbols for each location 

Optimized Navigation Bar

 

OUTCOME

After implementing the UI updates from rounds of feedback gathering sessions, I have used Flito app to do the Interaction Design of the app and create a close-to-build version of the app. Below, it is displayed how users can search, scan, and navigate via the app.

Search

Scan

AR-Nav2.gif

Navigate

 

Real User Experience

Here is another use case of the AR City app where it is being used in real-time in Manhattan.

REFLECTION

This was a fun project to work on as it was the first time I incorporated AR into my design. It was a great learning journey about the technology and understanding its capabilities and limitations.
There are actions that are needed for this app to keep growing in the future. More qualitative studies are required to observe user behaviors when using the app in real life. From such studies, new features will be identified to serve users with their goals and make using this AR app fun.