← All work
Easy Option LearningLive website

A guided path into options trading.

Designed for Ananta Securities, Easy Option Learning connects three course levels with lessons, quizzes, and progression.

Role
Designer & frontend developer
Type
Client project
Tools
React · Tailwind · AI-assisted development
Platform
Web
Visit live site ↗
Landing page
Landing page
The brief

Ananta Securities needed an education platform for finance beginners. The design had to make the course structure understandable and connect learning modules, quizzes, and level progression into one experience.

What I owned

I built and refined the website directly in code with AI assistance, incorporating client feedback across successive versions. I worked with a backend developer on architecture, API endpoints, and integration.

Starting point

A client brief for an options-trading education platform. The design evolved in the working website, without a Figma stage.

How I worked

I skipped Figma and designed in the browser, building the platform in React and Tailwind with AI. Each review round happened on the working site, so feedback was about real screens and real states. I worked out the API endpoints with the backend developer as the screens took shape.

Design decisions

How it takes shape.

Decision 01 · Separate the welcome from the next lesson

Separate the welcome from the next lesson

After login, the dashboard splits in two: a welcome panel with level, lessons completed and streak, and a dark Continue Learning panel with the exact next lesson and one button.

The revised dashboard: welcome and progress on the left, Continue Learning on the right.
The revised dashboard: welcome and progress on the left, Continue Learning on the right.

Why it matters

A returning learner opens the app to do one thing: continue. Giving that action its own panel, with the lesson name and a single button, makes it the first thing they see. The stats stay beside it as context, not competition.

Decision 02 · Connect learning with a check on understanding

Connect learning with a check on understanding

Every module pairs its lessons with a quiz, and the module list shows a progress ring and how many lessons are done.

Module progress shows completed lessons and the learner’s next step.
Module progress shows completed lessons and the learner’s next step.

Why it matters

In options trading, a half-understood concept costs real money. A quiz at the end of each module tells learners whether they are ready to move on before they trade, and the ring shows how close they are.

Decision 03 · Design in the browser, not in a file

Design in the browser, not in a file

I designed directly in React and Tailwind with AI, and agreed the API endpoints with the backend developer while the screens took shape.

The coded learning interface, refined through client feedback and backend collaboration.
The coded learning interface, refined through client feedback and backend collaboration.

Why it matters

For a content-heavy course, the hard parts were responsive layouts and lesson states: locked, in progress, done. Building them for real meant I designed those states instead of discovering them at handoff.

Where it landed

Live website.

Delivered the live learning website and frontend across course content, quizzes, level progression, and marketing pages through staged client reviews.

Explore live ↗

Reflection

Live market integration (showing real charts during lessons) was discussed but out of scope - would be the biggest differentiator in v2.

Mobile experience was desktop-first - many learners watch on phone. Needs a dedicated mobile lesson flow.

Instructor dashboard for uploading content was specced but not fully designed.

The platform is live at anantasecurities.in/easyoptionlearning - design shipped to production as a freelance deliverable.