Making

Playalong

In February 2014, Collaborative Fund approached us with a concept: “play” in our daily lives. They wanted to create a game that not only encouraged play, but also supported something meaningful and important. With our powers combined for the sake of doing good, PlayAlong was born.

Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie

The Brief

We’ve known the fine folks at Collaborative Fund for a while. They focus on supporting creative endeavors and encouraging collaborative consumption. They take on side projects occasionally as a fun way to express their brand around interesting topics and ideas. For their next project, they want focused on “play” in a way that would get people to do something creative, brave, fun or silly.

The initial game prototype. For each correct answer, Cookie Monster gets 1 cookie and 1 cent gets donated for children’s education.

Original Playalong Design Concept

At the beginning of our engagement, Collab Fund had secured a partnership with Sesame Workshop, the nonprofit education organization behind Sesame Street. Partly inspired by a similar game started in 2007 called FreeRice, we set out to create a game that was fun, insightful, and supported children’s literacy around the globe.

Design Concepting

With direction from Sesame Street, we set out to explore different ways to show the trivia questions and to gain points with different Sesame Street characters.

The new Playalong design

One initial version was to compose the page like a desk and have the trivia questions look like notecards.

Cutout Sesame Street Characters used for inspiration

One of the fun assets Sesame Street sent over to us as we were iterating on design: character vector art which they dubbed the “cut paper” style.

Getting Into Build

Like many of our projects, we built out the game in iterative stages. Once high level design decisions were mocked up in Photoshop, we focused on refining interactions in browser.

A part of the “surprise and delight” we injected into the design: have Cookie Monster throw cookies into the counter per correct response.

The Cookie Monster Animation

As launch date approached, we had to be judicious about what features we wanted to see by launch and what features we would save for later.

Re-visiting goals/intended outcomes helped with the gut-check that came with relegating certain ideas to some ver.2 down the road, while keeping the mission-critical ones for the initial release.

Craig Shapiro & Sebastien Park

Collaborative Fund

The Launch

What had started out as a small side project for the tech community had evolved into a bigger purpose: a game that could be enjoyable and education for all ages. The buzz we received on the first day of launch was phenomenal:

And the ensuing blog posts over the next few days...

Playalong press from Fast Company Exist
If you’re looking for a virtuous way to procrastinate today, check out PlayAlong, a simple trivia game that donates money to children’s education every time you get an answer right.

Adele Peters

Fastco.Exist

Playalong press from wondr
The Collaborative Fund and the Sesame Workshop teamed up to create an awesome new game called PlayAlong. The game asks users questions, with every right answer generating $0.01 for the Sesame Workshop on your behalf.

wondr

Analytics

While we loved the traffic spike over the first week, the best part for us was finding out engagement for the game: each user spent a whopping 5 minutes and 51 sections on the site per session. This showed us that users responded well to the interaction and content we spent crafting for weeks.

15,793

Correct answers within the first 12 hours

230

simultaneous active visitors on the first day

5:51

average session duration on the site

186

tweets about #playalong in the first week

The Takeaway

This was a fun and exciting opportunity to collaborate with an amazing group of people. Even with a completely remote team, we discovered that constant communication and transparency was the key to a successful launch. We got to experiment with SVG and CSS animations in a way that was totally appropriate and added to the game experience. We’re excited to work with Collaborative Fund in the future!

Finding the right team is really important. PlayAlong might not have otherwise been possible without the tremendous support and help we’ve received along the way.

Craig Shapiro & Sebastien Park

Collaborative Fund

The Team

  • Sebastien Park, Product Owner
    Sebastien
    Product Owner
  • Brooke Kao, UI Developer
    Brooke
    UI Developer
  • Emerson Taymor, Product Manager
    Emerson
    Product Manager
  • Nick Giancola, Software Engineer
    Guest Starring Nick
    Software Engineer