Ellatronic
Design Portfolio
ScoutARPortfolioMockupv20.png

Scout AR

With augmented reality technology, Scout AR uses current location to find nearby restaurants.

Features:

- Map view shows location of restaurants.
- Augmented reality view displays annotations on a live camera view. The annotations show the restaurant name, rating, distance, and open/closed status.
- Tap an annotation to see more information about the venue.

Scout AR

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.

 

Features

 
MapView.png

The user can view nearby restaurants on a map view.

CameraView.png

The augmented reality view where the camera displays annotations with restaurant information.

DetailView.png

Touch an annotation to segue to a page with restaurant details.

FourSquare.png

See further restaurant details on Foursquare's website via a web view.

My Role

This was a personal project inspired by the augmented reality trend (SnapChat filters, Pokemon GO). My original idea was to display points of interest travelers might need or want to visit. This could include major sightseeing locations, places to eat, or convenience stores. During the development process, I restricted the locations to only include restaurants due to the types of APIs available for free use and with terms of use conditions that I could meet. 

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 investigating the existing AR apps in the store as well as looking at augmented reality concepts on Dribbble.

Constraints

I designed and developed a prototype using Swift and Xcode in order to test the app on my phone. The camera view can only be accessed 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 assist with the code for the app.

Sketches

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 created 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.

 The app opens to a map view showing restaurants in the user's area. During implementation, the available restaurant radius was contained to 1000m, a reasonable walking distance.

The app opens to a map view showing restaurants in the user's area. During implementation, the available restaurant radius was contained to 1000m, a reasonable walking distance.

 Tapping an AR annotation brings the user to a page with photos from the restaurant as well as address, phone number, and other info.

Tapping an AR annotation brings the user to a page with photos from the restaurant as well as address, phone number, and other info.

 The Web View displays more in-depth information from Foursquare, the API used for restaurant location and info.

The Web View displays more in-depth information from Foursquare, the API used for restaurant location and info.

User Testing

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.
 Error message when no restaurants are available for display.

Error message when no restaurants are available for display.

 Tutorial briefly pops up the first time the user opens the AR view.

Tutorial briefly pops up the first time the user opens the AR view.

Summary

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

Support / GitHub