Kolibri Content Import Redesign

The Brief

Evaluate and redesign Kolibri's content import flow. Educators were complaining they couldn't find where to import content, and when they did, they weren't confident about what they were downloading. In an offline-first environment where bandwidth is precious, failed imports aren't just frustrating — they're costly.

Research Approach

I designed and conducted comprehensive usability testing with multiple participants across different educational contexts:

Screener Design

Carefully crafted screener questions to recruit participants who matched our target educator personas — varying levels of tech literacy, different educational contexts.

Task-Based Testing

Asked participants to complete realistic tasks: "Find science content for 8th graders and import it." Observed where they got stuck, what they clicked, what confused them.

Structured Interview Protocols

Followed up task completion with targeted questions about their mental models, expectations, and pain points.

Key Findings

Critical Issue: Discoverability Failure

80%+ of participants couldn't find where to start importing content. The import entry point was buried in navigation, labeled unclearly, and required multiple clicks to discover. "I assumed it would be obvious... but I've been clicking around for 3 minutes and I still don't see where to import anything." — Participant 4

Preview Confidence Gap

The content preview experience didn't give educators confidence about what they were downloading. No way to preview lessons, no clear indication of file sizes (critical for low-bandwidth contexts), no understanding of how content would appear to learners. "Will this work for my Grade 6 class? I can't tell just from the title." — Participant 2

Import vs. Update Confusion

Users confused "Import" and "Update" actions. Unclear when to use which, leading to duplicate content or failed updates.

Design Response

1. Redesigned Entry Point

• Moved import to primary navigation with clear "Add Content" CTA
• Added empty state with prominent "Import your first content" action
• Progressive disclosure: Show the journey, not just the destination

2. Enhanced Content Preview

• Rich preview cards showing sample lessons and topics
• Clear file size indicators for bandwidth awareness
• Grade level and subject tags for quick filtering
• "Preview as learner" option to see exactly how content appears

3. Simplified Channel Management

Redesigned the channel management interface to clearly separate "Browse new content" from "Update existing content." Reduced cognitive load through clear visual hierarchy and action-oriented language.

The Constraint Story: K-Card Redesign

One of the most important lessons from this project: initial feature-rich designs had to be radically simplified to match backend constraints and bandwidth realities of offline-first users.

My first K-Card designs had beautiful thumbnail previews, rich metadata, interactive filtering, and detailed content breakdowns — perfect for high-bandwidth environments, completely impractical for a teacher in rural Kenya on a 2G connection. We stripped it back. Text-based previews. Minimal images. Clear hierarchy. It wasn't the design I wanted to ship. It was the design users needed.

Impact

Lessons Learned

Designing for constraints is designing for reality. The most elegant solution isn't always the most feature-rich. Sometimes the best design is the one that works when the internet doesn't.

This project reinforced that usability testing isn't just about finding bugs — it's about understanding mental models, surfacing assumptions, and designing for the behavior people actually have, not the behavior you wish they had.