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.
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.
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.
IDEATE & PROTOTYPE
TEST & ITERATE
Lo-Fi and Hi-Fi design
Iterating on Design
Lo-Fi and Hi-Fi design
Iterating on Design
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
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.
Millennials are the main users of AR products
70% of consumers between ages 16 and 44 are adopting of AR.
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?
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
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.
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
"Living in NYC, there are tons to do and explore! Sometimes there are too many options that it gets confusing to choose one."
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
Improve my knowledge about the history of the neighborhood I'm in
Locate and findexciting places to hang out
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
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.
Taking the HMW questions, I started my brainstorming process to come up with solutions for each of these problems.
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.
Well! Let me use AR City to get some suggestions from.
Wow! Look at the results. Let's explore with more details.
Yess! I think this is it. It has a high review and is only 0.5 miles away.
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:
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
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.
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
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
Deleted the compass
Enhanced Visual Design & Color Palette
Used specific symbols for each location
Optimized Navigation Bar
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.
Real User Experience
Here is another use case of the AR City app where it is being used in real-time in Manhattan.
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.
bottom of page