top of page
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.
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
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 $120 billion by 2020 (AR Market Value.)
A side project
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.
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.
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?
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.
Albi , 31
Explorer & Traveller
"As an explorer who loves traveling everywhere, getting quick tips about interesting places near me would be very enjoyable and a big help.”
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)
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
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:
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
Actions I took based on users’ feedback:
Enhanced the navigation bar and icons
Used specific symbols for each place (Pizza, Burger, Noodles)
Revised colors and visual design
Deleted the compass
Enhanced Visual Design & Color Palette
Used specific symbols for each location
Optimized Navigation Bar
Interaction deisgn (Using the app in NYC)
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.
3- More (setting, profile)
Real User Experience
(Using the app in NYC)
bottom of page