PanoGoggles Android App
Roles: UX/UI Design, Graphic Design, Information Architecture, & Usability Testing
Goal: Virtual Reality Drone App for Panoramic Photography
Tools: Adobe Illustrator & Sketch
Drones are rising in popularity for use in aerial photography because they are cheap and small allowing easier access to areas which weren't accessible before. In fact, one of the most common uses for drones today is for the use in aerial photography for both hobbyists and professionals.
A software developer (and drone pilot) contracted my work as a designer and UX strategist to assist in the development of his Android app, PanoGoggles. PanoGoggles lets you take to the skies with your own virtual reality headset. This app allows users to quickly capture the photos needed to create sweeping panoramas, while providing a first-person panoramic views in flight.
- Competitor drone photography apps
- Technological constraints
- Quickly captures photos to create panoramas
- Virtual Reality headset for the sky (live panoramic views)
- Quicker functionality than competitor apps, which more photos per flight/battery
- More affordable and smoother operation than competitor apps
Design goals for PanoGoggles focused on simplicity for orienting users with the app. All graphics were created in Adobe Illustrator and all wireframes and mockups were created in Sketch and Photoshop.
The design goal for the icon was to represent the app as simply as possible fitting the constraints of standard icons.
First Icon Designs
The first designs for the icon focused on the drone aspect of the app. Designs initially were oriented around the top down view of a drone.
Second Icon Designs
The second designs adjusted to the overall purpose of the app being for a camera specific needs. Designs adapted to have a straight-on view of the drone such that the camera would a major component of the icon. This led to iterations on how to best represent the camera.
Final Icon Design
The final icon is an enlarged view of the drone's camera with a long shadow. The camera resembles an eye because the app gives the user a first-person view from the drone's perspective.
The final round of designs adjusted to highlight the camera, because while it's an app for drones, the app's main focus is on photography. The camera size was increased subtly from the original camera and drone graphic as a means of grabbing the user's attention and balancing available space. Part of the drone peeks into the icon as a sublte hint at the drone body as well as tying into the feature image for when the app is opened.
The screen flow for PanoGoggles focuses on quickly orienting the user to what they need for operating the app. PanoGoggles revolves around simplicity, only having the features necessary for flying a drone, having in-person view (VR) from the camera, and quickly taking panoramic photos. Designs for the screen layout uses tailored graphics to give the app a consistent appearance.
Wireframing screens with placeholders for graphics and copy facilitated the screen design and flow. Initially the developer wanted to include links to purchase the appropriate equipment during the on-boarding screens, but I advised against this as it would take the user out of the app, and suggested instead including these links (if he still wanted them) under the Settings or other optional link.
Accommodating graphics and text to the various sizing options for Android phones created a learning experience for myself (the designer) and the software developer as we learned the technological constraints. Starting with the tailored graphics and a few placeholder images, while we worked out the details, we were able to get a better idea of how the flow would work.
Wanting the on-boarding to be representative of the app's functionality, the flow of the screens swipes (much like a panorama) maintaining a connection through aligned USB cables.
Final Screen Flow with Annotations
The app is designed with adaptive screen-rotation for both portrait and landscape viewing and adapts to fit devices of different sizes. Incorporating tailored graphics provides consistency across the app.
- Launch Screen are the first view users have of the PanoGoggles app and only directly links to what is essential for app operation. There are 3 options:
- disabled upon initial launch of app
- enabled once user has completed the Setup
- always available for users to access
- after initial viewing the Fly button is enabled
- users can access any additional preferences for flight and camera options
- includes links on where to buy any needed equipment
- Setup Screens inform the user about the equipment needed to best operate the app and allows the user to establish the initial settings needed to begin flying and creating panoramas.
- Screens swipe to simulate a panorama, where cables keep the user connected to each screen.
- After completing the initial viewing, the Fly Button is enabled on the launch screen and screens can be exited in the future by tapping on the "skip" in the upper right of the screen.
- Users can always view the Setup Screens again as desired.
- Flight Screen is arranged as a split-screen view so it can be used with a Virtual Reality (VR) headset. A Heads-up Display (HUD) overlays the view streaming from the camera in real-time.
Feature Graphic Design
App discovery matters. The feature graphic is the first thing a potential user sees when investigating an app in the app store. It's an opportunity to convince users to download the app by communicating more than simply how the app looks but also clue user into how it functions. Designs can convey to the user the purpose of the app through imagery and textual clues.
I incorporated the PanoGoggles name and drone graphic overlaid on an aerial photo. The drone is in a 360 globe which represents the apps purpose of taking panoramic photos while the aerial photo depicts a view from the drone.
PanoGoggles is set to launch in 2018.
Research efforts will continue for PanoGoggles to benchmark the app for future iterations. Interviews with drone users and usability testing will be conducted to assess areas of improvement.