Adventure Lens

A contracted project

— PROJECT NAME

Adventure Lens

— ROLE

UX Designer

UX Researcher

UI Designer

— DATE

January 2023 -

May 2023

Adventure tourism is a massive industry, valued at $366.7 billion in 2022, and it’s expected to grow much more in the next 10 years. Part of going on an adventure tour is the memories you make, and photos and videos only help enhance that experience.

The goal of this project was to create an app for adventure tour guides to take photos on a mobile phone for a tour without having to individually add tours or guests for every scheduled tour, allowing the tour guide to focus on providing a memorable experience and capturing the moments.

Adventure Lens was a contracted project through Adventure Soup Inc.

Current Photo App Research

I looked at what my client’s main competitor had to offer and their approach is to add labels to a camera ID before taking any photos at all. This means that for each tour, the user needs to scroll through a list of guest names and make sure they choose the correct ones. Then, after they take photos for those guests, the user must Clear labels and begin the label adding process for the next group.

Based on my client’s research and their experience in the field of adventure tourism, I created the following personas to keep in mind as I worked on Adventure Lens.

User 1 – Rowan

Rowan is a tour operator who also guides his own tours, and he needs to quickly and conveniently take photos for guests on his tour because it’s important to him to still have the ability to enjoy nature with his guests without focusing on technology too much.

User 2 – Lisa

Lisa is a tour guide part-time with an adventure tour company, and she needs a way to keep the photos for her tour guests organized because she wants to focus on providing memorable experiences for the guests on her tour, not worrying about where the photos end up.

Key Functions for Adventure Lens

Through discussions with my clients, we highlighted the following as functions that the app needs to have as a minimum viable product.

1. Camera function – for taking photos of guests as they enjoy their tour and/or activities.
2. Clearly organized tours – for the app's users to easily navigate between tours and ensure the right photos get to the right guests.

3. The ability to add tours - some tours might not be in the tour operator's reservation system or they just need to be added manually.

4. Automatic function without human intervention – many of the actions of the app, such as loading guest lists and sending the photos to guests, should happen automatically so the tour guides can focus on leading their groups and their other day-to-day responsibilities.

With the user personas and required key features for the app in mind, I sat down with my client and brainstormed designs for Adventure Lens. We came up with the following paper wireframes for the app.

After iterating on paper, I created digital wireframes to refer to in the next step of this project – creating digital mockups.

While working on Adventure Lens, I was also taking the time to improve my UI skills. What I learned is apparent in version 1 of Adventure Lens vs version 2. I applied my new knowledge of alignment, spacing, hierarchy and clean, modern design to drastically improve upon my early designs, as can be seen below. I also created and refered to a style guide for version 2, which was influenced by Material Design 3.

Style Guide used for version 2 of the high-fidelity mockups.

Once Adventure Lens had been designed, I prototyped the mockups and got it ready for usability studies. I ran 8 studies on the prototype altogether, 3 moderated and 5 unmoderated studies. Participants ranged in ages from 18 to 40 and there was an even split of female and male participants. Participants all resided in North America and spoke English as their first language.

Overall users seemed to have a decent experience with the app. We had a SUS average rating of 89.5. Many of the usability study participants found the flow intuitive and were able to complete the prompts they were given. However, there were a few issues that stood out as priority 0 insights.
1. Create a tour flow - Users were confused by the original flow of creating a tour while in the camera screen. Usually when a user opens a camera, it's to take photos, so the idea of doing something that wasn't taking photos was confusing.

2. Camera buttons - A few of the users were confused by the buttons available in the camera function – the switch camera button and gallery button in particular. They didn't know what the buttons meant and there weren't any labels to help clarify that. Some of the users also overlooked the camera button in the navigation bar.

3. Add Tour button - One of the most challenging parts of this design was figuring out how users can add a tour. The button was moved around during testing and changed from being a floating plus sign button to a menu item, but those options proved difficult to find and/or understand.

4. Sending photos to guests - Within the Tour Details, there's a bar that indicated whether the photos for a tour have been sent or not, and the function of this was not clear to many users. Part of the issue was the phrasing of the information within this box and the buttons that appear with it.

Quotes from users recorded during unmoderated usability studies.

An updated version of the prototype with these changes applied can be found here.

Tour Buttons, Add Button & Nav Bar

The camera icon in the empty tour buttons was confusing, so I switched it to an icon of a photo.

The Add Tour button became a large, clear button at the bottom of the Tours screen – much easier to find and clearly labelled.

For the Nav bar at the bottom, we wanted to emphasize the camera more so I put it in a larger circular button. I also changed the icon for Tours so that it wouldn’t be confused with buttons for the calendar in other parts of the app.

Add a Tour Flow

I completely removed the Add a Tour flow from inside the camera. Regardless of where a user taps on “Add Tour” within the app, the app returns to the home screen with and an overlay appears with the input boxes for creating a tour. Guest information such as names and contact information can also be added through the new Add a Tour flow.

UX Writing – Tour Photo Status

In order to make the photo status of a tour more user-friendly, I changed the wording so there is a clear difference when photos are sent vs. not sent. In the original card, the text changed by two characters to indicate that something had been done. This made it too easy to miss if an action had done. So, I rewrote the text to be more clear. The card also changes out when there are no photos currently assigned to that tour to feature an obvious call-to-action button for taking photos. I also made the buttons in these cards larger and easier to see and tap.

The developer for this project starting programming the app before usability studies had been completed in full. This meant that the developer was working with older screens. I compiled my UI changes and UX changes based on new knowledge into a set of slides with old screens on the left and the new screens on the right. I also included a write up about what changed so the developer wasn’t stuck playing “spot the difference.”

Throughout this process, I have also worked with the developer to fix designs that couldn’t be implemented, such as the glass effect overlay on the tour buttons, the white card under the photos in a specific tour, and figuring out how to design the tour buttons for smaller screens.

Notes on changes in the UI & UX after usability studies for the developer

Some of the other changes discussed with the developer.

What's next – The app is currently undergoing further development based on the usability study results, from there, it will be released and any more feedback on the user experience will be provided by the intended users themselves. From there, the app will be further improved upon.

Jess Veldhuis UX Designer

Adventure Lens