thequest

UX DESIGN · PROJECT CONCEPT


theQUEST is a mobile gaming app — more specifically highlighting the scavenger hunt experience. It targets anyone with an adventurous spirit who is fond of exploration and joy of discover. theQUEST offers its users a platform that combines traditional scavenger hunt features with the capability to explore what is nearby, such as points of interest and/or local businesses.

Mobile Mockup_v3.png


competitive analysis.

Conducting a competitive analysis was essential in gaining insights of the market I am trying to dive into—scavenger hunt mobile gaming apps. This allowed me to identify who my competitors are and what they are offering and lacking. Base on my findings, I pinpointed key features to be included in my app that I believe are neglected in the current market. For example, offering public pre-made hunts, developing a hybrid platform between traditional scavenger hunt and exploring nearby, as well as offline mode during game play. 

1. Competitive Analysis.png


user research.

I interviewed friends and coworkers who have had experiences with either mobile gaming apps or scavenger hunt mobile gaming apps. I physically organized my findings using post-its and created an affinity map to determine key insights and takeaways. 

  • Achieving different levels and feeling a sense of achievement retains their interest. When a game becomes mundane and repetitive, it will drive them away.

  • Scavenger hunts have successfully get them to go outdoor and explore new places, and helped in increasing activity levels.

  • Security concern is key when playing a scavenger hunt game.

  • There are no monetary value affiliated with the gaming. The game becomes less desiring when there is a fee to play.

  • Scavenger hunt is a social game. The ability to invite other players to join and socialize with other players are important.

  • The walkability of the hunt will play a significant factor in how successful the app is.


user personas.

Three personas—the millennial, the teacher, and the business professional—were developed based off my findings from user interviews. This allowed me to begin visualizing my target audience and maintain a user-centered design. 

3. User Persona.png


user journey maps/user flows.

Expanding off the User Personas, different user journey map and user flow were created for each persona. Each user journey map and user flow provided a visualization of their emotional highs and lows and thought process in completing a task. The biggest differentiation is that, user journey map focuses more on the persona itself, whereas the user flow focused more on the interaction with the app itself. 

user flow map copy.png

site map.

The site map was a quick and cost effective way to illustrate how my users can navigate through the whole app. It provided the blueprint for my initial concept of my app. This method focused on the app as a whole and provided an overview of all the screens I need and how they are linked to one and the other. 

5. Site Map.png


low-fidelity wireframes.

To get started with the iterative design process, I chose to sketch out my low-fidelity wireframes. This method allowed for quick drafting of designs and experimenting with different ideas. Here’s a recap of what was created: onboarding screens, sign-up/login/forget password, and the 5 main dashboard screens (profile, messenger, explore nearby, hunt library, and setting). I then sketched out all the necessary screens to demonstrated the three main user flows (1) exploring a local point of interest, (2) creating a personalized hunt, and (3) joining/playing a premade hunt.

low-fidelity.png


mid-fidelity wireframes.

With the low-fidelity wireframes, I now have a relatively good concept of how my I wanted my app to look like. Next, I transformed them into mid-fidelity wireframes using Balsamiq and Sketch. The new wireframes were still quick to develop; however, with better quality and more details. Interactive prototype using InVision was then created using the mid-fidelity wireframes to begin usability testing.  

mid-fidelity.png


usability testing.

I conducted 7 in-person usability tests over the course of 2 days on an iOS device. All 7 tests were recorded using QuickTime. All participants were over the age of 18 and have had experience with or expressed interest in mobile gaming apps. The usability test was essential for me to pinpoint the flaws and usability pain points in my design. Affinity mapping and rainbow spreadsheet methods were utilized to analyze my findings.

style guide.

Based off my usability test findings, I refined my wireframes and developed a series of high-fidelity wireframes using Sketch. During this process, I incorporated visual design principles, followed iOS Human Interface Guidelines, and developed a style guide/design language for my app. This is where styles and colors were added to theQUEST and ensure that my app is on par with iOS HIG standards. 

styleguide.png


peer review.

Using the high-fidelity wireframes, I created another interactive prototype via InVision to seek peer reviews and feedback. To accomplish this, I networked with other UX students via Slack to ask for assistance. I received valuable insights and suggestions that I believed led to several worthy design improvements.  

peer review.png


final design.

These high-fidelity wireframes represent the final design of my mobile app, theQUEST. The series of screens shown were used to build the InVision interactive prototype.