Students couldn't find, compare,
or confidently buy a course

The Aladia platform offered a wide catalogue of courses but the marketplace made it hard to navigate. Students were overwhelmed by too many options with no clear hierarchy, struggled to compare courses side by side, and the purchase flow had too many steps — leading to drop-offs before checkout.

Understanding why users
weren't converting

Before designing anything, I needed to understand where the existing experience was failing. I combined qualitative observation with competitive analysis to build a clear picture of the problem space.

Two distinct users,
one marketplace

From research, two clear user archetypes emerged — each with different browsing behaviours, trust signals, and decision-making patterns.

Browse-to-purchase:
the primary journey

The core flow I designed moves users from landing to purchase in 7 steps, with the detail page as the critical decision point.

Four key screens across the full
discovery-to-purchase journey

The marketplace was designed across mobile and desktop with a consistent dark theme matching the Aladia brand. Each screen was built to move the student one step closer to a confident purchase.

01 — Marketplace homepage. Category hero with subject pills, Top 10 Today ranking, and New Courses feed.

02 — Social discovery. Top Instructors and Organizations sections with verified badges and follow actions.

03 — Course detail page. Full-screen video player with persistent Buy Now CTA, rating, and course metadata always visible.

04 — Course description panel. Chapter-by-chapter curriculum breakdown with lecture counts, durations, and locked/unlocked states.

The course detail page layout — the
decision that mattered most

The course detail page was the most critical screen in the entire flow. It's where students decide whether to buy or leave. I made several intentional structural choices to maximise confidence and reduce drop-off.

Shipped on the Aladia platform
across mobile and desktop

The marketplace was shipped as part of the full Aladia platform release. The design established a consistent discovery-to-purchase flow that scaled across screen sizes, with the dark theme and gold accents reinforcing the Aladia brand identity throughout the journey.

The ranked "Top 10 Today" section and verified instructor cards were particularly well-received — giving students social proof and a clear starting point even when they didn't know exactly what they were looking for.

The old design forced instructors to manage
a live course from four disconnected screens

The redesign was driven by four specific failures in the original system:

I proposed collapsing four screens
into one three-panel layout

The original design spread course management across four separate screens. Every action required navigating away and losing context. I proposed a fundamentally different structure.

The result: After launch, instructors found the new course builder noticeably easier to use. The consolidated view meant they could manage a live course — curriculum, notifications, and scheduling — without ever leaving the content view.

How I learned what was
actually breaking

The redesign wasn't based on assumptions — I mapped the existing tool's failures through direct observation and stakeholder input.

Designing for the instructor
who has 20 minutes

Create → Build → Schedule → Publish

Seven screens across the full
course management experience

The course creation system was redesigned to give instructors a clear, structured flow. The highlight was a three-panel content view that surfaced notifications, schedule changes, and exams alongside the curriculum — eliminating context switching.

Before & after — real screens

Before — single panel, no live data

Static curriculum list only. Notifications, schedule changes, and exams required separate screens.

After — three panels, all context visible

---

Curriculum (left) · Live notifications & reschedule requests (centre) · Upcoming exams (right) — all at once.

01 — Spaces view. Course cards with Published/Live status badges, start dates, and pricing — giving instructors an instant overview of all their courses.

02 — Course management panel. All course sections — Categories, Billing, Goals, Content, Certificate, Educational Toolbox, Control Center — visible in one structured side panel with live counts.

03 — Redesigned content builder (key highlight). Three-panel layout: curriculum on the left, live notifications and reschedule requests in the centre, upcoming exams on the right. Instructors can manage everything without leaving the content view.

04 — Lecture edit panel. Title, date/time, subject assignment, repeat settings, and thumbnail — all in one clean side panel with Save and Delete actions.

05 — Lecture overview. Session details including room ID, host, participants, start/end times, duration, and linked calendars — giving instructors full post-session visibility.

07 — Lecture activity. The Activity tab logs all session participants — name, role (Host, Co-host, Attendant), issues detected, join and leave times. The Recording & Summary section shows generated recordings with resolution, file size, duration and status.

06 — Lecture analytics. The Analytics tab (powered by 100ms) shows a participant timeline of joins, leaves, recording events and errors. Session Health score surfaces quality issues, join/publish/subscribe failures and disconnections. Device & Browser breakdown shows how participants accessed the session.

The three-panel content view —
eliminating context switching

The most significant design decision was redesigning the content builder from a single-panel list into a three-panel layout. This was driven by the insight that instructors constantly needed to cross-reference their curriculum with incoming notifications and upcoming exams — but had to switch screens to do it.

Shipped as part of the Aladia
platform — used by instructors daily

The course creation system shipped across mobile and desktop as a core part of the Aladia platform. The redesigned content builder reduced the need for instructors to switch between views, while the lecture-level analytics gave them meaningful data about each session's quality and engagement.

The three-panel layout was particularly valued for live courses — where real-time notifications, reschedule requests, and exam visibility all needed to coexist with active curriculum management.

Books were scattered — no universal place
to upload, organise, and reuse them

Before the Book Library, there was no single place on the Aladia platform where teachers or organisations could upload books and reuse them across everything — courses, subjects, lectures, and calendar events. Every time an instructor needed a book in a new context, they had to re-upload or re-attach it from scratch. There was no source of truth, no reuse, and no connection between books and the educational structure around them.

The deeper complexity was that books on Aladia don't exist in isolation. A book can be linked to a Subject Area — and each subject may have its own assigned teacher. When a book is added to a course, the system needs to ask: should the subject be added too? And if so, should the subject's teacher be invited to the course? Getting this smart, connected flow right was the core design challenge.

I argued for a central library
instead of per-course attachments

Before this feature existed, books were just files attached to individual lectures. There was no concept of a "book" as a reusable object. I argued for something fundamentally different.

Why this mattered: This wasn't just a UI feature — it required designing a new data model from scratch. Books needed to be entities with their own identity, linked to subjects and courses through the same architecture as Exams and Subject Areas. The consistency across all three Education features is what makes the platform feel like a system, not a collection of tools.

Before this feature, books
didn't exist as a concept

This wasn't a redesign — it was inventing a system from nothing. Before the Book Library, the platform had no concept of "books" at all. Teachers could only attach files to individual lectures, one at a time. There was no library, no reuse, no metadata, and no connection between content and the educational structure around it.

The instructor drowning
in lecture attachments

Upload once, link everywhere

Four screens covering the full
library-to-book creation flow

The Book Library system was designed as a side panel within the existing Spaces context — keeping instructors oriented within their course while managing an entirely new content type. The clean layout was the priority throughout.

01 — Book Libraries panel. Accessible from Settings under Spaces, teachers and organisations see all their libraries in one place — with a book count per library and a New Library action.

02 — Library members & roles. Inside a single library (Grammar & Writing), the member list shows 12 members with assigned roles — Owner, Curator, Editor, Viewer — with inline role management and online status.

03 — Books list. All books inside the library are shown with their cover thumbnail, author, and subject/study level tags. Multiple editions of the same book (Italian, Spanish, First Biennium) are clearly differentiated by tag.

04 — Book Details form. The New Book panel supports ISBN lookup (optional), title, author, file upload, thumbnail, subject assignment, and description — with an Add Companion Volume action for sub-books and a 0 Courses counter at the bottom.

05 — Book detail & Companion Volume. The book detail view shows the cover, subject tags, an Open Book action, full description, and a linked Companion Volume (sub-book) with its own tags and Open Volume action.

06 — Student PDF reader. The integrated PDF viewer opens in a clean two-column layout with a full toolbar — page navigation (25/200), zoom, bookmark, annotation, table of contents, and search — giving students a focused reading experience inside the platform.

A clean layout that handles
4 creation methods in one form

The most interesting design challenge was consolidating four completely different book creation methods — PDF upload, ISBN lookup, AI generation, and manual entry — into a single, clean panel that didn't feel overwhelming. The solution was a smart ISBN field at the top: optional, but when used, it auto-fills all metadata below — reducing the form from a chore to a single tap.

Designed from zero — shipped as a core
new feature of the Aladia platform

I designed the Book Library system entirely from scratch — no prior designs, no existing patterns to follow. It shipped as a fully functional new module accessible to teachers and organisations, supporting all four book creation methods (PDF upload, ISBN lookup, AI generation, manual entry), role-based access control, and deep integration with courses, lectures, subjects, calendar events, and live meeting rooms.

Shipping a brand-new content type meant I had to establish the mental model, the navigation patterns, and the permission system simultaneously — while keeping the interface clean enough that instructors never felt the weight of what was running underneath.

Designing a new content type means
designing a mental model first

The biggest challenge with Book Creation wasn't the UI — it was helping users understand what a "Book Library" even was and how it related to their courses, lectures, and events. I had to design a mental model (library → book → course → lecture → page) before designing any screen, so every interface decision could reference a clear conceptual structure.

I also learned a lot about permission system design — specifically how to make role hierarchies (Owner, Curator, Editor, Viewer) feel intuitive rather than bureaucratic. The key was showing permissions through what users can and can't see, not through warning messages.

A brand new feature — building an exam system
for Aladia from the ground up

The Exam Creation system was a net-new feature I designed from scratch. Aladia had no exam infrastructure before this — no builder, no collections, no proctoring, no results dashboard. I was responsible for defining and designing the entire system: how exams are created, stored, assigned to courses, taken by students, monitored by teachers, and evaluated.

The scope was significant. The system needed to handle three fundamentally different exam modes — written scheduled, written flexible, and oral — each with different availability windows, retake rules, evaluation flows, and proctoring requirements. On top of this, the grading system needed to keep exams course-agnostic (reusable across courses) while letting each course define its own scoring scale and weights per exam type.

I proposed the portable
Collections model

The original brief was straightforward: build an exam feature inside courses. But as I mapped the requirements, I realised per-course exams would create the same duplication problem we'd already solved with Books and Subjects.

Why this mattered: Without portability, a teacher with the same exam in 3 courses would maintain 3 separate copies. Changes wouldn't sync. The Collections model meant one source of truth — consistent with how Books and Subjects already worked, and reducing the maintenance burden for teachers managing multiple courses.

Understanding the full assessment lifecycle

The exam system touched more platform components than any other feature. Before designing, I mapped the full lifecycle and the different users at each stage.

The teacher who needs 40 students
visible in 2 seconds

Create → Assign → Monitor → Grade

13 screens across the full exam lifecycle —
from creation to evaluation

The exam system was designed end-to-end: instructors create and organise exams in Exam Collections, build questions using the Document Builder with AI assistance, assign exams to courses with scheduling and proctoring settings, monitor live sessions via breakout rooms, and evaluate results — including recheck requests from students.

01 — Exam Collection members. Each collection supports role-based access — Owner, Curator, Editor, Viewer — with live online status and inline role management. The same mental model as Book Libraries and Subject Areas.

02 — Exams inside a collection. Each exam card shows its type (Midterm, Quiz, Pre-Test, Final), subject tags, language, and study level — giving instructors a scannable overview of their full exam library.

03 — New exam details panel. Instructors define the exam title, difficulty level, type, subject assignment, description, and retake count — all in one clean side panel before entering the builder.

04 — Question type selector. The Document Builder supports 8 question types — Multiple-choice, Single-select, True/False, Match the Pairs, Fill in the Blank, Essay, Short Answer, File Upload — plus Saved Questions for reuse.

05 — Exam Builder with a Multiple-choice question. Each answer option is marked Correct or Incorrect inline. The Ask AI action appears per-question for AI-assisted content generation or improvement. Points are set per question.

06 — Multi-page exam structure. The Pages sidebar lets instructors organise exam content across multiple pages — enabling long exams to be broken into logical sections without losing structure.

07 — Exam assigned to course. When an exam is added to a course, instructors configure scheduling, select the exam template, set duration, enable the proctoring system, and define eligibility rules — all in one panel.

08 — Student exam start page. Before beginning, students see the exam title, type badge, subject, instructor, duration, difficulty, question count, score, attempts left, and a Before You Start checklist — setting clear expectations.

09 — Student exam list by chapter. Each exam shows its type, subject, difficulty, current score, attempts remaining, and status (Passed, Failed, Start) — giving students a complete progress overview per chapter.

10 — Student exam submission view. After submitting, students see their answers marked correct or incorrect inline, with a score breakdown per question (0 out of 5). The overall score (25/30) is shown persistently in the header.

11 — Teacher exam results dashboard. The teacher sees exam metadata, total students (12), average score (24.4), pass rate (67%), and a per-student table with submission status, proctoring alerts, and individual scores. A "14 submissions awaiting review" banner surfaces urgent actions immediately.

12 — ★ Main visual: Live virtual exam room with breakout rooms. The centrepiece of the live proctored exam experience — the teacher sees all participants in a live video call and creates individual breakout rooms (one per student). Each room shows its Co-Host, assigned Guests, Invite and Move To actions. The teacher can enter any room at any time to observe, communicate, or resolve issues. This screen drove the majority of design decisions for the entire exam system.

13 — Teacher breakout room monitor. All 40 rooms shown as a live grid — each with the student's name, webcam feed, and exam screen preview. Tabs separate Open Rooms, Closed Rooms, and Proctoring Alert Rooms for fast triage.

Making complexity simple — a system that spans
creation, live monitoring, and evaluation

The exam system touched more parts of the platform than any other feature — it connected to courses, subjects, calendars, live sessions (100ms), the grading engine, and the proctoring system. The biggest design challenge was making all of this feel like one coherent experience rather than a collection of disconnected tools.

Beyond the exam — tracking progress,
giving feedback, and visualising growth

The Registry is the teacher's command centre after exams are done. It brings together attendance, scores, and performance into one view — and introduces two powerful features: written teacher feedback with student acknowledgement chips, and a Subjects Radar that shows each student's strengths and weaknesses across all subjects compared to the class average.

Performance is calculated using a fixed formula: Attendance (30%) + Exams (70%). This ensures scores are comparable across courses, chapters, and time periods — and gives both teachers and students a consistent benchmark to work from.

14 — Registry performance dashboard. Teachers see all enrolled students with attendance %, average score, and performance % with trend indicators (▲▼). Clicking a student opens their full profile — with a per-chapter average performance chart, grouped by subject, showing progress across the entire course cycle.

15 — Teacher feedback panel. Teachers write direct, structured feedback per student — with visibility settings (Teachers only / All) and optional student acknowledgement chips: Understood, Thanks, I'll improve. Low-friction replies that confirm the student read the feedback without opening a full reply flow.

16 — Subjects Radar. A radar chart comparing a student's Attendance, Average Score, and Performance across all subjects — plotted against the class average. Each subject gets its own axis with a trend indicator, giving teachers and students an instant visual of where the student excels and where they need support.

Designed from zero — the most complex
new feature I shipped at Aladia

The Exam Creation system was a brand-new feature I designed entirely from scratch — the most technically and experientially complex thing I worked on at Aladia. Starting with a blank canvas, I defined the information architecture, user flows, and UI for the full system: written scheduled exams, written flexible exams, oral exams with breakout rooms, on-demand exams, AI-assisted question generation, live proctoring, post-exam evaluation, student recheck requests, and a normalised grading engine.

The Registry and performance system rounded out the full exam lifecycle — giving teachers a structured way to track progress over time, write meaningful feedback, and visualise each student's strengths across subjects through the Subjects Radar. The fixed performance formula (Attendance 30% + Exams 70%) was a deliberate design decision to ensure scores remained comparable and trustworthy across all courses.

The most important design skill is
knowing what to show and when

This project taught me that the biggest UX risk in complex systems isn't missing a feature — it's showing everything at once. The exam system had dozens of settings, states, and edge cases. My job was to sequence them: show the teacher only what they need for this step, trust that the next step will surface the next decision.

I also learned how to design for error states and edge cases as seriously as the happy path. The proctoring edge cases — microphone lost, WiFi dropped, student trying to exit fullscreen — each needed a clear, non-alarming UI that told the student exactly what happened and what to do next without killing the exam session.

Subjects were trapped inside courses —
created once, used once, forgotten

Before this redesign, subjects on Aladia were created individually inside each course. Every time an instructor started a new course, they had to recreate the same subjects from scratch — Mathematics, Italian, History — with no connection to anything else on the platform. A subject assigned to one course had no relationship to the same subject in another course. There was no global Subject Area, no reuse, and no link between subjects and the books or exams that belonged to them.

The deeper issue was that each subject could have an assigned teacher — but that assignment only existed within the course it was created in. If a teacher was assigned to a subject in one course, they had to be manually invited to every new course that used the same subject. The platform had no way to understand that these were the same subject, the same teacher, and the same educational context.

The admin who manages
50 subjects across 12 courses

Create once, connect everywhere

Move subjects out of courses and into
a global profile-level Subject Area

The core insight was that a subject is not a course-level concept — it's an organisational concept. Mathematics is Mathematics whether it's taught in Course A or Course B. The teacher who teaches Mathematics is the same person regardless of which course they're in. The books and exams for Mathematics are the same resources regardless of where they're used.

This single architectural decision cascaded into a connected system. When a subject is added to a course, and that subject has an assigned teacher who isn't yet a member of the course — the teacher is invited automatically. When a book or exam is linked to a subject, and that subject is added to a course — the system asks whether the book or exam should also be added, carrying the link forward. Subjects became the connective tissue of the platform.

One subject creation — everything
connected across the platform

The Subject Area system is what made Books, Exams, and Course Creation all feel like parts of one coherent platform rather than separate tools. Here's how the connections work in practice:

The architectural decision that made
the whole platform feel connected

The Subject Area redesign wasn't just a UI improvement — it was a platform-level architectural decision that I proposed and designed. By moving subjects from course-level silos into global profile-level libraries, I created the connective tissue that made Books, Exams, and Course Creation work as one coherent system rather than separate tools.

The automatic teacher invitation flow, the smart book and exam suggestions on subject assignment, and the reusable subject-to-course flow all emerged from this single decision. A teacher or organisation can now build their complete educational content once — subjects, books, exams, teachers — and reuse it across every course they create, with all connections carrying forward automatically.

This case study is the foundation on which the Book Creation and Exam Creation systems were built. Without global Subject Areas, neither the Book Library's subject assignment nor the Exam Collection's subject linking would have been possible.

The best UX decisions are sometimes
architectural, not visual

This project taught me that the most impactful design decisions aren't always about the interface — sometimes they're about the underlying structure. Moving Subject Areas from course-level to profile-level was a structural decision, not a visual one. But it unlocked more UX improvements than any screen redesign could have.

I also learned the value of designing systems that think ahead for the user. The automatic teacher invitation, the smart book and exam suggestions — these weren't features the user asked for explicitly. They were friction points I identified by mapping the full workflow end to end, and then designing the system to handle them invisibly.

Interior design is perceived as a
luxury most people can't access

78% of surveyed users felt interior design services were too expensive for their budget. Existing platforms failed to serve budget-conscious users or provide clear service tiers. No platform offered transparent, tiered pricing for diverse budgets.

Dolce Casa was built to change that — a platform where everyone can transform their living spaces through accessible consultations, curated furniture, and transparent pricing.

Double Diamond — from divergence
to a focused solution

We followed the Double Diamond framework — diverging to explore the problem space, then converging on a defined solution before expanding into development and refining through delivery.

What we learned from
20+ user interviews

We conducted interviews, surveys, and competitive analysis to understand how people approach home design and what barriers prevent them from seeking professional help.

User persona — designing for
real people, real constraints

A warm, approachable
visual design system

A palette anchored by teal as the primary action colour, with taupe and rose providing warmth and sophistication. Source Sans Pro serves as the type family across all weights.

Six key screens across the full
Dolce Casa landing experience

The landing page was designed to guide homeowners from inspiration to action — with transparent pricing, curated galleries, and a streamlined consultation booking flow. Every section was built mobile-first, then expanded to desktop.

01 — Hero section. Trust badge, bold headline with italic accent, dual CTAs (primary teal + secondary outline), and social proof stats. Floating cards surface ratings and satisfaction data.

02 — Why Dolce Casa. Six feature cards in a 3×2 grid with teal accent bars on hover. Icon-led layout communicates value propositions at a glance.

03 — Featured Designs. Filterable gallery with category tabs (All, Living Room, Bedroom, Office). Card-based layout with overlay hover effects.

04 — How We Work. Three-step numbered process with hero image. Guides users from Discovery through Design to Delivery.

05 — Testimonials. Star ratings with customer quotes, avatar badges, and role labels. Social proof from homeowners, designers, and developers.

06 — CTA section. Final conversion block with three trust signals (free consultations, 30-day returns, white glove delivery) and a primary action button.

Validated through usability testing
with 12 participants

We measured task completion, time-on-task, and satisfaction scores across the full prototype. Results validated core design decisions and surfaced four key iterations.

Research prevents assumptions,
transparency builds trust

This project reinforced that starting with thorough user research leads to solutions that address real needs rather than perceived ones. Designing for mobile first forced better content hierarchy, resulting in a cleaner desktop experience too.

Teachers had courses but
no way to package them

Organizations on the platform were selling courses individually — one-off transactions with no recurring revenue. Teachers wanted to bundle courses into subscription tiers (Starter, Pro, Team), but the platform had no mechanism for creating plans, managing subscribers, handling billing cycles, or assigning seats within an organization.

Learners, on the other hand, had no visibility into which organizations offered subscription access. There was no unified place to browse plans, compare tiers, or manage active memberships.

Understanding subscription
patterns across platforms

I studied how established platforms handle subscription creation and management — Stripe's plan builder, Kajabi's offer system, Teachable's pricing pages, and Coursera's enterprise seat management. The goal was to identify patterns that users already understand and adapt them to Aladia's unique model where organizations subscribe to other organizations.

Mapping the subscription
lifecycle end-to-end

The subscription system touches three distinct user types, each with different entry points and goals. I mapped the complete lifecycle to identify every screen and decision point before moving to UI.

From Figma to a working
prototype in code

Beyond Figma prototypes, I built a fully functional 1:1 prototype of the subscription system using Cursor and Claude. This wasn't a throwaway demo — it was a production-fidelity prototype that matched the platform's actual design system, component library, and interaction patterns.

Three audiences, one billing system

Subscription systems are deceptively complex. The hardest part isn't checkout — it's the lifecycle after purchase.

The admin spending company money

Three flows, one system

A plan builder that handles
the full tier lifecycle

Each teacher or organization creates their own subscription plan with multiple tiers (e.g. Starter, Pro, Team) — following the Kajabi/Teachable model, not the Udemy marketplace model. The builder needed to handle tier naming, pricing with monthly/annual toggle, course scope selection, seat type (individual vs team), free trials, and extras like books — all with a draft/publish workflow to prevent accidental launches.

01 — Plan builder with live settings panel

The "Basic" plan in Published state. Left: tier card showing included courses (9), consultations (3), extras (1 book), and $0/month pricing. Right panel: Info, Billing (Free tier), Content summary (Courses 4, Consultations 3), subscriber count, and Unpublish/Save actions. Monthly/Annual toggle at top.

From discovery to checkout
in three clicks

Subscribers encounter plans in four ways: browsing the homepage feed, visiting an organization's profile, viewing the Plans tab with tier comparison, and checking out through a modal. Each touchpoint is designed to move the user one step closer to a confident purchase decision.

02 — Subscription discovery in the homepage feed

Organizations appear in a dedicated "Subscriptions" row below courses. Each card shows the org avatar, description, starting price, plan count, and Subscribe/Follow actions. "Subscribed" badge appears for active subscriptions. Right sidebar shows the org profile with tier preview (Starter, Monthly/Annual toggle).

03 — Organization profile with subscription banner

Scalable Mind Academy's profile shows a persistent "Subscription Plan" banner with starting price ($9/month), course count (9 courses, 3 tiers), and a "See plans" CTA. The Plans tab with badge count (3) is visible in the nav alongside About, Post, Reels, Courses, and Reviews.

04 — Tier comparison view

Three tiers side by side — Essential ($9/mo, 6 courses), Complete ($19/mo, 6 courses + 2 books + future courses, "Most popular" badge), and Full Access ($39/mo, 6 courses + 5 books + future courses). Monthly/Annual toggle at top. "Cancel anytime · free trial starts today" reassurance on the recommended tier.

05 — Checkout modal with promo code and billing toggle

"Choose your plan" modal with promotion code input, Monthly/Annual toggle, and all three tiers as radio options. Pro is pre-selected with "Most popular" badge and 14-day trial. Total shows $19/seat, billed monthly. Gold "Start free trial" CTA. Discount stacking: annual discount always applies, plus the better of marketplace promo or coupon code.

Seven subscriber states,
one consistent pattern

The subscription lifecycle has 7 distinct states — from "no plan published" through active, trial, cancelled, and expired. Each state changes the UI: button text, banner colour, available actions, and price display. I designed a unified card pattern that adapts to every state while staying instantly readable.

06 — My memberships overview

Four subscription cards showing multiple states simultaneously: Cancelled (red badge, ended date, "Manage" to reactivate), Active (green badge, renewal date), and a pending price change ($19/mo → $29 on May 18). Each card shows org avatar, tier name, billing cycle, seat count, and price. Consistent pattern across all states.

07 — Manage plan modal (cancelled state)

Centred modal for a cancelled subscription. Shows org + tier, Cancelled badge, $490/year price, Reactivate action, billing details (Annually), end date (Jan 15, 2027), seats (12/20), customer and supplier info, and payment type. If price changed since cancellation, a warning shows old vs. new price before reactivation.

08 — Organization admin — IAM license & seat management

IAM panel with left sidebar (Departments, Teams, Users, Locations, My memberships) and a memberships table showing org name, tier type, courses, and consultations per row. Right panel: selected subscription detail with Cancelled badge, $25/month, billing/courses/seats (5/8)/end date, 5 assigned licenses with "3 Available" badge, and per-member "Revoke License" actions with last-seen timestamps.

Edge cases drove the design,
not just the happy path

A complete subscription
ecosystem, shipped

The subscription system launched across all user roles — creators build multi-tier plans, learners discover and subscribe through the feed or profiles, and admins manage seats and licenses for their teams.

What I learned from designing
a monetization system