Playground: A Portfolio Case Study

Designing for behavior change: encouraging people to spend more time outside

Introduction and Background

Isha Kumar, Rose Li , Katherine Gjertsen (me), & Jenny Han and we made Playground for mobile

is for you to (safely) go outside more often

Researching, Interviewing, Analyzing, Brainstorming, Iterating, Designing, and Prototyping to create a platform that encourages users to spend more time outside

I. Problem and User Research

To understand our problem, we conducted an initial baseline study to understand the existing behavior of a broad range of people. We initially reached out to our friends and family and after a brief screening process, we began the study with 14 motivated participants. Due to the timeline of the class, we only conducted a 5-day study and supplemented the diary data with interviews. For 5 days, our participants logged any time that they went outside. We asked participants to track various details such as the duration of outside time and what they did.

From the baseline study, we analyzed the participants’ responses and aggregated our user’s experiences into nine different personas to better segment our target audience. We used data gathered from participant interviews and our 5-day baseline study. We noticed some interesting patterns in our data, such as a tendency for social influences to be a core motivator to increase outdoor time for many participants.

Three examples of our personas that were gathered

To gain greater insights into specific personas, we constructed journey maps that focused on our participants’ emotions and motivations over the 5-day study period. We tracked daily behavior (number of instances outside & activity completed), thoughts and feelings that are represented by direct quotes from our participant, and touchpoints and motivators that reflected our behavioral analyses.

Journey map for the “social wanderer” persona

Our personas and journey maps showed us that social motivation was one of the most common motivators for our users. Specifically, users enjoyed spending time with others and thought it was easier to think of something to do outside when other people are involved. (See “Personas and Journey Maps for Outdoor Engagement” for a more detailed description).

After finishing our baseline study, conducting interviews, and aggregating our data and observations, we further explored the topic of engaging with the outdoors by completing a literature review of current scientific research and comparative research on existing apps and sites.

Analysis of existing comparators

We were able to make two big conclusions that would influence the next steps in our design process:

  • Scientific outdoor recommendations: going outside increases well-being and researchers suggest that we need at least 120 minutes/week to experience the benefits
  • Outdoor apps for niche populations: currently, the majority of outdoor focused apps and services focus on very niche populations, such as Strava for those already experienced in the outdoors or PokémonGo for those who already have an interest in the Pokémon world.

We saw a place in the market for our version of an outdoor engagement platform. We decided that our goal would be to create a platform for people to build a small habit to engage with the outdoors and enjoy a little fresh air each day. After deciding that we would be designing for participants that we labeled as “work-from-home-aholics” or “social wanderer” personas, we ended up moving forward with twelve of our original fourteen participants who fell under that criteria. Our goal was to test the effectiveness of daily nudges/prompts as a motivator to go outside. We constructed a chatbot that asked each participant to schedule their own alarms/reminders in their phone to go outside for at least 3 minutes at the start of the study. From there, we pinged our participants each night to check if they completed the daily 3-minute goal and if they used their reminder to do so.

Our chatbot!

Our participants went outside 76% of the days we asked them to log and adhered to their alarms 63% of the time. In follow-up interviews, we learned that most of our participants did not find the alarms effective. We also synthesized our post-intervention interviews to the following insights:

  • Users wanted a reason to go outside for 3 minutes
  • Users wanted social accountability rather than personal reminders
  • Some users had external factors that made going outside difficult (i.e. bad weather zones)

You can read our full write-up on the intervention study we conducted here.

Our research all pointed to very clear next steps: we needed to create a platform where users are accountable to something or someone external to themselves. With this clear goal in mind, we were able to confidently begin the next step of our design process.

II. Brainstorming and Ideating

Based on the learnings from the data we collected via our intervention study and post-intervention interviews, we came up with the following 34 ideas (generated separately, then evaluated together 😉). We organized our ideas in two different iterations of chunking (first by “timeline,” then by the general theme).

Initial ideas, grouped by general theme

We then narrowed down our top ten ideas from the ✨ marked rows and sketched them out to flesh them out further. Here are 10 sketches of possible directions for our prototype:

10 sketches from our top 10 ideas from the brainstorming session

The sketches helped us converge on an initial direction for our first prototype. We decided to develop a lo-fi prototype that focuses on leveraging social motivation to go outside and enables greater transparency around tracking users’ “progress.” The following screens show the weekly progress tracker, a user’s ability to choose an individual or social weekly goal, and two blobs reuniting that leverages social motivation:

Three screens from the initial lo-fi prototype

In order to further understand our users’ motivations, we decided to create storyboards and wireflows that focused on the prototype goal of social motivation and transparency. The storyboard focuses on the “Product as Hero” which highlights our product helping a user fix a problem. I made the following storyboard about a user referred to as “Social Wanderer” who is motivated to go outside in order to take care of her avatar.

Storyboard for the Team Refresh’s outdoor app (template from “Storyboards Help Visualize UX Ideas” by Rachel Krause)

Upon completing the storyboard, I reviewed the structure with one of our interviewees who strongly influenced our “social wanderer” persona. She shared that although the avatar is motivating, she would be most sustainably motivated by connecting with other friends on the app. This feedback inspired us to incorporate a social networking element into our platform for users to connect with their friends. After creating an initial task flow to visualize the various ideas, I was able to translate the chart into a low-fidelity wireflow sketch. The wireflow included additional options for external social connection.

Initial task flow (left) translated into an initial wireflow (right)

III. Designing and Prototyping

After we created the outline for the initial functionality of our prototype, we shifted to ideating how we wanted our platform to look and feel. We created an initial mood board, collecting photos, ideas, and words that conveyed the feeling we wanted to leave our users with:

Our team’s initial mood board to represent the color/feel
feeling words that we wanted to associate with our brand

After we finished the mood board and our brand’s feeling words, each team member created an individual style tile. We then collaborated to combine our individual style tiles and decided on different aspects of our look, including our colors, typography, buttons, iconography, and illustration sets.

Team Refresh’s final style tile

For the next stage of the design process, we identified and divided the tasks between each team member so we could begin an efficient design process:

  • [Isha] Onboarding
  • [Rose] Update your profile
  • [Jenny] Beep your friend and post-adventure notifications
  • [Katherine] Idea generator (recommend 3 random activities)

I first created a task flow to illustrate the different components of the task and then translated the flow into lo-fi “sketchy screens”:

Task flow (left) and sketchy screens (right)

I then converted my sketchy screens to mockups that would be combined with the rest of my group’s work to create a clickable prototype

Mockups that I designed for the random idea generator

We combined each of our designs and refined a few of our screens to make one coherent prototype to prepare for our usability testing. At this point, we also decided to include a widget screen that gives users direct access to their weekly progress. Our clickable prototype can be accessed on Figma here. Our usability script can be accessed here.

We were grateful to have two of our classmates participate in a usability test and we received awesome feedback. After receiving feedback from our usability tests, we were able to identify a couple of important insights: our “novel metaphors” needed more context and we needed more transparent methods of tracking.

In the case of the novel metaphors, we did include onboarding screens, however, we didn’t explain enough about how our app functions. The learning is that we need to explain more about what the playground actually is: the home screen playground operates as a “friends view” and not a map that shows the location of friends. We also determined that we need to address the purpose of the grey/fading blobs and make it clear that the color reflects the blob’s “health” or the amount of time spent outside.

Secondly, we received feedback that our users want to track progress more precisely. We are currently utilizing a bar chart to visualize time spent outside, however, we have decided to implement a progress bar.

To address the precision in the tracking function, we added a few onboarding tweaks that allow users to clearly set their own goals as well as a widget visual that shows clearer progress towards that goal. We chose to display clearer progress on the widget because the user interacts with the home screen more frequently. Finally, we made all features of a “fading” blob transparent so the shift to grey didn’t just look like a new healthy blob’s chosen color.

Our final design updates based on feedback from usability testing

Given that we researched, ideated, designed, and prototyped in the course of a 10 week quarter, there were some problems and fixes that we did not have time to fully implement. Here is a list of our top five future dreams:

  • sharing pictures of adventures: as our professor, Christina Wodtke, mentioned during our final presentation, facilitating a social network on a given platform is extremely valuable. Because sharing is a great path to social behavior, we would want users to be able to take pictures of the things they are doing outside and share them with their friends
  • personalized activity suggestions: currently, we have an idea generator that randomly suggests three outdoor activities that we came up with. In a future iteration, the dream would be to generate activity suggestions based on a user’s interests, access to certain items, and physical and environmental ability. This will help make our platform more inclusive and exciting for all users
  • clearer onboarding: when the user first signs up for our app, we take them through a series of screens that explain how different components of our platform work. In a future iteration, it would be helpful to include a tutorial that walks a user through each part of the app after the sign-up onboarding screens
  • privacy settings: currently, our mechanism for tracking outside time solely relies on the user’s agreement to share their location. In the future, we need to implement an alternative way for users to manually track outside time so they do not feel forced into a privacy setting that they are not comfortable with
  • increase control over friends list: currently we allow users to freely add friends from their contact list. However, we have not implemented any privacy settings that allow users the choice to accept or deny an added friend. We also have no mechanism for blocking friends. This change would help increase user privacy

Conclusion

This was an amazing quarter of learning the intricacies and intersections of behavior change and design. I was so grateful to work with such an incredible team — I learned so much from Isha, Rose, and Jenny this quarter and am lucky to have gained three new great friends during this journey. They exposed me to many new design tools and methods for collaboration that I am excited to take with me in the next chapter of my human-computer interaction journey!

I also want to thank the teaching team for all of their hard work, helpful feedback, and care during this quarter. Designing Playground was such a rewarding experience and we couldn’t have done it without you!

stanford symsys & hci