Welcome to a case study of the Collective app. In this case study I will walk you through the steps of the design thinking process that led to the development of this app.
The preliminary problem space for this project was to recreate a scavenger hunt style app.
Arising as a solution, the basic premise of Collective is to meet a user-identified desire to focus on creation over consumption. As the sole designer on the project, I utilized the UX process of research, testing, and iteration to map out the final designs.
Using Design Thinking
Collective is an app for the creative explorer, and it's an exploration of my own design thinking process. I approached the project with four major mindsets that flowed cyclicly in and out of each other: Observation, Ideation, Testing, and Iteration. Each phase consisted of several tasks which were used to inform and enlighten the discoveries and designs as they evolved.
Phase 1: Observe
COMPETITIVE ANALYSIS
I began the process by looking around to see what other scavenger hunt apps were available. Two trends emerged in how these apps were set up: one focusing on using geolocation to navigate to a hidden cache ("treasure hunt") and the other offering a set of clues and tasks that created an interactive experience.
I selected two of these apps, Geocaching and Actionbound, and completed a market comparison and SWOT analysis of their strengths, weaknesses, opportunities, and threats. The need for scavenger hunt creation on a mobile device stood out as a clear area of opportunity, and guided the direction for further user research.
Analyzing Geocaching and Actionbound for usability and areas of opportunity
USER RESEARCH
I conducted user interviews to help inform the existing mental models and familiar behaviors associated with the general concept of app-led scavenger hunting. Bulk post-it notes on Miro were an easy digital tool to use for affinity mapping exercises that helped me glean the major insights from the interviews.
Data gleaned from user interviews was sorted and organized using the Miro app.
USER PERSONAS
Considering my user interviews and broad target audience, I crafted two user personas that narrowed down on a more specific audience range for the app. These user personas involved one who was a constant traveler, looking to create content on the go, and the other who remained local but sought to explore her urban environment with friends.
User persona profiles help to give a personified perspective at each decision point, keeping the design human-centered.
USER JOURNEYS
The personas that I created then helped to identify the core tasks that the app would need to be able to provide in order to satisfy the identified target audience. I considered the personalities and needs of my user personas to determine what they would be trying to do, and how they would be engaged emotionally and mentally at each step.
The user journeys helped me to empathize with the emotional states, needed tasks, and thought patterns that would exist during the app's use.
Phase 2: Ideate
INFORMATION ARCHITECTURE
The initial IA for the app followed a fairly strict hierarchy, with the idea that a user would know which of the tasks they were intending to perform when they opened the app. Clicking on PLAY from the home page, for example, would result in a process that most quickly allowed a user to begin playing a hunt. Later on, as you'll see, this sitemap changed in response to user testing and feedback.
The sitemap that established Collective's information architecture.
LOW-FIDELITY WIREFRAMES
Preliminary sketches to begin visualizing user instances began with pen and paper. I tried to sketch as rapidly as possible, generating several ideas and styles. I drew out several versions before settling onto a flow that seemed capture the needs of my envisioned user journeys and tasks. On a the technical side of tools used, annotations and presentations were done on an iPad Pro using an Apple Pencil, Skitch, and Keynote.
Pen and paper sketches of core features within the Collective app.
MID-FIDELITY WIREFRAMES
As I began to transfer my hand drawn wireframes into a digital format, I used Miro, on an iPad, to develop mid-fidelity wireframes with basic forms, shapes, icons, and placeholders. I began to draw the connections between how a user would approach the app and interact with it, and where in the process they may need help or explanation in order to better understand what to do.
Orange arrows indicate the interactivity of the screens, how they are connected and work together to perform a function.
CLICKABLE PROTOTYPE
Throughout the iterative process of developing wireframes, I had mentally placed myself in the role of the user, trying to perceive how they would view the app: what they would want to see, what they would like to do. I knew I was too close to the project, however, and needed fresh eyes and new input. Using my mid-fidelity wireframes I created a clickable prototype using Marvel, and was eager to put the app into the hands of users and begin testing!
Mid-fidelity wireframe of a core feature: when users arrive at their destination, they can add a GIF of themselves to a 360 pic.
Phase 3: Test
TEST SCRIPT and USER TESTING
Testing involved the development of a complete test script, then conducting 6 in-person user tests. I used the screen recorder on the test phone to capture the audio and touch points of each of the users. The testing was driven by specific objectives aimed at gauging the overall learnability and functionality of the design to this point.
Overview of the test objectives, methodology, and results.
TEST ANALYSIS
After conducting the tests, I analyzed the data using Affinity Mapping and a Rainbow Spreadsheet tool. In the Affinity Mapping process, I assigned a post-it note color to each participant, gleaned the screen recordings for insights and quotations, then grouped these into categories. In the Errors category, I assigned severity levels to help prioritize the order in which I began to make adjustments to the app, with 4 being the most critical and 1 being the least.
The Rainbow Spreadsheet offers an easy "quick glance" at issues that were consistent versus those that were less problematic.
RECOMMENDATIONS
After analysis, I wrote a final test report that summarized conclusions and made recommendations for priority adjustments before beginning to work on the visual design. Here are the recommendations for changes as they were presented in conjunction with the test results:
Phase 4: Iterate
HIGH-FIDELITY PROTOTYPE
Equipped with a collection of user feedback and priority adjustments to make on the app design, I moved to a stronger design tool, Figma, to develop high-fidelity wireframes and begin exploring the application of visual design principles.
The high-fidelity prototype went through several iterations as I worked to establish the design language system.
As I began to transfer my work up to this point, I realized the need to significantly rework my initial IA for the app. I removed the assumption that users would encounter the app with a known task in mind, and tried to create a more seamless flow that would guide a user through the steps of hunt creation with as little friction as possible.
Before and after site maps, reflecting reduced options from the home page and a more streamlined edit mode.
COLLABORATIVE DESIGN
After developing the high-fidelity prototype, I shared the Figma link with three peer designers who offered comments and feedback. Filtering through their comments, I identified the priority changes to implement as they related to overall visual design, learnability, and reduction of friction in user behavior.
Before and after shots of screens that apply the suggestions offered by peer reviewers.
ITERATIVE PROCESS
Taking a closer look at the login screen for the app, the evolution of the design through an iterative process becomes distinctly evident. At each phase, feedback through user testing or peer review informed decisions to improve different aspects, from the overarching flow of the process to the visual design as it adhered to accessibility standards.
This next piece I call, "Iterations on a Home Screen". After multiple tests and feedback sessions, it became clear that offering choices on the first screen created friction in user behavior. The best approach would be to drop them immediately into their current surroundings and show what was available nearby.
One final example of the design thinking process in action is evident with the About Hunt screen. The changes that took place here are primarily a reflection of visual design principles being utilized to clearly communicate information and indicate possible actions to the user.
An Ongoing Process
As Collective continues to develop and receive feedback, it will continue to adapt and evolve. Additional features to design would be the GIF creation feature and AI elements that could predict a user's interests, helping them to create a hunt more efficiently. Furthermore, the profile section where users could view their collections, check overall scores, and compete within a community could be designed as well.