Roxanne Zhu

Learn with Chat

Project Type

Ed-tech B2C startup

Tools

Figma, Webflow

Role

Founding Product Designer

View Prototype

When you're trying to learn after a long day of work

8 PM study session: surface-level videos, constant distractions. By day three, you have forgotten everything and lost momentum.

Person studying finance course feeling distracted

Seeking mindfulness skills, but platforms push productivity over reflection. You need calm learning moments, not another hustle.

Person seeking mindful learning experience

Strong start, but week two hits hard. No feedback, no check-ins—just learning in a vacuum until motivation flatlines.

Person losing motivation while learning on mobile device
Traditional learning platforms fail users with shallow content, poor engagement, and no personalization—leading to rapid motivation loss.
AI-powered, bite-sized learning modules that adapt to your schedule, role, and goals—keeping you engaged with personalized content and progress tracking.

Key Problems We Solve

⏰

Lack of Time

Long sessions are hard to commit to between work, meetings, and life. Learning often gets pushed to "someday."

📈

Passive, Forgettable Content

Most platforms rely on videos or slideshows that are easy to skim—and easier to forget.

💤

Low Engagement

Passive lectures with no interactivity or real-world connection.

🎯

No Personalization

One-size-fits-all content ignores your role, industry, and skill level.

⏳

No Real-Time Guidance

Users are left on their own to navigate what to learn next. Without direction, momentum drops off.

🏗️

Hard to Apply

Abstract concepts without practical exercises or real-world applications.

📉

Motivation Drop-Off

Without check-ins, feedback, or streaks, learners lose momentum quickly—especially after week 1-2.

😵

Overwhelmed by Choice or Length

Big course libraries can lead to decision fatigue or pressure to "finish," which adds stress instead of value.

What exactly do learners need?

Diego Morales profile photo

Name: Diego Morales

Age: 34

Occupation: Sales Manager

Tech Savviness: Medium-High

Location: San Diego, California

Sales manager balancing team leadership with personal growth. Needs bite-sized learning that fits between meetings and commutes to build leadership and strategic selling skills without sacrificing evenings.

Goals:

  1. Level up leadership, coaching, and negotiation skills
  2. Learn during workday gaps—protect personal time
  3. Maintain momentum with visible progress

Pain Points:

  1. Long courses = overwhelming and unfinished
  2. No built-in accountability or progress milestones
  3. Generic sales training ignores real team dynamics
Aaliyah Brooks profile photo

Name: Aaliyah Brooks

Age: 23

Occupation: Junior Marketing Associate

Tech Savviness: High

Location: Atlanta, Georgia

Recent grad juggling her first marketing role with freelance projects. Seeks micro-learning opportunities during commutes and breaks to build deeper strategy skills and stand out in her field.

Goals:

  1. Master analytics, messaging, and brand voice
  2. Quick wins with consistent momentum
  3. Digestible micro-lessons that stick

Pain Points:

  1. Traditional courses = energy drain + homework vibes
  2. Zero time for hour-long learning sessions
  3. Cookie-cutter content misses her unique goals

Refining into low-fi

Low-fidelity wireframe showing user dashboard with learning modules and AI assistant placement

User's dashboard

The user dashboard features clear navigation cards that help users understand their current location within the platform. The AI chat assistant is prominently positioned for easy access and immediate support.

Low-fidelity wireframe showing AI assistant chat interface with question and answer flow

AI assistance chat page

An intuitive chat interface enables users to ask questions and receive immediate AI-powered responses, streamlining the learning experience.

Low-fidelity wireframe showing lecture video interface with download and offline viewing capabilities

Lecture video page

The lecture interface provides download functionality, allowing users to access content offline and learn at their convenience.

User Journey

The platform seamlessly integrates into users' daily routines through a streamlined learning path—from personalized onboarding and AI-powered content delivery to adaptive progress tracking that maintains engagement and momentum.

Learn with Chat user journey flow diagram showing the learning path from onboarding through AI-assisted learning modules and progress tracking
Explore Interactive Flow

First usability test takeaway

A/B testing with 5 working professionals, aged 25 to 49:

1. Users had no clear indication of their progress within each course. We added progress bars to each card to significantly reduce onboarding time.

2. Critical navigation buttons like "review" were poorly positioned. We moved them to more prominent locations for easier course navigation.

  1. Progress bars were positioned below course cards, creating confusion about learning progress.
  2. "Review" and "resume" buttons lacked visual prominence in the course navigation.
Before: Initial design with progress bars under cards and less prominent buttons
  1. Integrated progress bars directly within each course card, providing immediate visual feedback on learning progress.
  2. Enhanced the visibility of review buttons by repositioning them prominently within each course section.
After: Progress bars integrated within cards and prominent review buttons

MVP takeaway 1: Content organization

A/B testing with our first batch of users (working professionals, aged 25 to 49):

  1. Users struggled to locate essential content on concept pages due to poor information hierarchy.
  2. Course duration and instructor information were difficult to find, leading to extended search times.
Before: Concept page with difficult to locate important content and course information
  1. Reorganized the layout according to user-perceived priority, creating a clear information hierarchy.
  2. Prioritized essential information using card-based design to reduce cognitive load and onboarding time.
After: Reorganized layout with prioritized information in cards for better discoverability

MVP takeaway 2: Information accessibility

A/B testing with our first batch of users (working professionals, aged 25 to 49):

  1. Course completion time, instructor names, and learning objectives were poorly positioned and hard to locate.
  2. Users spent excessive time searching for basic course information before making enrollment decisions.
Before: Course completion time, instructor names, and study goals are hard to locate
  1. Positioned all essential course information in prominent card layouts with clear visual hierarchy.
  2. Placed instructor details, duration, and objectives in the center of the page as secondary-priority elements.
After: Course information organized in cards with clear visual hierarchy

Visual Identity

Basics

Neutral grayscale foundation providing clear hierarchy and excellent readability across all interface elements.

Color swatches
25#FCFCFD
50#F9FAFB
100#F2F4F7
200#EAECF0
300#D0D5DD
400#98A2B3
500#667085
600#475467
700#344054
800#182230
900#101828
950#0C111D

Primary

Professional blue palette representing trust, intelligence, and innovation in the learning technology space.

Color swatches
25#FCFCFD
50#F9FAFB
100#F2F4F7
200#EAECF0
300#D0D5DD
400#98A2B3
500#3A3EAB
600#475467
700#344054
800#182230
900#101828
950#0C111D

Warning

Alert and warning palette ensuring clear communication of errors, cautions, and important notifications.

Color swatches
25#FFFBFA
50#FEF3F2
100#FEE4E2
200#FECDCA
300#FDA29B
400#F97066
500#F04438
600#D92D20
700#B42318
800#912018
900#7A271A
950#55160C

Success

Positive feedback palette communicating achievements, completion, and successful interactions.

Color swatches
25#F6FEF9
50#ECFDF3
100#DCFAE6
200#ABEFC6
300#75E0A7
400#47CD89
500#17B26A
600#079455
700#067647
800#085D3A
900#074D31
950#053321

Typography System

Inter provides excellent readability and modern appeal, perfect for learning-focused interfaces that need clarity and professionalism.

Display

Family:'Inter', sans-serif
Size:48px
Weight:700
Line Height:1.2
Usage

Hero headlines and major section titles

Master New Skills with AI

Heading

Family:'Inter', sans-serif
Size:32px
Weight:600
Line Height:1.3
Usage

Section headings and module titles

Business Strategy Fundamentals

Body Large

Family:'Inter', sans-serif
Size:18px
Weight:400
Line Height:1.6
Usage

Primary content and lesson descriptions

Learn strategic thinking frameworks that top business leaders use to make decisions.

Body

Family:'Inter', sans-serif
Size:16px
Weight:400
Line Height:1.5
Usage

General text and interface labels

Complete this module to unlock the next lesson

Caption

Family:'Inter', sans-serif
Size:14px
Weight:500
Line Height:1.4
Usage

Buttons and small UI elements

Start Learning

Future Opportunities

While there's still room to refine, Learn with Chat is now well-positioned for expansion. Users navigate the experience with ease—exploring topics, asking follow-ups, and progressing at their own pace. Most critically, the chat interface enables bite-sized, on-demand learning that feels manageable and approachable—especially for users who struggle with dense or rigid formats. By transforming complex material into digestible exchanges, the app supports deeper understanding and stronger engagement, validating the original product vision.

The app empowers users who feel overwhelmed by traditional learning methods by delivering knowledge in bite-sized, conversational pieces—tailored to their speed and motivations.