Case Study · E-learning Platform

Educraft

Modern e-learning platform designed for course discovery

Role

Product Designer

Tools

Figma, Claude AI

Timeline

1–2 weeks

Educraft — Hero section overview

01 — Overview

Quick Info

Role

Product Designer

Platform

Web

Goal

Simplify course discovery

02 — Problem

What was broken?

01 Understand what the platform offers at a glance
02 Identify courses that match their goals or skill level
03 Trust the platform enough to take action

User pain point mapping

Competitor audit — key gaps

03 — Goal

Design objectives

◎

Simplify Discovery

Simplifies how users discover and identify courses relevant to their goals.

◈

Improve Clarity

Improves content hierarchy and readability across all key sections.

◇

Build Trust

Builds trust through well-organized information and credibility signals.

▷

Drive Enrollment

Encourages users to take action — enroll or sign up — at the right moments.

04 — Design Approach

How I approached the design

Visual Hierarchy

Strong typography and spacing to guide users naturally.

Minimalism

Removed distractions, used white space intentionally.

Conversion Flow

Structured to move users from discovery to enrollment.

Early wireframe explorations — structure before style

05 — Key Sections

Building the experience

Hero Section

Clear headline and CTA — communicates value immediately.

Course Section

Card layout for easy scanning and comparison.

Testimonials

Social proof to build credibility and reduce enrollment hesitation.

Pricing

Easy-to-compare tiers so users choose a plan confidently.

Call-to-Action

Placed at key decision points throughout the page.

06 — Design Showcase

Final Screens

Complete Design System

Homepage

Course View

Mobile Experience

Educraft — key screens at desktop breakpoint

Course section — card layout

Pricing — three-tier layout

07 — Visual Design

Design decisions

Typography Clean typefaces chosen to improve readability and hierarchy

Spacing system Consistent spacing scale to create structure and visual rhythm

Aesthetic Minimal — unnecessary elements removed to reduce distractions

Color Subtle contrast used intentionally to guide user attention

08 — Implementation

From design to live product

Translated into a responsive live product using Figma and Claude AI for rapid iteration.

09 — Outcome

What was achieved

Key sections designed and shipped

1:2

Weeks from brief to live product

100%

Responsive across all breakpoints

A focused, modern interface that simplifies course discovery and drives enrollment.

Educraft — final design, full-page view

10 — Reflection

Looking back

Key takeaways

Structure and hierarchy are critical in content-heavy interfaces
Simplicity improves usability and overall engagement
Designing with intent leads to better user outcomes

What I'd improve

Conduct user testing to validate layout and content decisions
Explore personalization features to improve course relevance
Expand the platform into a more complete product experience beyond the landing page

See the live product

View Live Site ↗