Building a Learning Platform with an AI-First Workflow

Building a Learning Platform with an AI-First Workflow

Building a Learning Platform with an AI-First Workflow

COMPANY

TraderLion

DURATION

3 weeks

ROLE

Sole Product Designer

Context

TraderLion is a trading education platform that offers structured courses, video content, and community to modern traders.

GOAL

The goal was to design a new platform where traders could learn through content, mentors, and AI support in one connected experience.

Outcome

Designed an AI-assisted learning platform that brought structured content, mentor-based GPTs, and in-context AI support into one system.

7

learning actions supported through AI, notes, and recommendations

4+

core AI workflows built into the platform

60%

fewer steps to get course-specific help through contextual AI

The Final Product

We made AI feel native to learning by placing it where users already study, reflect, and revisit content.

We made AI feel native to learning by placing it where users already study, reflect, and revisit content.

We made AI feel native to learning by placing it where users already study, reflect, and revisit content.

  1. AI Hub gave users one central place to explore trading mentors, and general AI support.

  2. AI in courses and videos brought contextual help into the learning flow instead of making users switch tabs or search elsewhere.

TraderLion AI Assistant Hub

A dedicated AI space which acts as a discovery layer for all of TraderLion's content.

WHY

Learners know what they want to understand but they don't always know where in the library to find it. Three entry points into the content ecosystem from one question.

Video and Course recommendations by AI

Save AI Response as a Note

It lets users keep useful explanations and insights from chat as part of their personal learning material.

WHY

By the time a learner remembers something useful from chat, it is often buried inside the conversation. This helps users keep important explanations and insights as part of their own learning material instead of losing them in a one-time interaction.

Users can access these notes in AI hub and search through them

They open as a modal and users can go to next note or copy response

Transcript → Ask AI

Selecting a transcript line pre-fills the AI input with that exact text as context

WHY

By the time a learner opens a chat to ask about something they just heard, the context is already degraded. This helps users in getting the exact context from the transcript.

Save Note / Ask AI action menu triggered by text selection

Clicking a single transcript line also triggers the menu.

Choosing "Ask AI" takes the selected transcript text into the AI input as context.

Transcript → Your notes

It becomes a discovery layer over all of TraderLion's content.

WHY

Learners know what they want to understand but they don't always know where in the library to find it. Three entry points into the content ecosystem from one question.

Choosing "Save Note" takes the selected transcript text into a new note tab

New note tab

Saved notes tab

Built with AI

AI-first design process

AI Design Workflow

This project became a way to explore what changes when AI is leveraged across research, structure, design, and prototyping from the beginning.

This project became a way to explore what changes when AI is leveraged across research, structure, design, and prototyping from the beginning.

This project became a way to explore what changes when AI is leveraged across research, structure, design, and prototyping from the beginning.

Market Research

Market Research

Feature Matrix

Feature Matrix

Blueprint for MVP

Blueprint for MVP

1. Market & Competitive Research

Claude

Mapped the landscape of AI-assisted edtech tools, identifying patterns in contextual help using AI assistant chats.

2. User Research Framing

Claude

Without direct user access, used Claude to pressure-test assumptions by identifying what traders would likely struggle with.

3. Feature Clustering & Prioritization

Claude

Fed in stakeholder conversation notes and asked Claude to cluster by theme, identify overlap, and flag core vs. nice-to-have.

4. Information Architecture & User Flows

Claude + Figma

Generated multiple IA options for the learning and AI experience, then evaluated each against real constraints.

5. Prototype Generation

Figma Make + Claude Code

Used Claude Code to generate a working mobile prototype, and Figma Make for the web app.

6. Design System

Figma Make + Claude + Figma

Used Figma Make to generate initial component structures and visual patterns, then refined manually in Figma.

Content Without Structure

TraderLion’s existing WordPress setup lacked a clear structure for navigating learning content

TraderLion’s existing WordPress setup lacked a clear structure for navigating learning content

Homepage

Homepage

Course page from template

Course page from template

Problem

Four gaps that shaped what was built

Four gaps that shaped what was built

Fragmented Learning

Users constantly left the platform to Google unclear concepts

Lost Context

Notes and insights were scattered across platforms, making it hard to review and retain key learnings.

Delayed Clarity

Questions arose during lessons, but users had to wait for community responses or rewatch entire sections.

Passive Consumption

Watching videos and reading PDFs without active engagement led to poor retention & low completion rates.

How might we make AI assistance feel native to a learning environment?

Constraints I worked with

No direct user access

No direct interviews or usability testing with real traders.

No existing system

No existing design system or reusable foundation to build from.

How it all started

I started by understanding how the best learning and AI chat platforms handle the same problems.

Coursera, Khan Academy, Udemy, Uxcel, SkillShare, ChatGPT, Claude, were major sources to understand the information architecture, user flows and product decisions.

This helped me with structuring information architecture, journey map, user flows and prioritization matrix.

FigJam Screenshot of various references, user flows and journey map

FigJam Screenshot of various references, user flows and journey map

Major Shifts in the Product

The design evolved significantly from first version to final in collaboration with the engineers and founders.

The design evolved significantly from first version to final in collaboration with the engineers and founders.

The design evolved significantly from first version to final in collaboration with the engineers and founders.

Worked in rapid sprints to refine both the product direction and the experience design. Three major iterations and additions that happened through collaboration:


  1. Introduced an onboarding experience to understand each user’s trading background, goals, and level before they entered the platform.

  2. Added AI trading mentors as GPTs so users could learn through distinct expert perspectives rather than a single generic assistant.

  3. Integrated AI directly into course videos and transcripts so users could ask questions in context without leaving the learning flow.

Onboarding screen after the questionnaire

Onboarding screen after the questionnaire

Ongoing course screen with AI assistant tab

Ongoing course screen with AI assistant tab

Notes from AI chats in "My learning page'

Notes from AI chats in "My learning page'

Saved notes in 'AI Assistant' page

Saved notes in 'AI Assistant' page

Design System

It was built to scale, with every decision made with the AI interaction layer in mind.

It was built to scale, with every decision made with the AI interaction layer in mind.

What was built

An end-to-end AI-assisted learning platform that provides instant clarity and keeps the learning more engaging with AI.

Notes from AI chats in "My learning page'

Notes from AI chats in "My learning page'

Saved notes in 'AI Assistant' page

Saved notes in 'AI Assistant' page

What I learnt

Starting from zero on a full-scope project is a different kind of challenge

Starting from zero on a full-scope project is a different kind of challenge

Breaking from traditional design process took adjustment

Breaking from traditional design process took adjustment

Structure needed more flexibility

States should start earlier

This project started with a lot of excitement for me because I had not worked on something this scoped before. Once I got into it, especially with AI becoming part of both the product and the process, I kept exploring. Claude and Figma Make were also getting better around that time, so it was an experiment with them and understand where they could speed things up.


One of the more challenging parts was creating a template for courses, because each course had its own sections. That's where I decided to add structure in few and make it flexible for others. Later in the project, I also started thinking more intentionally about different states across the platform, and that made me realize this kind of thinking needs to happen much earlier, especially when building a system for a large product.


Overall, loved every bit of this project as I continued to work on the mobile app (that's for another case study).


Next

How can AI move beyond answers to real actions?

Designed actionable AI interactions for Deepvue’s mobile trading platform

View Case Study

Let's Connect

Reach out if you want to hire me or want to work on something amazing together or to just yap about life and design!

Contact Now

anjaliibhati@gmail.com

Let's Connect

Reach out if you want to hire me or want to work on something amazing together or to just yap about life and design!

Contact Now

anjaliibhati@gmail.com

Let's Connect

Reach out if you want to hire me or want to work on something amazing together or to just yap about life and design!

Contact Now

anjaliibhati@gmail.com