Natalie Fitzgerald | Design + Illustration
Natalie Fitzgerald | Design + Illustration
khanacademyproductdesign.png

Khan Academy Product Design

 
 

Khan Academy Homepage Redesign

 
 

Khan Academy is a platform with the mission of providing a free world-class education to anyone, anywhere. However, Khan's original homepage hindered this mission by featuring a sign-up wall and nondescript, unwelcoming imagery. A refresh was needed to show learners, teachers, and parents what Khan has to offer in an inviting way.

Role: UX/UI Designer & Illustrator
Collaborators: Kitt Hirasaki (user research, analytics)

 

BEFORE

AFTER

I produced dozens of wireframes exploring different modules the page could contain and structures the page could take.

Next came A/B testing some of the more promising options. We had the hypothesis that putting the content front and center and letting it speak for itself would be the best way to show off our product.

After choosing a content-centered approach, I created several hero illustrations and tested them against photographic options. All of the images were meant to evoke a sense of wonder and opportunity.

The chosen direction lets visitors explore content right away without needing to sign up. It features an illustrated mountain scene that represents learning as a journey that's full of possibility.

 

 

Khan Academy Partner Recognition System

 
 

Khan Academy partnered with its first corporate sponsor, Bank of America’s Better Money Habits, to create educational content. This presented the first need to brand partner content on the platform and to present that branding in a way that wasn’t disruptive to learners and maintained Khan’s reputation as an objective and trustworthy learning resource. I created a partner recognition system that expanded Khan’s design language to meet these needs.

Role: UX/UI Design Lead
Client: Bank of America and Khan Academy
Documentation: Partner Logo Use Guide

 

This landing page had two objectives: to highlight the educational content produced in partnership with Bank of America and to do so only with page elements that would be reusable on other types of pages. Each module found here, from the image carousel to the 3-up quote area, are new elements this project introduced to Khan’s codebase and that expanded its visual language.

The introduction of photography in page headers and other spots added life to content pages. Other structural issues like low information density were out of scope for this project.

These designs broadened the existing design system, while leaving some elements unchanged such as fonts, colors, and CTA styling.

Here I proposed a new feature: author pages that contained all the works of each content creator on Khan Academy’s platform. This would grant Bank of America a few things that had been sticking points during negotiations, such as having their logo appear above-the-fold and having a blurb about their philanthropy, but more importantly for Khan it would showcase the breadth of content creators and allow users to follow those whose teaching style and content they liked. This feature was well-received, but ultimately out of scope as it proposed a large engineering undertaking.