Helping behavioral scientists create Behavior Change for Good

A case study detailing the design of two digital research platforms

When Behavior Change for Good, a program born out of the Wharton School at the University of Pennsylvania, reached out to see if I’d design their two debut platforms, I was ecstatic. You may have heard about Behavior Change for Good (or BCFG, as we called it) on Freakanomics Radio. Or you may have read the book Grit by Angela Duckworth, who is a co-founder of the initiative.

BCFG’s goal is to help people create change for good through science-backed programs. Here’s what they’re about, in their own words:

For the first time, a world-class team of scientific experts will be able to continually test and improve a behavior change program by seamlessly incorporating the latest insights from their research into massive random-assignment experiments. Their interactive digital platform seeks to improve daily health, education, and savings decisions of millions.

The “interactive digital platform” part is where I come in. Behavioral scientists around the world would test their theories on a digital experimentation platform I’d design, and help people live better lives in the process.

The goals of their first two platforms were to answer “how can we help students achieve better grades?” and “how can we help people form lasting exercise habits?” Called LevelUp and StepUp, their debut platforms would test scientists’ hypothesis in these areas.


Our first project: LevelUp

The first challenge was to design a visual style for BCFG’s academic platform, LevelUp. I began the way I do with every project: by trying to understand the users and the goals of the product. I interviewed the team about the students’ demographics, reviewed the team’s early prototypes, and used their beta product to familiarize myself with the platform. Then, I began to design.

Style Option 1

Brand and design inspiration examples for Option 1

With the first style approach I wanted users to perceive the brand as slick, tech-savvy, and cool. I wanted to convey to students that the product wasn’t a lame tool they had to use, but a cool, entertaining computer program. Inspiration for this approach came from brands like Playstation and Spotify. The design themes were gradients, cooler colors, and a mix of overlapping shapes.

Style tiles for Option 1

To present each style option I began with mood boards and style tiles. I followed these with an example splash screen to help the team visualize the styles in the context of the product. This initial design uses random shapes, cool-colored gradients, and high-contrast text.

An example welcome screen for Option 1

Style Option 2

Brand and design inspiration examples for Option 2

The second style approach was warm, optimistic, and friendly. I wanted it to be clear that the platform is easy to use, helpful, and aspirational. Inspiration came from experiences like Disney and the beach, and the design elements included tropical colors and playful illustrations.

Style tiles for Option 2

The elements in the mood board and style tiles above appear in the welcome splash screen below.

An example welcome screen for Option 2

Style Option 3

Inspiration for Option 3

For the third style approach I focused on being clean, playful, and quirky. This approach communicated “LevelUp is something new for students, and it’s fun and easy to use.” Brand inspirations included Nintendo and Aeropostale. The design elements used were serif fonts, bright colors, and playful patterns.

Style tiles for Option 3

You can see these style elements brought into an example welcome screen below.

Final style

As is sometimes the case, the response to seeing the three designs was “we want a combination of them all.” (Other designers will appreciate the challenges this response can sometimes create).

Further discussion with the team revealed that LevelUp should seem cool, but still feel like an academic tool. It shouldn’t be too friendly or silly, but should have some playful elements mixed in to lighten things up.

For the final style, we settled on a color scheme of blues, grays, and greens. The typography combined both serif and sans-serif fonts. Overlapping circles and energetic illustrations added energy and playfulness to the design.

The first screen of the final design for the LevelUp experience.

Once we agreed on the design direction, I focused on implementing our new style in code. I created a custom theme for Qualtrics, the platform driving LevelUp. Working with Qualtrics developers, I wrote extensive CSS to bring LevelUp’s branding into their platform.

Additional screens for LevelUp in Qualtrics

I would be amiss if I didn’t also give a shout-out to Tatiana Bischak, who created a series of lovely illustrations and icons for the project.

Work by Tatiana Bischak for Behavior Change for Good

Our second project: StepUp

Once LevelUp launched, the next challenge was to create a design for StepUp. StepUp, like LevelUp, is a platform for behavior scientists to research different ways of helping people. BCFG created StepUp in partnership with 24 Hour Fitness, one of the largest gyms in America. The goal of the project is to understand what will help people improve their exercise habits.

The launch timeline for StepUp was much faster than LevelUp, so there was less initial exploration of style approaches. Instead, I went with a mobile-first approach and created three different versions of the marketing site’s mobile homepage.

Style Option 1

The goal of this style was to convey confidence, high-energy, and trustworthiness. The primary color scheme was navy, gray and white, to give a feeling of authority, accented by bright teal and sea-foam green, to add pops of energy. It incorporated both serif and sans-serif fonts to emphasize both professionalism and friendliness. An image of a smiling woman in athletic gear supported the approachable and aspirational feel of the design. This imagery was also paired with playful stylized icons to further create a sense of energy and fun.

Style Option 1 for StepUp

Style Option 2

This style was similar in typography and layout, but had more of a “powered by technology and science” vibe to it. To that end, I incorporated bright gradients, and an illustration of an atom symbol.

Style Option 2 for StepUp

Style Option 3

This third approach hit the nail on the head. It incorporated the “science-backed” feel of the second option, which the team loved. Rather than using cool colors, it incorporated a friendlier yellow and orange. The team loved this design.

Style Option 3 for StepUp

Once the mobile design for the homepage was finalized, I designed and built several additional responsive screens for the marketing website, and created an additional custom Qualtrics theme for this program.

Additional screens for the StepUp website

In the end, the team at Behavior Change for Good were thrilled with our results. To quote from a client email:

Thank you ALL for the incredible work you did to get these designs over the finish line before holiday break. They truly look *gorgeous*! They will be an amazing gift to our research team! … THANK YOU again! You guys are incredible! I am really excited to see all of this extraordinary work pay off in one of the largest scientific studies ever run — it’s truly going to be historic AND beautiful. Wow!

Thank you for checking out this case study! You can see more of my work on my website, owltastic.com, or my Dribbble profile, or my Behance profile. You can email me about working together at contact@owltastic.com. You can also follow me on Twitter, Instagram, or Facebook. Have a great day!