Khan Academy homepage
In winter 2019, Khan Academy assembled a team to redesign our logged-out homepage. I worked as the designer driving our new messaging and copy, page UX, and visitor funnel routing. I was the owner of the narratives and language, which in turn fed our visual designer Jacob Grief in creating the illustrations.
I also worked closely with our design manager/lead Warren Schultheis, my product manager Julia Gitis, and our marketing and philanthropy leads.
In addition to the homepage, I also designed three new funnel pages for districts, teachers, and potential donors:
Previous design
I had led several previous redesigns of the logged-out homepage, including the most recent redesign from winter 2017. In the last redesign, before our organization had created an explicit marketing department, our goal was to maximize the "total learning time" of visitors to the page. I developed concepts and experiments that demonstrated that changing from a signup-focused page to a content-focused page would increase per-visitor total learning time. I worked with a visual and illustration designer, and our team ran experiments that guided us to a browsing-focused first experience:
New design
In winter 2019, our organization, known for providing world-class lessons for people learning on their own, was adjusting our focus to learning in the classroom. We were developing a new offering for school districts and teachers and wanted to clearly communicate this. Additionally, as a nonprofit, we also wanted our homepage to speak to potential donors.
Here's a look at the whole new page:
The two top goals for the new winter 2019 redesign were to communicate our company priorities and to funnel visitors into appropriately targeted experiences.
Our above-the-fold hero addresses both of these goals, adopting a new marketing headline of "For every student, every classroom. Real results." highlighting our specific classroom focus and product efficacy. I also created clear call-to-action buttons for our key user funnels: learners, teachers, districts, and parents. Pressing one of these buttons takes the visitor to a new page with a targeted experience for that identity.
We also receive many visitors who read an article or heard about Khan Academy but don't have a specific learning/usage goal in mind. We are interested in converting these people into potential donors. With this in mind, we changed the subcopy to include our nonprofit status and mission statement: "We're a nonprofit with the mission to provide a free, world-class education for anyone, anywhere." This change is already helping to drive a 40% increase to visits to our Donate page, albeit starting from a small base.
For these potential supports, and for visitors looking to preview more before diving in, I created a "scroll down" button at the bottom of the hero to encourage them to scroll to continue reading.
Below the fold
Much of the primary content below the fold, is a set of identity-based modules I created to speak directly to several of our target user types. Each of these routes the visitor in the way that the above-the-fold CTAs do.
Of the identity modules, we decided to lead with our districts module because of its efficacy-based message, which is important to both districts as well as teachers. Despite the fact that district administrators would be a tiny minority of visitors to the page, they are key visitors to reach in order for us to achieve our overall adoption goals.
We also make use of triggered and interactive visual elements in the page modules. For example, in the districts module, we animate the drawing of the graph above, then punctuate that with circling "student learning" in order to draw the visitor's eye back to the copy and CTA. The project's illustrator, Jacob Grief, came up with the concept for the hand-drawn elements, which we really liked.
Pending experiment data, the team is considering additional v2 explorations to use additional hand-drawn elements to highlight the CTAs.
Learner funnel
The primary flows for learners are through the above-the-fold module. By pressing the "Learners" button, we take them to the signup page for learners. Learners who aren't ready to sign up can press the "Courses" menu in the navigation header.
This switch from a content-focused homepage to a signup-focused homepage reduced the number of initial learning actions and increased the number of learner signups. Based on our 2017 learnings, we determined that while a signup focus reduced "total learning time," it did not significantly affect the number of visitors who became "very active learners," people who spend 120+ minutes a month on the site.
Since 2017, our organization had switched from prioritizing total learning time to prioritizing very active learners, so we decided that the learning time/signup tradeoff was acceptable. Directing to signup rather than a content browsing experience enabled us to reduce the scope of the redesign and maintain the primary redesign focus on districts, teachers, and donors. It also increased our ability during donation drives to reach our learners via email; user community giving is an important piece of our overall fundraising.
The below-the-fold learner module also reflects our shift in focus from "just-in-time" learning, which is already served well by our individual content landing pages. Instead, in speaking to learners who visit our khanacademy.org home page, we communicate our belief that everyone can learn, our highest-priority content, and our desire to help learners "build a deep, rock-solid understanding" through long-term engagement rather than quick help:
"Last chance" module
I structured our homepage and related funnel pages to have a "last chance" signup/next step module at or near the bottom of the page, so that after they'd read through the page, we'd always have a clear next step down the funnel.
Potential donor funnel page
Many visitors to our homepage don't have a specific goal (learners, teachers, and parents typically do) but have heard about Khan Academy and are interested to know more. Our data indicate that they are often unaware that Khan Academy is a nonprofit, and they are not immediately interested in donating.
To try and convert more visitors into becoming donors, we now mention our nonprofit status in the above-the-fold subcopy and also introduced a module that attempts to walk the line between inviting people to learn more about our mission and explicitly asking them to donate:
Pressing "Give them the chance" takes visitors to our donor funnel page. In this page, we avoid asking them for an immediate general donation; we want to instead first communicate the impact they can have by joining our mission.
Through this page, I'm working to communicate to the visitor the kind of life-changing impact they can have together with Khan Academy, rather than our just talking about ourselves.
We begin with the hero and a testimonial from a girl in Afghanistan. I use the header copy "Every is born with a desire to learn..." above the testimonial to specifically tee up her message. In this mock, I'm switching to grayscale for elements without illustrations or final visual treatments.
Next, we express Khan Academy's global reach an impact through some of our top-line statistics, but frame it through the lens not of our talking about ourselves, but in how "You can bring education to the world."
Then we ask the motivating question—"How will you level the playing field?" This is messaging originally developed for the SAT product that has performed very well in general use.
Then, we give the visitor four compelling missions they can help support. The donations all go to the same general fund, but by framing the calls-to-action around specific initiatives, we can connect with them more concretely in how their gift can help.
Finally, we end (not pictured) with a testimonial from a donor, more detailed links to our financials and leadership team, and a "Last chance" module to donate.
In the future, our philanthropy team hopes to experiment more with doing deeper storytelling about individual users. Unfortunately, our project scope didn't give us the time/resources to explore and build out these options, but they're something the team intends to try in the future.
District funnel page
When district administrators press the "Districts" call-to-action on the homepage, we take them to a page about Khan Academy for Districts.
Above the fold, we use the terminology "upgrade" to communicate to district administrators that Khan Academy for Districts is a paid product. We also provide a call-to-action to contact our Districts team; this is currently a Typeform but will be upgraded.
Immediately below the fold, we highlight our primary content areas. The first question district administrators have is whether our content matches their specific need, such as practice for the SAT.
Next, we highlight two efficacy studies that show Khan Academy's incredible effectiveness in improving student learning. Efficacy is a key feature for districts—they're looking for real results.
Now that they're hopefully bought in to our relevance and effectiveness, we cover the key features they receive by upgrading to Khan Academy for Districts, followed by a testimonial from Long Beach's nationally-renowned superintendent, and then a final call to contact us.
Narrative and copy process
I worked closely with Julia Gitis, my product manager, to fashion the narrative and copy for the pages. We also partnered with our district marketing, teacher marketing, and philanthropy leads to develop the concepts for their specific funnel pages.
Julia and I worked heavily in a Google Doc that contained all of the copy for all of the pages. This made it easier for others to collaborate with us and leave comments/responses.
We also developed a rubric for evaluating each module, with our brand values as the criteria. Our brand values were not entirely solidified before this project (and are still in flux); notably, one brand value we added for this project was "Epic," as Khan Academy is an ambitious organization with a mission to change education for the world.
For this project, I was needing to speak to many different kinds of visitors:
-
People looking for help learning
-
Teachers considering Khan Academy
-
District administrators
-
Parents
-
People who'd heard about Khan Academy and were curious
Each module (with the exception of the main logged-out homepage hero module) is targeting just one or a subset of these audiences, but they will likely be seen by the other audiences. So in creating the copy for each module, I had to balance reaching the intended audience without completely alienating the others.
Conclusion
Our executive and marketing teams were very happy with the messaging and look of the new homepage.
We were also very happy that we satisfied our key metrics:
-
No drop in teacher signup
-
No drop in donations
In fact, we increased the rate of teacher signups, primarily because the previous version of the mobile homepage did not have explicit signup options for teachers or parents, but we added those.
Because we strongly shifted the focus away from listing courses on the page, we knew to expect a drop in the number of learning actions (e.g. watching a video) that visitors were taking.
When I had redesigned the homepage in 2016, we went from a signup wall to the list of courses; this increased the number of learning actions, reduced the number of signups, but in the end, did not affect the number of monthly very active learners (120+ minutes/month).
Because of this prior knowledge, I was confident that if we switched back to routing learners into a signup flow, we would not experience a statistically significant drop in the number of monthly very active learners. This fortunately has been the case!