Challenges to outdoor recreation, and a solution

1. Photo Hunt 1
Photo Hunt
Created Dane T
Description Challenges to outdoor recreation, and a solution
Tags Design Thinking Mobile App Qualitative Research
Timeline 18 mo. as part of UX school curriculum

2. Photo Hunt 2
A project about giving people a way to scavenger hunt almost anywhere using a
phone—meant to create opportunity to get outside the home for recreational or
social activity
What We're Up Against

3. Photo Hunt 3
Problem: Young adults want to go
out, but...
the priority is to have fun—socially
and inexpensively. Sometimes this
leads to them staying in instead of
exploring local spots.
Goal: Create a scavenger hunt app
that gives people opportunities
to...
explore parts of their city they
wouldn't otherwise visit, and do so
in a social game format that meets
requirements given in
CareerFoundry's UX Design
course.
Role: I acted
as a UX
Generalist,
doing
discovery,
ideation,
prototyping,
and testing—
guided by my
mentor at
CareerFoundry
📖 Methods: User-centered design
Competitive analysis
Generative and evaluative research
User personas
Information Architecture and User
Flows
Wireframing and Prototyping
🛠 Tools: Adobe XD, Webflow, Balsamiq, and of course, Pencil & paper
Process: Roughly follows Design Thinking (slight variation in this document)

4. Photo Hunt 4
🕗 Timeline: While acquiring new skills and attempting to get the best
possible result (a noble shortcoming I'll explain later), the project took
place over 18 months
Approaching the
Problem
Step 1 - The Lay of the Land: Competitive Research
Several apps already exist for hiking, group games, corporate scavenger hunts,
and hidden treasure games.
Two competitors that turned up in search engines and the app store were Let's
Roam and Geocaching, both about outdoor recreation. Our new app can draw on
their successes and improve on their weaknesses.
Geocaching and Let's
Roam each set their

5. Photo Hunt 5
homepage as the map,
so picking a game is fast
and easy. Since a gold
standard for locational
apps, Google Maps, also
uses the map-first
design, our current
project should be well-
off going map-first.
Note on Geocaching
In Geocaching, a
player can log a find
in as few as 3 clicks.
Note on Let's Roam
Let's Roam, above,
seems to waste
some screen "real
estate", as less of
the viewport is
available for the
map.
Research on Geocaching (a treasure hunt app) is what inspired the idea of photo
hunting, which became the subject of the project you're reading about here.
User Stories & Job Stories
What kinds of features does a photo hunt player need in an app? Writing user/job
stories like the following helped early brainstorming for app features.

6. Photo Hunt 6
As a photo scavenger hunter, I want to
see past players’ solutions to hunts, so
that I can enjoy comparing my photo to
other variations.
✏ Possible solution
After solving a photo hunt, what might a player
want to do?See other players' photos and
compare them to their own. Maybe the app will
display them all after the user finishes their task.
The same thing happens in Google's Quick, Draw.
When I’m reviewing my own photo
solution to a hunt, I want to be able to
retake the photo multiple times, so I can
get the right shot.
✏ Possible solution
Imagine taking a selfie with a camera app and
feeling unsure what will happen after you click the
button. "Can I delete it?... Will it automatically
send somewhere?... What will happen to my
photo if I press the "back" button?..." So our
present app wants to avoid such uncertainties.

7. Photo Hunt 7
Step 2 - Exploratory Research - (Qualitative)
The need for fast and inexpensive results led to Qualitative Research, which for
this project used only three participants (though five is better). It took the form of
User Interviews, each lasting an hour or less. These User Interviews aimed to
learn about how our users do outdoor recreation, including hikes, nights on the
town, visiting the zoo, and how friends and family play into it.
Research Objective:
To understand what prompts people to play outdoors, how they plan to do so,
how they flex plans to accommodate a game, what benefits and complications
there are, and what role phones and computers play
I conducted user interviews, one-on-one, with three participants, while recording
audio to later transcribe and analyze. Here are some of the questions that
participants were asked:
How did you plan [for a particular outing]?
How did you get the original idea to play?
What did you discuss beforehand?
When you went [to a certain event], what happened?
Did you like it? What about it?
I looked for associations among all participants, using Affinity Mapping, which
looked like this. Each color represents a participant...

8. Photo Hunt 8
Here were some findings about potential users of our outdoor game app:

9. Photo Hunt 9
 Some invest in games for the long run and others want "quick
wins"
 The primary goal, often, is to be social
 They want a challenge or competitors to overcome
 They want rules and want the path to winning to be
understandable
 They mentioned other nice things about recreation Examples:
bringing home souvenirs from the zoo; developing skills through
gaming)
Notes from interviews also helped create User Personas, which guided design
decisions from this point forward.
Step 3 - Ideate Solutions
A Task Flow for Persona, Joan
👤 Joan’s objective
"As an outdoor enthusiast, I
want to prepare scavenger
destinations before starting
my trip, so that I can find
them when I don’t have
reception on my hike."
Entry point: Open the app.
Success criteria: Joan has
directions and “about” info to
her scavenger locations.
 Create account
 Log in
 Figure out how to browse or
search locations
 Choose or isolate an area or
subset of destinations
 Figure out how to examine
scavenger destinations/puzzles
 Keep track of favorites
 Save, download, or print the info
for use later

10. Photo Hunt 10
➡ User Flow for this task
Another Task Flow for Persona, Joan
👤 Joan’s objective
As a collector of adventure
mementos, I want an
integrated camera and
gallery feature, so that I can
snap and keep my best
photo.
Entry point: Joan arrives at
her GPS pin.
Success criteria: Joan can
find her recent photo
submission in the gallery for
the location she visited.
➡ User Flow for this task
 View hunt details and/or sample
photo.
 Open camera.
 Snap photo and view. (option: Save
photo to phone.)
 Compare to sample photo.
 Take more photo attempts
(optional).
 Submit choice photo, view it, and
view other players’ photos.
 After leaving the page) Open
gallery of submissions and view
own photo and others’.
These task flows are created based on a realistic context for Joan, an archetypal
user, founded on the user research from the previous step in this project. *
* See the Personas page for Joan, plus her User Journey Map
Designing flows before making mobile screens was the purpose of this step. On
the other hand, designing mobile screens without first planning flows, navigation
or architecture is next to useless—since the reason people use apps is to
accomplish their goals. They don't open apps just to look at pretty screens.

11. Photo Hunt 11
Step 4 - A Solution (Prototyping)
The site map roughly laid out the organization for the entire app, so it was
important to make the most important tasks quickly accessible and intuitive to
find.
Card Sort
Card Sorting helped organize the site map based on users' mental models. In the
study, five participants (separately) did an Open Card Sort, where they grouped
topics printed on cards in an arrangement that made sense to them. They also
wrote labels for their groupings. The reason for an Open Card Sort, where they
wrote their own group labels, rather than a Closed Card Sort, where labels would
have been pre-established, is that the project was early in development. I needed
to explore possible architectures rather than evaluate an established one (which
would have called for a closed sort).
Each box represents something you can "navigate" to in the app

12. Photo Hunt 12
Wireframing
Wireframes started on index cards and sticky notes. These were the most
important screens for the most important features, such as browsing and opening
up specific scavenger hunts, starting a group game, and taking photos during a
hunt.
After low-fidelity sketches, the programs Balsamiq and Adobe XD facilitated
higher-fidelity screens. The goal in prototyping was to give target users tools to
solve their most pressing tasks. Some of the changes below are due to upgrading
fidelity. Others are based on Usability Testing, which is what Step 5 is about
Example: Hunt Details Screen
A Card Sort participant organizing topics by group, according to their own mental model

13. Photo Hunt 13
Reflection on This Step
Since I was just learning Adobe XD, it was slow and overwhelming at first to make
adjustments on the order of pixels, because I had no graphic design experience.
With more practice, things picked up.
One thing I would do differently, if I were to start the project over, is to forget
about some of the details, (to avoid wasting time). Don't change fonts, colors,
special icons, or menu shapes until the MVP features are working.
Step 5 - Test the Prototype
Usability Testing was conducted in person, with six participants, separately, using
the prototype made in Adobe XD. The test script consisted of scenario tasks
where participants imagined themselves in situations where they could use the
app to respond to my prompts.
Here were the top five discoveries for improvement of the prototype.
⚠ ISSUE #1 User unsure of the goal and rhythm of the solving-a-hunt
flow
High severity
Suggested change Include context clues, labels, and progressive
onboarding in the hunt details page leading into
starting the flow to solve the hunt.
Reason Most test participants made comments that they don’t
know what the goal is or that they expected a
different rhythm or sequence when about to solve a
hunt.

14. Photo Hunt 14
⚠ ISSUE #2 Map lacks context, clarity, ease
High severity
Suggested change The map screen should have more labels, symbols,
and orienting clues.
Reason Almost all participants struggled to grasp the
interactive map, and they commented on ambiguous
or cryptic aspects of it.
⚠ ISSUE #3 User doesn’t tap options in “List” when able
Moderate severity
Suggested change Include more context on List screen, with details
making it clear that the list options are nearby hunt
locations, such as how many miles away each one is.
Another option is merging the List and Map together
as Google Maps does, rather than having them on
separate screens.
Reason Half of test participants had the opportunity to tap a
list option to navigate to the hunt but didn’t. If users
don’t know that list options correspond to locations on
the map, their search will be limited to zooming and
poking on the map.

15. Photo Hunt 15
⚠ ISSUE #4 User doesn’t notice the screen has changed once using the
search bar
Moderate severity
Suggested change Make the new screen contrast from the previous
screen.
Reason The affected user didn’t notice their search results
had displayed while looking at the screen, looking
away, and looking back at the screen.
⚠ ISSUE 5 The home page is generic and there’s no
instruction Moderate severity
Suggested change Have more labels and theming on home page. Edit
onboarding flow. Add coach marks or progressive
onboarding.
Reason Half of participants remarked either that the [home]
screen was vague or generic like a maps app, that the
icons at the bottom were cryptic, or that there’s no
guidance.
Example: Changes for ISSUE #2
Focus on usability excluding color and aesthetics.
⚠ ISSUE #2 Map lacks context, clarity, and ease

16. Photo Hunt 16
https://s3-us-west-2.amazonaw
s.com/secure.notion-static.com/
1968123e-2e89446f-a1767cd
98ce26a22/Adobe_XD_202102
01_090041_Trim.mp4
https://s3-us-west-2.amazonaw
s.com/secure.notion-static.com/
438a73c6-af4f-478a-9c02946
90c858646/Adobe_XD_202102
01_092453_Trim.mp4
Above is part of a flow, before and after. Labels, symbols, and orienting cues were
edited to be stronger in the prototype on the right, so that a user can...
know what they're looking at
distinguish map markers from each other
know what tools are available
see clear effects from their actions
recognize when the screen has changed (harder for users when active
outdoors)
Reflection on This Step
For testing the prototype, because I'm experienced in face-to-face dealings with
customers, I was confident about leading my participants (or, rather, letting them
lead) through the app activities. I thought about avoiding bias, keeping
participants on topic, and noticing when their mental models mismatched my
design.
If I were to restart this project, I would prototype and test more rapidly and
iteratively than I did the first time around.
Incorporating Peer Feedback
Feedback from design peers inspired some more edits.
Before After -
An onboarding tour was also in the edited
version to help new users, but it's excluded in
this video to highlight the other changes.

17. Photo Hunt 17
"I was expecting
a confirmation
page [after
clicking Submit
on Screen A, but
it led me to a
create a profile
page."
— design peer
Edit:
Screen B is now
simply an overlay.
Screen A is still in
the background
to keep the user
oriented. The
overlay breaks
the flow, yes, but
less startlingly.
Screen A
Screen B
Screen A
New screen B

18. Photo Hunt 18
In Summary
The objective of this entire project, as requested by CareerFoundry, was to
"enable players to enjoy social scavenger hunts for real objects and locations in
their own cities". My mentor encouraged making my own unique take on the
objective for a more engaging project, so rather than a classic scavenger hunt, I
designed for a unique type of scavenger hunt app I couldn't find on the market—a
photo hunt for specific scenes, like the angle between two buildings downtown or
a spectacular tree somewhere along a trail. This idea actually helps with the
scalability requirement—since a hunt set up anywhere can be played by infinite
people infinitely many times—but added to players' amount of set-up work, since,
for example, the spectacular tree along the trail would've had to be logged by a
player in inventory before anyone could go hunt for it.
I am a little disappointed that I didn't fully develop every feature requirement
asked by CareerFoundry, since I spent a lot of work on the features I focused on.
So, if I were to go back in time to start again, I would develop an app for classic
scavenger hunting (for simplicity) and frequently refer to the requirements to
make sure they're covered.
If I could go back and do it again, I would also be more rigorous about keeping
things basic. I would have aimed for base functionality that's solid. For example,
one of the personas, Adrian, was a gamer. A flow I designed for him was about
fine-tuning the game setup before starting a game—such as the win criteria, how
the timer works, swapping teammates, etc. Later in this project, in trying to flesh

19. Photo Hunt 19
out this flow, the prototype was getting too complex, and I wasn't able to bring the
feature to life. Instead, it may be better to have focused on simple features, like
inviting players and starting a game. This may have meant ignoring the persona,
Adrian. It's also better to get out a functioning product early MVP than it is to
develop all the features.
Expanding on the idea of basic functionality, Balsamiq and Adobe XD let me craft
mid- and high-fidelity screens. But one thing I would change if doing this project
over would be to forget about the little details, even in higher fidelity work. For
example, at one point, I wanted to change fonts, sizes, and colors, so I spent time
editing all the screens in the prototype. Later, I went back when I found out that I
didn't like the new text and colors, and had to change them all again. In other
words, next time, I would keep my eyes on the big picture. No, these changes
weren't even based on research, so I should have left the font alone.)
What I did well
I work in retail banking and work one-on-one with customers every day,
overseeing customers doing banking transactions. So I was somewhat confident
in moderating research in this project—knowing what kinds of things NOT to say
to participants, gently keeping them on topic, and recognizing whether their
mental models matched with the prototype.
Takeaway
Of course, I could always do more iterations of the design process, including
testing, so, if I were to take this project further than I did, I would combine all of
my reflections here into a strategy: Don't lose the forest for the trees, make simple
design decisions, and test often. If I were to restart this project, I would have more
skill mocking up quick prototypes, so I could iterate often.
For more content...
Dane Tingleff

20. Photo Hunt 20
- Links in this case study -
Personas
Joan's User Journey Map
User Flow - Solving a Hunt
User Flow - Getting Directions