About THE APP
Scout AR helps tourists and travelers find restaurants within walking distance so they can grab a delicious bite to eat while on their sightseeing adventure. The augmented reality iOS app displays nearby restaurant information in a live camera view and a map view.
Download from the App Store.
The Goal & Audience
Design an app that helps users find restaurants they can easily visit between sightseeing stops. Make it simpler to discover delicious food without having to go out of the way which can be difficult as a traveler who is unfamiliar with the area or doesn’t have easy access to transportation.
The user can view nearby restaurants on a map view.
The augmented reality view where the camera displays annotations with restaurant information.
Touch an annotation to segue to a page with restaurant details.
See further restaurant details on Foursquare's website via a web view.
I created this app before the release of ARKit on iOS and when there were fewer augmented reality apps in the App Store. I did research on how to best present the augmented reality annotations by investigated the existing AR apps in the store as well as looking at augmented reality concepts on Dribbble.
I designed and developed a prototype using Swift and Xcode to test on my phone since the camera view can only be tested using hardware and not on the Xcode simulator. This prototype tested if creating the augmented reality annotations was possible or not since this is a main functionality of the app.
At 3 weeks, I had a short timeline for this project and prioritized getting the augmented reality view working and then adding the map view. I enlisted the help of a developer friend and mentor to help with the code for the app.
I sketched out some rough ideas based on my research and explored what types of information would be useful to display.
Full Color Mockups
I did full color mockups of each of the screens. Laying out and styling all the screens before coding them is much more efficient when working on mobile.
In the app, the augmented reality screens use a live camera view and display annotations in the direction of the available locations.
Through user testing, I learned the standards for how to use AR apps are not as ubiquitous as regular websites. Most users know hovering over a web navigation menu may result in a dropdown being displayed even though this dropdown is hidden. Users do not need instruction to find this functionality, however, this is not the case with augmented reality.
During testing, users would get confused or think the app was “broken” if the augmented reality annotations did not show up immediately in their screen. Since the annotations only appear when the user is pointing their phone in the direction of the restaurant, no annotations may show if the user is not facing any available restaurants. Providing tips on the screen to help guide the user such as saying “look around” with arrows can help solve this problem.
Other changes for a future version include:
- Auto-refreshing the map view when the user moves to a new location to repopulate the screen with restaurants from the new area.
- Counting down or up the mile distance displayed on the AR annotations in response to the user’s movements.
- An error message on the map screen if no restaurants are within a 1000m radius alerting the user as to why the screen is not displaying any restaurants.
I learned the importance of testing the app with users before submission to the App Store. This was my first App Store submission experience and the problems users had during testing, the App Store submission reviewers also had, in particular the part about needing to prompt users to look around with their camera in the AR view. Doing user testing beforehand and fixing those problems first would have saved me time during the submission review process with Apple. Overall, this was an interesting exploration of an emerging technology and I learned more guidance is necessary when first introducing augmented reality to users.
*This is a personal project.
Tools: Pen and paper, Sketch
Technologies: Swift, Xcode, MapKit, UIKit, WebView, HDAugmentedReality, JSON Parsing, Foursquare API