KhanAcademy

A UX Case Study | Group Project | Desktop Viewport

Project Overview

Project length: 2 week sprint

Goal: Design a community feature for Khan Academy to foster collaboration and support among learners. This feature will allow users to connect, share knowledge, seek advice, and participate in discussions related to their educational progress, helping them stay motivated and engaged with their learning.

Roles:

User Research
Information Architecture

Tools:

Figma
Optimal workshop
Google Forms
Zooms
Slack
User Interviews

View Full Prototype Here

DISCOVER

Why I Focused on User Research First

The first step was to understand what users truly need and why they struggle with staying motivated. Rather than making assumptions, I wanted to ground our design decisions in real user insights. To do this, I conducted 15 virtual user interviews with students to uncover pain points and key motivations for engaging with online learning platforms.

Key Insights:

Motivation: Users, like Alex (our persona), mentioned how they struggle with staying motivated and prefer to connect with others for accountability.
Credibility & Trust: Many users expressed concerns about trusting people online without clear profiles and shared information.
Feedback & Connection: A recurring theme was the desire for feedback on progress and meeting like-minded learners to keep their momentum going.

These insights helped me focus on creating a community-based feature where learners could connect, stay motivated, and share progress—directly addressing their pain points.

Why I Did a Competitor/Comparative Analysis

I wanted to understand how other platforms were building communities and encouraging engagement. This informed the feature design, UI elements, and overall user experience. Key findings included:

Event Calls to Action: Competitors used strong CTAs for events, promoting participation and community-building.
Personalised Recommendations: A trend I noticed was the effective use of personalised content to guide users toward relevant communities or content.
Navigation & Filtering: Competitors emphasised clear navigation and filtering options to streamline users’ paths to content that mattered most.

These features helped me understand the best practices for building an engaging online community.

DEFINE

Why I Created a Persona (Alex)

Our user persona, Alex, was crafted to help us maintain focus on the target user’s needs throughout the design process.

Alex is a 24-year-old data scientist who loves flexible learning but struggles with motivation and seeks feedback from others in his field.

By developing Alex, I was able to make design decisions that would keep the user’s needs front and centre. For instance, Alex’s desire for a credible and engaging community informed our choice to integrate trust indicators like badges, profile info, and verified user status.

Why We Created a Problem Statement

The concise problem statement, “Alex needs a credible online community to receive feedback and stay motivated while learning online,” allowed us to focus on what would truly help him. The question “How might we create a more engaging online community that provides credible feedback for Alex’s learning progress?” became our guiding question for brainstorming solutions.

DEVELOP

Why I Chose the Community Cards Approach

In our ideation phase, one key decision was the community cards feature, which would display subject areas, learner status (gold, silver, bronze), and other important credibility indicators.

Why cards?
- They offer a scannable, digestible format that provides users with relevant community info at a glance.
- The status badges (Gold, Silver, Bronze) enhance credibility—users can quickly see a peer's learning progress and credibility, addressing Alex’s need for trust in others within the community.
- Ease of engagement: The cards allow users to easily connect with peers, whether it's a click-to-connect or joining a discussion—this design choice was aligned with Alex’s need for motivation through peer interaction.

Why I Focused on Information Architecture

The core challenge was making sure users could quickly navigate through the platform without feeling overwhelmed or lost. To address this:

Simplified User Flow:
We streamlined the user flow to focus on the primary tasks—connecting with peers, joining communities, and getting feedback. This way, Alex and other users would not feel bogged down by unnecessary features.
- We placed community features front and centre, ensuring they were easily accessible and prominent in the navigation.
Clear Tabs & Filters:
Users were confused by tab names during our testing, which led us to revise them for clarity. We made it crystal clear that there was a distinction between courses and communities, with tab labels that accurately reflected their content.

Why We Opted for Sketching & Early Prototyping

Before diving into high-fidelity wireframes, we conducted sketching sessions to explore different UI layouts. The process allowed us to visually compare and refine ideas. By the time we transitioned to digital wireframes, we had narrowed down the design to something that felt intuitive yet visually appealing.

The choice to use low-fidelity wireframes at this stage helped us iterate quickly, making sure the design solved key usability issues like tab confusion and clarity of interaction.

Why I Conducted Guerrilla Testing

After creating the wireframes, we ran quick guerrilla testing with 5 participants. The feedback showed that the redesigned navigation was clearer, and users could easily distinguish between course content and community features.

However, we also observed a mis-click pattern, which pointed to potential confusion with certain tabs. We took this feedback seriously and refined the design for greater clarity. The improvement in comprehension after iterations showed the value of rapid testing to catch issues early.

All 5 participants were able to quickly understand the tabs clearer.

DELIVER

Why Mobile-First Testing Is Critical

While our current focus was on the desktop version, the next step is to ensure a seamless experience across devices. The community feature is a space for dynamic interaction, so it’s important that the design works fluidly on mobile—where users might interact with the feature in shorter bursts of time.

Moving forward, our team would conduct mobile testing and refine the design for a responsive experience across all viewports.

Why I Value Iterative Testing

As a designer, I’ve learned the importance of iteration and testing in real contexts. Although the high-fidelity prototype has received positive feedback, we would continue testing to refine usability further. For instance, I would explore A/B testing to see which design elements—like button placement or community card arrangement—drive the most engagement.