designing playground, for mobile

a portfolio case study for CS247B: Design for Behavior Change

Rose Li
13 min readMar 20, 2021
Inspired by this storytale.io illustration set

Project background

Team (refresh!)

Over the course of 10 weeks (January to March 2021), I worked on this project — and became friends — with Isha Kumar, Jenny Han, and Katherine Gjertsen.

Our goal

At the start of the quarter, we were tasked with one goal: identify a behavior to change, and design a solution to change it.

The outcome

Together, we designed playground — the newest, hottest, funnest, awesomest social-network mobile app aimed at getting you to intentionally spend more time outside.

Phase I: Discovery

Generative research methods we used: baseline diary study (5 days), intervention study (5 days), and post-baseline and post-intervention user interviews

→ Choosing a problem space

When was the last time you went outside?

Boom point made

Ok in all seriousness, we chose this problem space largely because it was one which we already strongly empathized with — we’re all cooped up inside, and not getting fresh air can really drive you bonkers. So, we thought that focusing on how we might get people to intentionally spend more time outside would be a worthy behavior for us to exert our energy trying to change.

→ Launching a baseline diary study

About the study…

We recruited 14 of our closest friends and family to participate in our baseline diary study. Though this was a rather “convenient” sample, it allowed us to diversify our initial demographic of possible users (by gender, race, age, geographic location, and digital savviness), which we thought would be important in gaining a broad understanding of different people’s behavioral ecosystems at this stage.

Over a period of 5 days, we asked our participants to log each time they went outside. Since we wanted to focus on understanding people’s behaviors when they were *intentionally* going outside, we asked them to log only when they were outside for an interval of 2+ minutes (to account for edge cases like walking to the car).

What we learned…

(1) Defining personas

After conducting follow-up interviews with our baseline diary study participants, we created 9 (NINE!) different personas. To identify our target personas, we focused on finding patterns in users’ motivations, challenges, and existing behaviors — we realized that along these dimensions, we’d actually found some interesting trends among our set of participants. In particular, our WFH-aholic and social homebody personas largely captured the core motivations / conflicts to resolve that we heard from our interviewees.

[User interviews] Two target user personas we decided to focus on designing our solution for

(2) Understanding our users’ journeys

We also created journey maps to synthesize our findings from users’ diary study logs + post-baseline interviews. These journey maps helped a lot with clarifying our personas’ outdoor behavioral ecosystems — in particular, we were amazed at how clearly the intersection of motivation and ability aligned with peak time spent outside, and the table allowed us to evaluate the quantitative and qualitative data we collected all in one place.

[User interviews] “Going outside” journey map I created (for the “crunchy chiller” persona)

You can read our full writeup on defining user personas and constructing journey maps here!

→ Conducting secondary research

We created a “database” (i.e., Google Sheet) during our secondary research review — we read academic studies about the health benefits of spending time outside, media articles covering trends in people’s time spent outside over time, and explored several comparator products in the overall landscape. You can read our secondary research writeup here!

Key findings: insights that stuck with us as we moved forward

  • [literature review] Researchers recommend spending at least 120 min/week outside for health benefits derived from more vitamin D and fresh air (source)
  • [comparator analysis] Most existing products focused on serving users who were already inclined to go outside. For example, BirdsEye is an app targeting bird watchers, while Strava is a movement tracking app for avid bikers. In considering the implications of this for our solution, we saw an opportunity to design a tool for those who want to take small steps (re: tiny habits) to spend more time outside.
[Comparators] 2x2 comparator matrix to map out the “get you outside” product landscape

→ Running an intervention study

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

With our intervention, we wanted to test our hypothesis around the efficacy of notifications as nudges / context prompts. We had a bit of attrition from our baseline diary study, so we conducted our intervention study with the remaining 12 participants. Since our intervention study was primarily intended to help us answer the question of whether notifications work as effective nudges, the main metric we were concerned with was the conversion rate — that is, how often do users actually adhere to the reminders they set, and follow through with going outside?

We used our Twilio chatbot to help us with these end-of-day check-ins, aggregated the data, and found that our participants went outside 76% of the days we asked them to log and adhered to their reminders 63% of the time.

[Intervention study] Example check-in message from our chatbot

It was pretty clear from both the data and our post-intervention interviews that notifications alone aren’t enough — going outside (in the winter, during a pandemic) requires a lot of activation energy!

But we also wanted to better understand why it required so much activation energy — for an audience who explicitly expresses their desires to get more fresh air and “be healthy,” why was it hard for them to actually change their behavior?

We were amazed to realize…

Insight about users’ challenge: These people want to spend more time outside after being cooped up all day, but have trouble overcoming the innate inertia of actually mobilizing to do it. When prompted by the reminders, users would often just dismiss them because they had “nothing to do” and “no reason” to go outside. With notifications alone, the act of going outside felt too contrived.

Insight about how they overcome this challenge: Friends! We found that when these users do go outside, friends are often the source of the activation energy needed to get their butts out of the chair and out the door.

“Wenn man einen Freund hat, braucht man sich vor nichts zu fürchten.” — Oh, wie schön ist Panama by Janosch

This got us thinking about how we might leverage social accountability to reinforce users’ internal motivations — and, from more of a market standpoint, how social elements might even allow us to generate organic growth via network effects (e.g., the massive hype around Pokémon GO that we analyzed during our comparator research review).

Phase II: Ideation

→ Brainstorming

Diverging

First, we freelisted 34 ideas on a Mural board. We then went through a couple of iterations of chunking (first by “timeline,” then by general theme).

[Brainstorming] Freelisting 34 ideas with affinity chunking!

After freelisting and chunking, we created the following concept sketches of our top 10 ideas:

[Brainstorming] Concept sketches of top 10 ideas

Converging on a fundamental concept

Finally, to coalesce on a concept for our solution, we developed a (very low-fi) concept prototype that 1) leverages social motivation via a collection mechanic tied to time spent outside (screen 1 and 3 below) and 2) enables greater transparency around tracking users’ “progress” (screen 2 below).

[Concept Prototype] Collection mechanic to motivate users to go outside (with special blob characters for social outdoor activity)

→ Storyboards & wireflows

Once we had a general idea of the core concept, we needed to flesh out the mechanics and more clearly think through how these mechanisms would create the intended dynamics (i.e., getting people to go outside more).

We started by thinking about how our solution might fit into the user’s life.

[Storyboarding] Product-as-Hero storyboard I (poorly) sketched - how our solution adds value to the user’s life

Upon reflecting on our concept prototype, we realized that we needed a more effective way of incorporating social accountability into our app — specifically, instead of just being able to unlock “special blob characters” for spending time outside with friends, we thought it might be more effective if friends could actually nudge each other to go outside (mimicking real-life interactions).

Since we’d discovered that friends are the source of activation energy needed to mobilize and go outside (from our post-intervention interviews), this seemed like a more promising behavior change mechanism. With our wireflows, we explored a few possible directions for how we might strengthen this social accountability dimension within our solution.

Inspired by this video our instructor Christina Wodtke shared with us, I came up with the idea of using a “playground” social-networking concept to build a social layer onto our solution. I created the wireflow below to test out how we might design this, in addition to the collection mechanic we’d already defined, to be the backbone of the social accountability our solution needed.

[Wireframing] Low-fi wireflow I created to test out the “playground” social network concept as a channel for social accountability

You can read my full write-up on this step of the design process here :)

Phase III: Design / Prototype

→ Mood board and style tiles

If our app was a person, its favorite snack and beverage would be frozen chicken tenders (but the vegetarian kind, like Morning Star) and a vodka on the rocks. And it would consume this while sitting outside, obviously.

We had a lot of fun designing our brand—to learn more about how we decided the visual expression of our app, you can read our branding writeup here. We created a mood board together, individually designed style tiles, and lastly, converged on a final style tile for the design of our app.

[Emotions] First, we came up with these words describing the feelings we want our app to evoke in our users
[Mood Board] After aligning on the feelings we wanted to evoke, we created this mood board as a team
[Style Tile] Individually designed style tile
[Style Tile] Final style tile (note: not in the linked writeup bc we iterated while designing our mockup screens)

→ Task flows and sketchy screens

Now armed with our finalized style tile, we each tackled one of the 4 following core task flows:

  1. [Isha] Onboarding (sign up and add friends)
  2. [Rose] Customize my profile (change nickname and blob character)
  3. [Jenny] Friend-to-friend nudges (sending a beep and receiving a beep)
  4. [Katherine] Idea generator (recommendations for activities to do outside)

In anticipation of designing mockups for usability testing, we also created some sketchy screens to communicate possible screen designs for our respective task flows.

[Sketchy Screens] Low-fi screens I designed for the “customize my profile” task flow

→ Mockups and clickable prototype

After bringing our sketchy screens together, we thought through how the overall app might be designed, and we produced some mockups.

I designed the playground view, nav bar, profile view, and customization features within the user profile.

[Mockup] Core mockups I created for the “customize your profile” task flow

Then, we brought our individually designed task flow mockups together, and wired our Figma screens together to produce a clickable prototype for usability testing. We introduced the widget at this stage — we thought it might 1) enable users to more easily visualize their weekly progress and 2) serve as a more organic nudge to go outside, given the widget’s placement on the user’s home screen.

[Mockups] Linked mockups of our prototype in Figma

You can check out our clickable Figma prototype here and read our full writeup with the usability testing script here :)

→ Usability testing + feedback

We’ve come a long way. Finally, we were able to do some evaluative research!

We conducted 2 usability tests for our clickable prototype and heard a lot of great feedback from our testers. Most of the usability feedback we received revolved around the onboarding process — since our app’s functionality relied on novel metaphors like the “playground” and “blobs fading,” users felt like the new user onboarding flow didn’t offer enough context for how to actually use the app. We heard:

“J-Dawg’s blob is fading…? What does “fading” mean?”

“I thought the grey was just part of the color scheme — I didn’t realize that meant the blob was fading”

“Oh the idea generator is this thing down here?”

“Where does the blob health come from?”

“What does the “playground” mean?”

“What are the “weekly goals”?”

“Maybe I just misunderstood what the app’s purpose was”

Final design changes

To address our usability feedback, we made 2 key changes to our prototype:

  1. Onboarding process: clarifications to help define the playground metaphors, and added functionality to personalize the user’s weekly outside goal (default is still set to 120 minutes/week per our secondary research findings, but we wanted to enable users to set their own, personal goals)
  2. Widget progress tracker: visualizing progress with a slide — measures progress as a proportion of the user’s weekly goal (as opposed to a standalone figure). Plus isn’t it so playful :’)
[Usability Changes] Onboarding tweaks (personalized goal-setting) and widget progress tracker

10 other changes I would make if we had more time

  1. Personalized activity recommendations based on ability: if we had more time, I’d want to prioritize greater considerations of accessibility in the context of physical disabilities and external factors like inclement weather
  2. Location-based activity recommendations: our app already uses geo-fencing to detect when users are outside, so it would be dope if we could design location-based recommendations for outdoor activities (e.g., local hikes, parks, etc.)
  3. Location-sharing with friends (with consent): this idea actually came from a comment in our usability test — given that our playground view already displays blobs, you could imagine that something similar to Snapchat’s “Snap Map” feature might make sense here. This way, the playground view would enable users to see not only which of their friends’ blobs are “unhealthy,” but also where they are. Maybe finding a nearby friend to do something outside with is an adjacent use case of our solution!
  4. Media sharing of outdoor ventures: since users are already able to see which of their friends have tried certain activity recommendations, it would be a natural extension of our pseudo-social network to allow users to actually share photos / videos of what they did when they were outside. Adjacent to this, we might enable commenting / likes as a mechanism to drive even greater motivation to get outdoors
  5. Design your own blob: people love customization. Our usability testers really liked that you could customize your blob’s nickname, as well as the color AND shape of your blob character. Being able to actually design your own blob might empower more creative expression and make our app even stickier
  6. Browse activity recommendations: in addition to our random idea generator, users might want to be able to browse through a collection of (possibly personalized) recommendations for activities to do outside.
  7. Save activity recommendations: users might want to save a wishlist of activities to try later! Though our recommendations feature currently just randomly generates ideas (that disappear once you refresh), it would make the most sense for users to be able to keep track of these activities in the app itself
  8. Share activities / recommendations with friends outside the app: if we were to expand on our idea generator, I’d love to redesign the activity recommendations so that users can share activities to try with their friends (maybe also include more interesting content so that they’re actually motivated to do this — I honestly can’t imagine anyone sending their friend a text being like “look at this activity we can do outside, we can *find something blue*!!!”)
  9. Change weekly goals after onboarding: frankly, the current state of our app doesn’t give users enough flexibility — we are dynamic humans, and I know that at least my own preferences can change on a week-to-week basis! (let’s be real, it changes like actually every second. I’m incredibly volatile)
  10. Privacy settings: since we focused on strong ties for the MVP, we didn’t really pay much attention to whether users would feel comfortable sharing their outdoor activity with their friends. However, if we were to scale this app, it would become more important for users to selectively share their information with their friends on the app (e.g., weekly activity logs, activities they’ve tried, etc.)

Conclusion

Gosh, what a quarter. We learned a lot about behavior change, the design process, and ourselves.

If we had more time to work on another iteration of prototype, I would have wanted to implement more robust changes to address the usability feedback we received. To be honest, I think our usability feedback may have been slightly skewed by the fact that our testers were our peers, who were fully aware that we were in week 9 and nowhere near having the capacity to implement larger changes. Otherwise, I suspect that we would have gotten more rigorous feedback in terms of how users might be using our solution to actually go outside more. Also, our usability testers were fully just not our target users — one is on the track team, and the other is a soccer fanatic, both of whom already spend a decent amount of time outside.

So, if we were to implement these changes, it would definitely be valuable to conduct future usability tests with less biased users who fit our target persona.

Overall though, it was still a useful exercise, and I really appreciate having had the space + opportunity to explore design for behavior change in this context. Shoutout to the teaching team for their support throughout this process! Buddha bless and get the frick out(side)!

--

--