Quest

UX Case Study | UI Design

Quest is a mobile scavenger hunt app that offers learning and exploring objectives for the users’ place of interest. The app encourages users to visit attractions by providing a gamified and social tool to help users’ learn fun facts and enrich their outing experience! Continue to read to learn more about this case study!

Concept

I grew up playing video and board games with my older brother. Even though I always lost to him and sometimes shamelessly cry like a sore loser, I kept playing. But why? Now that I’m playing my own games, I realized it’s the feeling of accomplishment, the fun aesthetics, the action, the social aspect that becomes so deliciously addictive. 

So how can I incorporate a gaming aspect into a learning and adventurous experience? And how can I do it in a way that promotes people to learn and go outside? The problem for people to explore a new places is that they lack a way to do it in an educational and gamified way. However, by answering Who, What, Where, When, Why, I can direct the trajectory of my game. The goal of Quest is to create a  mobile platform as a way to learn interesting facts about their respective destination while having fun. 

The 5w's

Our target audience is around the age range of 18- 50 because they typically are capable of using mobile apps and have their own means of transportation

 

A scavenger hunt app that attracts users who crave for an adventure with friends that’s packed into an educational and stimulating game

Cities, regions, or educational institutes such as aquariums or museums

The starting time and amount of time it takes to finish a hunt varies with each hunt. A person exploring the city of New York may take a few days to finish whereas the California Science Academy may take only 3 hours. It depends on your preference and location! 🙂 

To encourage users to be more active socially, physically, and mentally through gaming in the real world 

The Overall Challenge

 

  • Produce a streamline human centered navigation system 
  • Identifying the triggers and needs of the users
  • Providing adequate informational content
  • Create a competitive and social component to the game
  • Incorporating accessible platform and design 
  • Fashion aesthetically pleasing UI design

Competitive Analysis

While I had the general idea of my scavenger hunt, I faced the challenge of concretizing the ideas and suitable layouts. Also, what are some essential or frictional points that I should have or avoid? Before I even begin I need to know what and who’s out there also doing a scavenger hunt. Why and how are they succeeding or failing? If they’re succeeding, I want to cherry pick their strengths and use them as mine. Basically I needed to scout out my competition. 

So when I conducted a competitive analysis on other mobile scavenger hunts, I picked and chose the best qualities of these apps as my own inspiration, and marked the areas that need improvement. This analysis was also great to view the market potential and fill in the niche that these competitors may have neglected. 

Action Bound
Let's Roam
Geocaching
Seedling Scavenger Bingo
yelp
Yelp

UX Analysis

I looked at the overall how easy it was to use the app. Was it accessible for all users? How easy was it to navigate through and find what I need to find? By doing so, I learned to avoid the same mistakes found in these apps and mirrored structures I liked.

I examined how the structure of the apps were laid out and determined whether they served to aid the user to easily understand how to use the app.

I noted on the difficulty of user flow in each app. Was the navigation intuitive? Was it easy for me to remember how to use the app? Were there friction in using the apps? How can I learn from these strengths and mistakes?

Understanding the Competitors

After careful research, I determined the competitors’ key objectives, overall strategy, and marketing advantage. I learned what sets each competitor apart and their unique attributes.

I researched the competitors’ exposure in the market. Are they only in app stores? Are they available in blogs or search engines? These helped me understand how I can improve my own marketing exposure. 

I defined the strengths, weaknesses, opportunities, and threats of my competitors. By identifying their strengths and weaknesses, I can learn what to input and avoid mistakes from these apps. By understanding the competitors, I can also look into potential opportunities for Quest, such as which niche could I burgeon in? Lastly, I looked at potential threats these apps can pose on Quest.

User Research

Couple years ago, I took a picture of my coworker banding a feisty squirrel during one of my internships. When I saw the picture, I cried out laughing. The picture seemed like the squirrel was an inappropriate part of my coworker. It dawned on me to share this gem with the world. My other coworkers laughed. My close friends laughed. But when I showed my conservative friends, a few awkward seconds of silence passed that seemed like eternity. That was when a part of me shriveled up and died. I knew I had the wrong audience.

Before starting on sketches of Quest, I needed to know who my target audience is and what they need. If Quest wasn’t able to meet the users’ needs, Quest will head towards disaster just like my squirrel photo. There will be no need for Quest because it wouldn’t be meeting the users’ needs. Therefore, it’s imperative to start with interviewing real people so that I can direct the trajectory of Quest.

Interview Research Goals

  • Learning the attitude and tendencies of users who like to travel to iconic places/educational institutes.
  • Identifying what experiences they hope to achieve more when exploring. 

User Interview Questions

  1. How often do you go to educational institutes? (e.g museums, exhibits, aquariums, zoos)
    1. Why do you go?
    2. What were the highlights of your past experiences in these educational institutes?
    3. If you could change something to make your experience better, what would it be?
  2. Where was the last time you explored an area or traveled?
    1. What do you usually do when you travel?
    2. What kinds of places do you tend to go during these travels
    3. Why do you go?
    4. What do you usually hope to get out of exploring?
    5. What kinds of resources or experiences would make your past experiences even better?
  3. Would you use a smartphone app to help guide your adventures in where to go and what to do? Why or why not?
    1. If this guide became more of a game, would that make you more or less inclined to use this app?

After taking note of each participants’ answer, I organized them into categories. These categories helped me visualize which features and functions are needed. 

Findings

 

The app must have features of:
         1. Information availability 
        2. Clean and easy search and filtering engine 
        3. Interesting social component

 

After a few user interviews, I learned what my general target audience wants and need. One memorable idea I learned was that exploring and traveling to be a path in building spiritual and emotional connection with the rest of humanity- whether it be for relaxation, cultural immersion, or a simple getaway. What I’ve found is that the exploring experience could be further enhanced by providing better research and fun guide tools for the users.

The users want a way to view various genres (e.g food, activities, etc.), choose their interested genres before investing in a hunt, and enhance their traveling experiences through learning applicable information.  Before, the direction of Quest is to only give users an opportunity to bond over competing and exploring together. Now, I decided to add checklist elements to Quest for larger scope of areas. This allows users to travel while using this app.

Hopefully, now I can help my audience laugh at my squirrel picture. 

User Persona and Journey

I recently finished a web serial fictional book called Worm. Although it was most definitely fictional, the characters were well flushed out with their idiosyncrasies, personalities, insecurities, and trauma that they felt REAL to me. And because of their realistic characteristics, I was able to empathize and understand their needs (especially emotional needs). I lost count how many times I screamed at the characters, “You need therapy!”. 

Just like how the author of Worm made believable characters, I needed to do so as well. But what purpose does it serve? Personas serve as a way to understand the “average” target audience as objectively as possible.

By creating personas, I can:

  • Empathize with my users more effectively
  • Prioritize their functional needs
  • Make decisions based on the personas, which were created off of real data. 
  • Concretize emotional experiences

Card Sorting and Sitemaps

For one dreadful year, I commuted to work that I call soul crushing. It took me 2.5 hours in traffic…one way. Traffic is psychologically frustrating. It’s essentially friction to our destination.

How do I design something without friction? I needed to ensure a traffic-free and logical design into my information architecture. The challenge is that my design may be intuitive for me but not necessarily for any other user. So how do I make it sleek and easy for everyone? 

Thus, I used a digital card sorting tool called Optimal Sort to do so. After understanding the organization pattern of an “average” user, I used this information to improve my sitemap that reflects the patterns from card sorting results. I began with the core functions of Quest – navigating them from home to meet their end goals. I used different levels of hierarchy to keep track of my pages and step.  

Before card sorting

After card sorting

Wireframing

To keep from going insane, drawing has been one of my past times during the quarantine- especially on characters from fictional books. And I always start off with some sort of shape or scaffold as the first step that blossoms into what I call my masterpiece.

So just like drawing, designing starts with a skeleton. At my first attempt in quick low fidelity wireframe sketches, I sketched out as many ideas as I could in a 5 minute frame. This was repeated a couple times. After these time frames, I began taking my time to think about the layout of my sketches and picked out the ones I liked and set aside the sketches that I didn’t. These sketches are low commitment and inexpensive, so I had the freedom to jot down all my ideas onto paper. Because of wireframing’s flexible nature, it gave me much room to explore visual ideas. 

 
 

Rapid Prototyping

Before I buy anything, I tend to do my research and read review after review to ensure that this product is not just a knock off that breaks after second use.  If I made the commitment of purchasing, I would lose out on my money and own more trash. So when I design something that will be launched, shouldn’t I make sure that it works well? 

So just like buying new products, it’s best to ensure if our design “works” first, then design the time intensive high fidelity prototype. Is my product actually user centered? Will my users have a hard time navigating through the app? Will they enjoy the app? Is it easy for them to remember where to go? However, it’s hard to determine this without having an interactive prototype. That’s why rapid prototyping plays a crucial role in solving design problems without the heavy costs or commitment. The goal is to iterate prototypes quickly before revising it to a higher fidelity.  

 

Usability Testing

When I was a 7 I had my first beloved hamster as a pet. I decided to create one of those maze tunnels made out of used toilet paper rolls. In my mind, I thought I was an artist genius where in reality, it looked like Homer Simpson’s DIY BBQ pit in season 10. After 7 year old me tried forcing my hamster in, the maze fell apart. My product may not have been as perfect as I thought. 

After building my first prototype, it was time to test it and observe how real people interact with my design. Will it succeed, or fall apart like my toilet paper roll maze? The challenge here is to evaluate how my users are able to complete specific tasks.  Through moderated usability testing, I can observe the users’ reaction, emotions, behavior, and note their quotes to improve and revise my prototype.

Affinity Mapping

After conducting the usability testing, I organized my data and placed them into categories. This affinity mapping helped me identify critical errors and view overall feedback in a more digestable way. 

Observations

Suggestions for Improvement

Errors

Comments

Severity Ratings

It was difficult to rate and determine which noted errors should be prioritized to fix. However, I came across the Jakob Nielsen’s four-step rating scale, which helped me identify and classify each error. The following 0 to 4 rating scale can be used to rate the severity of usability problems:

0 = I don’t agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before product can be released

Rainbow Spreadsheet

 

 This visual chart helped me identify the severity impact, and persistence of the errors.

|

Thank you!