UX Case Study

Mudrek: Simplifying Learning for Busy Lives App

A mobile learning app that helps busy students and professionals learn on the go by offering bite-sized, multi-format lessons with offline access.

lesson card component
lesson item component
lesson has downloaded component
week streak component
audio & text toggle component
knoweldge statistic component
streak number component
Mudrek mockup

UX Case Study

Mudrek: Simplifying Learning for Busy Lives App

A mobile learning app that helps busy students and professionals learn on the go by offering bite-sized, multi-format lessons with offline access.

lesson card component
lesson item component
lesson has downloaded component
week streak component
audio & text toggle component
knoweldge statistic component
streak number component
Mudrek mockup

UX Case Study

Mudrek: Simplifying Learning for Busy Lives App

A mobile learning app that helps busy students and professionals learn on the go by offering bite-sized, multi-format lessons with offline access.

lesson card component
lesson item component
lesson has downloaded component
week streak component
audio & text toggle component
knoweldge statistic component
streak number component
Mudrek mockup

UX Case Study

Sync: Managing Remote Work & Productivity Extension

A mobile learning app that helps busy students and professionals learn on the go by offering bite-sized, multi-format lessons with offline access.

lesson card component
lesson item component
lesson has downloaded component
week streak component
audio & text toggle component
knoweldge statistic component
streak number component
Mudrek mockup

Problem Statement: Solving Information Overload in Microlearning

Learning shouldn’t feel like a chore—but for many people, it does.
Students and professionals alike want to keep growing, but their days are filled with meetings, errands, and screen fatigue. They squeeze in what they can—between commutes, workouts, or chores—but long videos, unengaging interfaces, and scattered platforms make learning inconvenient.

Through interviews and surveys, I uncovered key trends:

  • Users often lose interest in long or overly academic lessons.

  • Audio is the preferred format during multitasking.

  • Many want short, digestible content but can’t find apps that adapt to their learning habits.

  • Navigation overload, small text, and irrelevant content lower motivation.

  • Offline access and a clean experience are non-negotiables.

This wasn’t just anecdotal. The market reflected the problem:

  • Audio learning apps were trending, but few offered personalization.

  • EdTech competitors emphasized breadth, not relevance or speed.

  • Users were craving a way to learn smarter, not harder.

Solution Overview: A Learning App for Real Life

To solve this, I designed a mobile-first learning app that fits seamlessly into everyday routines. It supports:

Progress Tracking & Bookmarks

Pick up right where you left off.

Progress Tracking & Bookmarks
Multiple Formats

Text, audio, and video—users choose what works best at any moment.

Multiple Formats
Offline Access

Download lessons to learn without Wi-Fi.

Offline Access
Smart Discovery Scroll

Swipe through personalized recommendations.

Smart Discovery Scroll
Bite-sized Content

Lessons last 5–10 minutes to suit short attention spans.

Bite-sized Content

Progress Tracking & Bookmarks

Pick up right where you left off.

Progress Tracking & Bookmarks

Multiple Formats

Text, audio, and video—users choose what works best at any moment.

Multiple Formats

Offline Access

Download lessons to learn without Wi-Fi.

Offline Access

Smart Discovery Scroll

Swipe through personalized recommendations.

Smart Discovery Scroll

Bite-sized Content

Lessons last 5–10 minutes to suit short attention spans.

Bite-sized Content

My Role

I led the end-to-end UX design process, including user research, synthesis, prototyping, testing, and UI design. I also conducted competitor analysis, created personas, and developed the design system.

My Design Process

To guide my design approach, I followed the Double Diamond Process. It consists of four phases:

1- Discover – I began by exploring the problem space through user interviews, surveys, and competitive analysis. This helped uncover real user needs, behaviors, and pain points.

2- Define – I synthesized findings into key themes using affinity mapping and created personas to clarify the core problem. This narrowed focus to the most impactful design opportunities.

3- Develop – I ideated solutions through ideations, sketched early concepts, and iterated on wireframes. The design evolved through feedback and testing.

4- Deliver – I finalized high-fidelity designs, created a design system, and validated usability. Iterations were guided by real user insights to ensure relevance and impact.

double diamond process

Competitive Analysis

I examined 7 popular learning apps (like Blinkist, Headway, and Majrah) to assess how they deliver short-form learning.

Competitive Analysis table

These gaps validated an opportunity: design a lightweight, adaptable app with strong usability and real-world flexibility.

Research Insights: Validating the Constraint-First Approach

I interviewed 5 users and gathered 70+ survey responses.

Non-negotiable constraints:

  • Lessons must fit in actual available time (under 10 minutes)

  • Format flexibility matters—audio for commutes, text for waiting rooms, video for focused sessions

  • Users want control over pace and progression, not algorithmic recommendations

  • Offline access is essential (not optional)

  • Progress tracking builds motivation (proof of completion matters)

Critical insight: The research didn't reveal a need for more features. It revealed that users needed existing features to respect their reality: fragmented time, mixed environments, multiple learning modalities.

Persona Development: Understanding Real Constraints

Two personas crystallized the opportunity:

  • Sarah AlFarsi — The Efficient College Learner: A busy college student who values quick, engaging learning materials to help her understand complex topics and prepare for exams. She prefers audio and visual formats like videos and infographics, and enjoys bite-sized summaries that fit into her daily routine.
    Motivated by academic success and future job readiness, Sarah struggles with long study sessions and feeling overwhelmed by too much information.

  • Ahmed AlNassir — The On-the-Go Professional: A marketing manager juggling work and family life, Ahmed seeks practical, up-to-date content that keeps him competitive without taking away from his personal time. He favors audio formats like podcasts that allow him to learn while multitasking.
    His main challenges are limited time and guilt over personal development cutting into family time, but he’s driven to grow professionally and provide for his loved ones.

persona
persona

Strategic insight from personas: The common thread wasn't demographic—it was structural constraint. Both were motivated but time-fragmented. Design had to solve for fragmentation, not motivation.

Affinity Map

Learners—both students and professionals—struggle to fit study time into busy lives. They feel overwhelmed by too much information and limited time, often juggling work, school, and family. They prefer short, accessible content—especially in audio or visual formats—and want practical insights they can apply quickly. While motivated, they often feel guilt or frustration, highlighting a strong need for flexible, efficient learning solutions.

affinity map

User Journey Map

Illustrated emotional highs and lows across key interactions and helped spot design opportunities.

user journey map

Ideation: Turning Constraints Into Features

Rather than "how do we make learning more engaging?" I reframed: "How do we make learning completable within real constraints?"

This led to four design questions:
  1. How do we make format-switching frictionless? (respecting that same lesson works in audio for one user, video for another)

  2. How do we eliminate decision paralysis? (smart discovery that doesn't override user control)

  3. How do we reduce navigation friction? (users shouldn't hunt for lessons they started)

  4. How do we make offline progress feel continuous? (download a lesson, take it offline, sync when reconnected)

ideation

Information Architecture: Constraint-Aware Design

The IA was built around how users actually move through their day:
  • Entry point: Smart discovery (recommended next lesson, no browsing required)

  • Lesson experience: Format options front-and-center (audio player, transcript, video—user chooses)

  • Progress visibility: Bookmarks and completion status (proof of advancement)

  • Offline handoff: Seamless transition from online to offline (download, learn, sync)

  • Return path: Resume where you left off (no "where was I?" friction)

Each user flow eliminated one constraint:
  • Short lessons (5-10 min) ✓ Time constraint

  • Multiple formats ✓ Environment constraint

  • Offline access ✓ Connectivity constraint

  • User control over pace ✓ Autonomy constraint

  • Progress tracking ✓ Motivation constraint

information architecture diagram
userflow diagram

Design System: Accessibility as Strategic

The visual system wasn't decorative—it communicated clarity and accessibility:

  • Calming palette: Respects cognitive load (learning is hard; design shouldn't be)

  • Accessible contrast: Readable on phones in sunlight (outdoor + commute use case)

  • 4pt grid token: Consistency reduces cognitive friction (users recognize patterns)

  • Minimal, modern aesthetic: Every element earns its place (respects attention)

Strategic decision: Accessibility wasn't an afterthought—it was foundational because constrained learners also need unambiguous interface clarity.

design system

Solution Breakdown

solution breakdown

Usability Testing: Validating the Constraint-First Model

Tested with 5 users (3 students, 2 professionals) via remote sessions. They brought real constraints:

What Validated the Model:

  • 4 of 5 completed all tasks (proof that constraint-aware design works)

  • Average 4.2/5 rating (strong, not perfect)

  • Lesson duration of ~4 minutes felt right (under target, still content-rich)

  • Format-switching was intuitive (audio to transcript transition felt natural)

  • Offline indicator gave confidence (users knew what would work without internet)

What Refined Execution:

  • Small text readability on mobile (accessibility issue, not design philosophy)

  • Audio/text toggle clarity (labeling issue, not structural issue)

  • Discovery swipe discoverability (signaling, not feature issue)

Critical insight: Constraints weren't problems with the model—they revealed gaps in signaling. The design philosophy held up; execution needed refinement.

Redesigning Decisions

redesigning decision
redesigning decision
redesigning decision
redesigning decision
redesigning decision

What I Learned

  • Validate early. Real users debunk assumptions fast.

  • Accessibility is foundational—not optional.

  • Small features like tooltips, toggles, and font scaling build trust.

  • Flexibility matters. Users want control—but without complexity.

Next Steps

  • Implement dark mode for night-time reading comfort.

  • Use AI to recommend personalized lessons.

  • Add an AI-powered assistant for real-time support and content Q&A.

In the end, this app isn’t just about consuming knowledge. It’s about making learning feel effortless, everyday, and empowering.

Want

More Projects?

Want

More Projects?

Create a free website with Framer, the website builder loved by startups, designers and agencies.