Case Study · EdTech · AI

AI-powered IELTS preparation, built around feedback that learners can act on

IELTSGRADER turns an AI-generated band score into clear corrections and a next step. Avid designed and built the product from first wireframe to production.

Client / Product
IELTSGRADER
Platform
Responsive AI-powered web platform
Services
Product Design · UX/UI · Full-Stack Development
Industry
EdTech, AI
Stack
Design
Figma
Front end
Next.js (App Router)TypeScriptTailwind CSSshadcn/ui
Back end
Node.jsSupabase
Deployment
Fly.io
IELTSGRADER dashboard showing latest band score, target band, skill growth chart, and errors and impact summary
The problem

A score alone doesn't tell learners how to improve

IELTS learners can practice again and again and still struggle to see where they are losing marks and what to do differently. Traditional practice leaves a gap between the result and the next step.

Submit an essay
Get a score
Still don't know what to fix

IELTSGRADER needed to turn that score into something more useful: clear feedback, specific corrections, and a path toward improvement.

The goals

Aligning user needs with business objectives

User goals

Help learners understand their IELTS performance, identify weaknesses, and know what to work on next.

Business goals

Create an engaging experience that encourages repeat practice, visible progress, and long-term learner retention.

Design goals

Turn detailed AI evaluation into a clear, approachable experience without overwhelming the learner.

The users

Designing around what learners actually need

John Doe
Preparing for IELTS Academic

John is preparing for IELTS to study abroad. They practice regularly but struggle to understand exactly why they receive a particular score and what to focus on next.

Goals

  • Achieve Band 7+
  • Improve weak areas
  • Track progress
  • Practice consistently

Needs

  • Clear score breakdown
  • Specific corrections
  • Personalized guidance
  • IELTS-style practice

Pain points

  • Doesn't understand why marks are lost
  • Generic feedback is hard to act on
  • Hard to identify the biggest weaknesses
  • Doesn't know what to practice next
Learners don't just need to know their score. They need to know what caused it and how to improve it.
Our thinking

From assessment to improvement

The goal was never to display an AI-generated IELTS score and stop there. We wanted learners to understand their performance and turn feedback into real improvement. The challenge was giving enough detail to make the evaluation valuable while keeping it simple enough to take in quickly.

We structured the experience around a natural learning journey: practice, evaluate, understand, improve, and track. Instead of showing all the AI feedback at once, we organized it progressively. Learners start with the overall band score, then open criterion-level performance, detailed explanations, sentence corrections, and recommendations as they need them.

The same thinking shaped the wider product. The dashboard, practice flows, evaluation reports, and progress views work together rather than feeling like separate features. Every interaction answers one question: how did I perform, why did I get this result, and what should I do next?

With a clear information hierarchy, focused interactions, and a scalable component system, a technically complex AI assessment became a more approachable and actionable learning experience.

Constraints

Designing around complex AI output

The AI could produce a large amount of detailed feedback, but showing everything at once would make the product hard to navigate. We also had to support multiple IELTS scoring criteria, responsive layouts, and a scalable component architecture within existing product and technical constraints.

The key trade-off was depth versus simplicity. We put the most important information first and let learners explore deeper feedback when they need it.

Final product

From writing submission to personalized feedback

IELTSGRADER login screen with Google sign-in and email options
Sign in Google sign-in or email, with nothing extra in the way.
IELTSGRADER dashboard with latest band, target band, credits left, and skill growth chart
Dashboard Latest band, target, credits, and skill growth in one place.
Practice Writing dialog offering untimed grading or timed Academic and General mock exams
Practice picker Grade a draft with no timer, or take a timed Academic or General mock.
IELTSGRADER plans page comparing a Premium subscription with one-time credit packs
Plans A subscription or one-time packs that never expire, with prices shown per evaluation.
Evaluation report grammar tab showing strengths, weaknesses, and grammatical structures used
Evaluation report Strengths and weaknesses first, then grammar, vocabulary, and flow one tab at a time.
Timed IELTS Writing Academic Task 1 exam with countdown timer, chart prompt, and word count
Timed exam A writing room built like the real test, with the prompt, timer, and word count in view.
IELTSGRADER landing page with a free tutor report and Speaking and Writing practice options
Landing page Two free evaluations, no card, and a direct route into practice.
IELTSGRADER settings page with profile details and target IELTS band
Settings Profile and target band, so guidance follows the learner's goal.
The outcome

A clearer path from practice to improvement

Turned scores into actionable feedback instead of a single performance number.
Made complex AI evaluation easier to understand through progressive feedback.
Connected individual practice sessions to long-term progress.
Created a scalable product foundation for personalized IELTS learning.
Combined product design and development from Figma through production.
IELTS Grader helps learners move beyond "What score did I get?" to "What should I improve next?"

Want a product like this built end to end?

Start a Project