The Challenge: Create an app that encourages users to interact with the real world, develop relationships with their community, and have fun.
The Solution: A scavenger hunt that you can carry in your pocket.
Getting to Know the User
Finding the Competition
I wasn’t the first person to come up with the idea of an app-based scavenger hunt, which was to my benefit. Instead of trying to reinvent the wheel, I did some competitive analysis on some other scavenger hunt apps to determine general best practices as well as holes in the current market offerings. The results of this analysis gave me feedback to : to keep the types of clue simple, the UI clean, and to keep all functionality within a mobile app.
Interviewing Potential Users
So, now I knew what the competition was doing, but in order to create a unique app that would fulfill the needs of my users, I needed to find out more about them. I conducted a series of in-person interviews as well as sending out an online survey to gauge the level of interest and what features would be vital to the eventual user.
Analyzing Interviews & Surveys
It would be tempting to consider interviewing users the end of the “getting to know you” phase of our new relationship, but in truth it was only the beginning. In creating several affinity maps (one example below), I was able to synthesize my anecdotal experience into an analysis of the potential user that allowed me to design Tresor more effectively.
Designing for One User
To synthesize and focus the design, I created several user personas that I then referred to over the course of the design process. These personas encapsulate the core needs, desires, behaviors, and habits of my survey participants. By creating these personas, I had several, focused lenses through which to filter my design to make sure it was still hitting the marks of functionality.
A User’s Journey
From the persona, I created a user journey to help me visualize the subtasks my persona, Esme, might take while completing the overarching task of creating a scavenger hunt for her team.
User Journey becomes User Flow
The investment of time in designing the persona and journey just to get to a section of a sitemap might seem tedious, but it was necessary to create a site architecture that actually met the user’s needs, and not my perception of what users might need.
Time to Design!
Finally, it was time to start wireframing! Iterative design gives me the freedom to make mistakes on paper before spending hours building something in a design program. Below you’ll see the paper and pencil wireframes I made.
Before spending hours creating an app in a digital design app, I did a card sorting session online with a group of potential users. By having them organize various elements of the information architecture, I was able to make note of several weak points in the design and revise the sitemap.
By testing the functionality of the app at the mid-fidelity stage, I was able to make sure there weren’t catastrophic failures in my architecture with a swath of users before moving on to more polished User Interface design.
The rainbow spreadsheet allowed me to organize my findings from the interviews into quantitative measurements of success and/or failure and therefore prioritize which features to edit.
The Benefits of Iterative Design
Below you can see the scope of my iterative design. By using wireframing software like Balsamiq and design software like Google Drawings and Sketch, I was able to create several, simpler versions of each page before working polishing up the UI design. From back to front you can see the process of designing the “find a game” page from paper prototype to high-fidelity wireframe.
Design for All
Designing for accessibility is very close to my heart. After reading about methods of designing accessibly, I edited my design to be of better use to those with visual impairment, hearing impairment, and physical disability.
Feedback and Polishing
After each round of design, I solicited feedback. Through preference tests, A/B testing, user interviews, and online commenting through Invision, I have gained invaluable insight into the look, feel, and functionality of Tresor.
To check out Tresor’s clickable prototype click the button below or a video walkthrough of the most recent iteration of the design, see the buttons below!