AoPS Beast Academy

Designing a 2 page series of responsive landing pages for the school facing division of Beast Academy.

Problem

The reputable study was initially created in a text heavy PDF document, with charts and graphs. Informative, but dry material, with a favorable outcome for AoPS students. Parents will be landing on this page mostly from the initial welcome page for this report. The welcome page offers a lighter introductory version which on click takes you to the meat of the study on this page.

Solution

Turning dry material into something fun and tangible and wanting to keep the audience reading more, I chose to put emphasis on the study on the page. Using the image of a rocket (synonymous with high achievement) flying high, I felt it would lead the audience to this section immediately. Also, adding an animation on parallax of the rocket taking off as you scroll down was just the touch it needed. Other animations keep the audience on their toes and make sure their eyes do not miss the highlights of this study and truly understand how AoPS students across the board have higher test scores across the US.

Process

Research

In my research, I found that internal stakeholders wanted the highly detailed and technical report case study to be translated in an easy to digest way with Beast Academy branding in mind.

Stakeholder Meeting

Meeting with the BA sales team helped me better understand their highest priorities for these landing pages. They were:

  • Creating a two part experience (welcome page and outcome page)
  • Having clear calls to action for navigation as well as options to download the actual PDF report
  • Elevated brand experience for more of a business feel

Competitor Analysis

After some analyzing, I wanted to make sure I incorporated some of those features in the design. The following features were:

  • Colorful and engaging backgrounds
  • Easy to read text links

Persona

Through our in-house marketing research, we found that our main client client is the “path-paving parent”, moms 24-35 yrs old who are very involved in their child’s education and want the best for them.

Ideate

Once I identified stakeholders’ priorities, I began to layout the BA Welcome and Outcomes pages.

Wireframes

I started creating handdrawn low-fidelity desktop and mobile page wireframes, including notes for animation as I felt it would be a great addition to adding engagement.

Desktop

A few key features included in these wireframes were:

  • The chart from the study, but in a simpler and fun way to show
  • Animation notes

Mobile

Same features as desktop, minus animations.

Style Guide

High Fidelity Wireframes

Desktop

Mobile

Prototype + Usability Testing

Desktop prototype was built and tested with users, I found that users could easily navigate through both pages.

Usability Test Information

  • 10 participants
  • Participants aged 24-35
  • Usabilityhub

Usability Test Goals

  • Identify how long it takes to find the cta to download PDF
  • Identify if users can navigate back and forth from both pages with minimal errors

Findings

  • Users felt positive about the overall design and feel of the new website, the animating rocket on the outcomes page was a true eye catcher and did it job encouraging the user to read though the section
  • Users were able to quickly identify how to download the PDF report

Iterations

After conducting usability tests, the following adjustments were made based on needs:

  1. Adding a Schedule Demo cta in the main header to allow that option without having to scroll down (this being the second page of the two if they have chosen to go this far giving the user that option immediately is key.
  2. Adding a stats section to piggy back off the report, this being closer to the end of the page it is a nice note to iterate how much of an impact the Beast Academy program has on student’s math comprehension and advancement.

Next Steps

  • Following final changes, the website is ready to be handed off to the internal development team.
  • Measuring hot spots and download rate of the PDF from these pages is paramount in collecting learnings for the impact these pages have on serving its purpose of creating a dynamic and engaging two page series based on a case study.

Takeaways

Familiarize myself with concepts from other departments
Interpolating intricate and data heavy information and chewing it up and spitting it out in a way anyone can understand was a true problem to solve. Making that data easy to digest and also engaging to look at was a whole other beast. Many meetings with stakeholders from the sales team about the study, having them break down the data for the average person to understand and then understanding what we wanted to do with that data to “wow” our parents rather than lose them in a sea of stats. When creating the new chart on the Outcomes page I grabbed all our most important information and broke it down and placed it within the graph in a way that was eye catching and easy to read in a split second. Adding in one of our beasts helps to support and encourage that fun learning aspect that Beast Academy brings. Overall, it was well received by stakeholders, internally within the company and a hit with our parents.

BA in Schools Outcomes Page