AoPS Beast Academy

Redesigning a responsive website for an advanced math education program.

Problem

Students learn math via advanced math comic-books. Although the parent company (Art of Problem Solving) has been around for nearly 20 years, Beast Academy Online was launched in 2016. Comic books and online labs and puzzles are what is offered. Define the brand guide and manage/maintain.

Solution

Showcasing the beasts and their personalities in all different mediums to help solidify the brand. Getting the beasts into the fabric of AoPS Beast Academy and into various marketing channels. On the web, making sure the homepage alone had the essence of the beasts and their vibrant and zest for problem solving and learning. Wireframe prototypes were created in Adobe XD. Continuing that through to social media, amazon gift cards and packaging tape.

Process

Research

Through researching, I found that internal stakeholders and their users want purchasing products and online courses to be simple. Users also prioritize finding the right level program for their student (number does not always correlate to current grade).

Stakeholder Meeting

Meeting with the BA product owners helped me better understand their highest priorities for the BA website. They were:

  • Creating an streamline process for checkout
  • Having a clear and more direct flow and directive to various pages within the website
  • Refreshing the brand style

Competitor Analysis

After analyzing what these do well, I wanted to make sure I incorporated some of those features in the redesign. The following features were:

  • Dynamic modals
  • Clear call to action buttons

User Interviews + Usability Testing

To better understand Beast Academy users’ most prominent needs and pain points when using the current website, I conducted user interviews and usability testing. In these interviews, I had users go through the process of the Beast Academy checkout flow, add one student and purchase at least one product.

User Information

  • 12 users
  • Ages 24-40

Key Findings

  • Moms want to know where their advanced math student is being challenged
  • They loved the books, wanted to know how that translated to online
  • Wanted to see how they could get all their kids interested (even children who were having a harder time at math)

Pain Points on Current Site

  • Adding more than one student was difficult using the modal
  • Adding more than one book was difficult in the modal
  • Continue shopping was confusing, they felt they might lose their cart items

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 users' pain points and client's priorities, I began to organize the layout of the Beast Academy website. Ultimately ensuring needs were met for both.

Site Map

I first built out the site map. This gives me the confidence I need that this website has the necessary pages and layout to allow users to purchase BA products in an efficient and intuitive way.

Wireframes

We began creating mid-fidelity desktop and mobile website wireframes which include layouts and features to allow the user a carefree purchasing experience.

Desktop

A few key features included in these wireframes were:

  • A product level filter
  • A prominent 3 tiered payment card section
  • A dynamic pop-up modal
  • Fun animation

Mobile

Same features added.

Style Guide

High Fidelity Wireframes

Desktop

Mobile

Prototype + Usability Testing

Desktop prototype was built and tested with users, it was found that users could easily purchase items, add students and continue shopping using the pop-up modal and rest of the site.

Usability Test Information

  • 10 participants
  • Participants aged 24-65
  • Usabilityhub

Usability Test Goals

  • Identify if users can locate a product with minimal errors
  • Identify if users can purchase an item with minimal errors
  • Identify if users can navigate back to continue shopping with minimal errors

Findings

  • Users felt positive about the overall design and feel of the new website, they really enjoyed seeing the characters throughout the checkout process
  • Users were able to effectively add products and multiple students to the shopping cart and go to checkout

Iterations

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

  1. Since users stated that they wanted to be able to add a multitude of students within the modal, I added an icon where they can easily add a new student by entering in the form, one they hit enter a checkmark appears as well as a new add student form pops underneath, and so on.
  2. Created an interactive 3 tiered payment card section, provides transparency and options so the user can choose the right option for their student.
  3. Added a numbered section in the modal to purchase more than one book.

Next Steps

  • Following final changes, the website is ready to be handed off to the internal development team.
  • Measuring bounce rate on the redesigned site is crucial in learning if these design changes have led to users purchasing more BA products.

Takeaways

Being organized and communicative with dev team
Figma is still a new program we are using at AoPS, so design to dev handoff is a relatively new process. Staying organized and communicating all things is essential in making sure dev understands the entire scope of the product needing to be created. Utilizing a document, making detailed animation comments in Figma, and making sure to have all image and vector assets also accessible in a dropbox folder just makes the entire handoff a breeze!

Beast Academy Site