Designing an AI-powered learning experience that’s fast, focused, and impossible to outgrow.
Client
Confidential
My Role
UX Designer
Tools
Figma, FigJam, Notion
Project Overview
The objective is to enable “Superficient Learning” a state where learning is:
Low-stress: No information overload or performance anxiety.
Conversational: Learning happens through intelligent dialogue with an AI tutor.
Gamified & Motivating: Progress is visually rewarding and socially shareable.
Accessible: Whether you’re a teenager or a working professional, the platform should feel instantly usable.
Goal
Design a “non‑negotiable” learning experience for AI Tutor—an AI‑powered platform where a learner (from 10th‑grader to solution architect) can:
- Start instantly with a single prompt (“Byte Course”) and feel guided end‑to‑end.
- Learn through dialogue with an AI Tutor while applying knowledge in a focused workspace.
- Build confidence via low‑stress assessments and visible progress.
- Stay motivated with streaks, achievements, and clear next steps.
Core Concerns
Fragmented flow & context‑switching
One‑size‑fits‑all paths
Slow, generic feedback
Shallow motivation mechanics
Design Approach
Inspired by Vercel, Replit, Chronicle HQ, Shadcn, 21st.dev
Single Focus per Screen (Chronicle HQ)
Each screen is centered on one action—learn, reflect, or progress—to boost clarity and engagement.
Clean Grid Layout (Vercel)
Dark-mode-first, responsive design using scalable grid systems.
Instant Feedback (Replit)
Real-time AI responses, streaks, and animations to keep users engaged.
Modular UI & Microinteractions (Shadcn / 21st.dev)
Bento-style layouts with smooth animations for dashboards and profiles.
Conversational Learning
A chat-based TutorAgent delivers content interactively through text, visuals, and code.
User Flows
The core experience is designed around five primary screens, creating a seamless flow:
Dashboard
Personalized hub with “Start a Byte Course,” streak counters, and ongoing courses.
Learning Screen
Split-view for real-time AI tutoring and hands-on application.
Assessment
Low-stress, one-question-at-a-time evaluations with instant feedback.
Profile
Visual progress tracking, achievements, skills graph, and course history.
Course Preview
Clear overview of what a course offers, including final project outcomes.
Need & Opportunity
Key Features
Byte Course Prompt
Generate a tailored micro‑course instantly by entering a topic or goal, reducing time to start learning to seconds.
AI Tutor Chat
Conversational interface with context memory, providing step‑by‑step guidance, explanations, and suggestions.
Interactive Canvas
Dynamic workspace to view slides, diagrams, apps, or write and test code—all in one place.
Instant Feedback Assessments
One question per screen with immediate, AI‑generated feedback to reinforce understanding quickly.
Learning Streak Tracker
Visual streak counter motivates consistent engagement and celebrates ongoing progress.
Skill Growth Graph
Data visualization that tracks improvement across competencies over time, making progress tangible.
Responsive, Accessible Design
Seamless experience across devices with built‑in accessibility features like voice input, captions, and keyboard support.
Adaptive Recommendations
Personalized course and lesson suggestions based on learner behavior, past performance, and goals.
Course Preview with Outcomes
Clear overview of modules, time estimates, and final project mockup to set expectations before starting.
Gamified Achievements
Badges and certificates tied to skill mastery milestones to boost confidence and encourage completion.
Mockups
