BrainPOP
Family
The Challenge
In the spring of 2020, educators and families were sounding the alarm about students falling behind academically. Schools had been closed for months and they were struggling to engage students in remote learning.
BrainPOP had been offering free access to their educational products since the start of the pandemic. They offered a product for families, but it was essentially the same as their classroom product. It wasn’t designed for the unique needs of families, let alone their needs during a pandemic. With summer on the way and free access expiring, BrainPOP saw an opportunity to convert these families into paid subscribers.
A team of researchers, designers, and education experts conducted a research sprint to explore the situation and potential solutions. They found that families were concerned about learning loss and the summer slide. They needed an engaging experience that children would use independently at home. It needed to be personalized to their academic goals and let parents easily see their progress.
That team also proposed many exciting ideas, but with less than two months until the end of the school year, BrainPOP had to act quickly. They needed a compelling product to offer families before their free access ended.
A new product team was formed and I was asked to be the UX designer. We had just five weeks to launch, too many ambitious ideas, significant technical debt, and a complex product ecosystem.
Despite the challenges, this became my favorite project at BrainPOP. The constraints forced us to adapt and collaborate like never before. We used new tools and processes, managed risk, and made tough decisions to launch a successful MVP.
Defining the Scope
I began by reviewing the findings and recommendations from the research sprint. There were several interesting ideas, but I knew they would take too long to build.
At the time, BrainPOP was 20 years old. Their site had gone through many iterations, but it had also grown in complexity and became difficult to update.
I discussed this with colleagues across the company, including my product team and representatives from other departments. We had a narrow window of opportunity, so instead of missing it, we decided to cut corners, focus on the highest priorities, and risk launching an under-tested product.
I worked closely with our product manager, Kim Blackman, to limit the scope to an MVP we could release on time. We identified user stories that were essential for launch and sorted the rest.
Design
The research sprint team collaborated and documented their work in Miro, an online whiteboard. While I didn’t have much experience with it, I saw its potential for streamlining our workflow.
I started working on their whiteboard and encouraged my colleagues to do the same. This built a complete picture of our design process and, even though the design tools were limited, allowed me to quickly iterate with full transparency to the team.
To save time, I collaged and built on screenshots from existing designs. These mid-fidelity wireframes combined elements from BrainPOP’s classroom product, mockups developed during the research sprint, and new components I designed in Miro.
As I refined the wireframes, Tanya Roitman started on high-fidelity designs and illustrations. Once the core experience was set, I took on some of her workload, including designing the Settings and My Badges pages.
I also created diagrams of user flows and logic. The existing experience wasn’t documented well, so I asked a QA Engineer to create several test accounts for me. I thoroughly reviewed all Family user flows and identified what should be reused, updated, or removed.
Development
BrainPOP had made progress in reducing its technical debt, but the development team still consistently faced challenges. It was a major concern, given our tight schedule, so I advocated for designs that would be simpler to build. That meant designing layouts and components to scale with content and screen sizes, while minimizing the use of variants and simplifying logic.
The development team also changed their workflow and built the Family product with Storybook, an interactive directory for our UI components. It was an opportunity to start fresh, so they decided to rebuild many existing components with Vue.
Since these would eventually be used site-wide, I worked closely with our front-end developers to ensure they were built accurately. However, recent updates broke our style guide site, so I also had to redefine the specs for several components.
Research & Validation
The research sprint produced several directions for the Family product, but hadn’t proven which, if any, would engage and motivate students. All of the ideas directed students through a curated selection of grade-appropriate content and gamified the experience. However, some of them were quite elaborate. We ended up choosing the most feasible option for curating content, but the game mechanics seemed confusing.
Our team’s game designer, Brendon Trombley, proposed a framework for tracking and incentivizing a student’s progress toward “mastering” a subject area. There were several forms it could take, but we couldn’t settle on one.
This became our top priority for testing, because it was essential that we encourage independent use of the product. Tanya mocked-up the options, while I helped our researchers create a research plan.
The research team conducted remote testing sessions with several children, but the results weren’t conclusive. They had trouble recruiting participants and we didn’t have time to gather more data. It was uncomfortable, but we had to stop deliberating and take a leap. We chose a system of earning “checks” from every activity and rewarding progress with themed “badges” based on how the checks were earned.
We tested the product internally and shared it with friends and family a week before the official launch. They helped us find minor bugs and didn’t raise issues with the game mechanics, but we planned to conduct more research after it launched.
2x Growth
We successfully launched BrainPOP Family at the beginning of June, 2020. With the help of the marketing team, we met our goal for converting free trial users and saw a 117% increase in Family subscriptions.
We also met most of our goals for the user experience. Parents said it was easy to set up and they could clearly see what their kids had been doing. Children seemed engaged and self-directed, but we weren’t sure if this was due to our new design. Was it motivating or just a new way to browse the site?
BrainPOP restructured and I was laid off while research was ongoing. I had sat in on an interview with one family that gave glowing reviews. However, only the 6th grader seemed interested in collecting badges. The 4th grader preferred to explore topics through the subjects menu.
While we waited for the results of this research, we continued making weekly updates to the product. I was excited to continue iterating on our designs and incorporate features that didn’t make the cut.
This was the first time BrainPOP had launched a true MVP. We would have liked more time to do it, but that constraint forced us to focus. Despite skipping some of our usual process, we built a successful product and I’m proud of how it turned out.
Grade Level Navigation
Shows curated goals for the child’s grade by default and updates every summer.
Combined Products
This technical and design challenge led to losing search on the homepage for the MVP.
Completion Banner
Appears with a delightful animation and sound effect when users earn a check.
Completed Features
Checks remind users of past activity and count towards unlocking badges.
