top of page
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.
Empathize
Define
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!
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
Design
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
Test
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
Navigate
Outcome
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.
Reflection
bottom of page