ANODA Discuss your product

An edtech web app for four roles, one student’s plan

AispireMe helps K-12 students plan their school years and programs, with parents and counsellors alongside.We designed its MVP for desktop web.

AispireMe AI Counsel: a chat history at the left, a greeting, the current status with four counts, recommendations, prompt suggestions and a message field; AispireMe My Programs: current programs as cards with provider, description, age, length, price and status, scrolling down to all programs
Multi-role
web app students, parents, counsellors and organisations
AI
Counsel a chat beside status, history and recommendations
Research
to UI kit flows, wireframes, screens, prototype and kit

We designed AispireMe’s K-12 education-planning MVP around the path from choosing a program to completing an application. We connected students, parents, counsellors and organisations in one desktop web app , with UX and UI , a prototype and UI kit supporting the AI-counsellor experience. Our product design defined the journey; the client owned the AI and implementation.

What a family passes through

One chain, from signing up to a program:

  1. Sign up

    • Choose a role
    • Enter details
    • Log in

  2. Profile

    • Roadmap
    • Academics
    • Activities and essays

  3. AI Counsel

    • Chat and its history
    • Current status
    • Recommendations

  4. Programs

    • Recommended
    • Program page
    • Enrollment

  5. People

    • Counsellors
    • Children
    • Students and organisation

  6. Settings

    • Personal info
    • Payments and billing
    • PRO subscription
A helpful AI A student’s own plan
The chat sits with the status and recommendations it speaks to, not on a page of its own.
One student Several roles
Parents and counsellors see the plan through their own menu and their own controls.
Planning Paying
Payment and subscription live in settings the student already knows.

One program page, read in the order of the decision

Found
A recommendation is only useful if a family can see what the program asks of them: the age, the length, the price, the start date.
Decided

The offer first, with its three numbers and one action; then what the course is and who teaches it; then why it fits; then alternatives to compare without leaving the page.

Our UI/UX principles guide explains the priorities behind these screens; the MVP UX guide connects the first complete journey to its supporting roles.

For the user
A family sees what a program asks before they enroll, and what else they could pick.
AispireMe program page: a photo and the program title with age, length and price and an Enroll button; the description, providers, key skills, start date and language; four advantages; and three similar programs
After: a program page; the programs, providers and prices are example data

  1. The offer

    Title, age, length, price and Enroll.

  2. What it is

    Description, teachers, skills, start date.

  3. Why it fits

    Four reasons, each with its own line.

  4. What else to compare

    Three alternatives, one click away.

How the work progressed

From research on the field to a prototype and a kit that cover every role.

Before choosing what to build, product discovery settles the audience, alternatives and next question. product design carries that direction into the complete experience.

  1. Research

    What education-planning products offer today, and what a student, a parent and a counsellor each expect from one

    Artifact Education-domain and competitor research

  2. User flows

    How each role gets from signing up to its main jobs, and where the AI chat joins them

    Artifact Multi-role user flows

    A flow chart of the AI Counsel screen: the sidebar and chat history, the overview panel with status and recommendations, the main chat panel and a step to manage the profile with the help of AI, with decisions and empty views

  3. Information architecture

    Which screens each role has, and how they connect to one another

    Artifact Information architecture and a screen map

    A screen map of My Programs: the list, the program page and the enrollment and payment dialogs, joined by arrows and notes

  4. Wireframes

    Where each role’s lists, chats and settings sit, before any styling

    Artifact Wireframes, with a second pass

    Three AispireMe wireframes in grey: a student’s essays with target school, type and status; a chat with the connected counsellor beside a list of past conversations; and a parent’s settings with the child’s card

  5. UI design

    The finished look of every role’s screens, on one set of components

    Artifact Desktop web UX/UI design

  6. Prototype and UI kit

    Which parts the screens share, and a way to click through them

    Artifact A clickable prototype and a UI kit of reusable components

    UI kit pages: the Poppins type scale, the primary and secondary colour scales and two icon sets

From signing up to a first plan

Found
Each role enters the product differently, and every step has states of its own: an error, an empty list, a wait.
Decided
Every step drawn with its states before the UI, as three runs of screens, and a menu whose items depend on who signed in.

  1. Choosing a role

    Student, parent or counsellor, then the details, then a short wait on the way into the profile.

    Open the full map
    Three sign-up screens: the choice of role with Student, Parent and Counselor, the registration form with name, email, school and grade, and the loading screen that welcomes the user back to their profile

  2. From a program to enrollment

    A confirmation of the total, an application form, then a note that the request has been sent.

    Open the full map
    Three dialogs over a program page: the total due today with terms to accept, an application form with name, surname, email, phone and promo code, and a success message that the request has been sent

  3. Bringing in a counsellor

    An empty list, an invitation by email, then the connected counsellor with a chat one click away.

    Open the full map
    Three My Counselors screens: an empty list with No Counselors here, a dialog to invite a counselor by email, and a connected counselor’s card with Disconnect and Open Chat
The student’s side menu: AI Counsel, My Profile, My Programs and My Counselors, with Settings and Sign out at the foot

One menu, by role

A student’s menu is shown; parents and counsellors get their own items, such as My Children or My Students.

  • A side menu for each role
  • Settings and sign out kept at the foot
  • Screen maps behind every role’s menu

Five jobs a family needs done

In the order of the fears they arrive with.

An AI counsellor with its context

Found
An answer about someone’s education can sound sure and still be incomplete, and a student cannot tell the difference.
Decided
The chat lives inside the student’s plan, next to status and recommendations, with its history beside it; answers are set out as readable steps that can be copied.
AI Counsel with a question about a weekly study plan and an answer with a Plan block listing a study session for each day and a Copy plan button
AI Counsel with a request to show a photo of a college and an answer with a photograph of a graduation cap on books

A profile the counsel can use

Found
Advice is only as good as what the system knows, and goals change while old recommendations stay behind.
Decided
A profile in four parts (roadmap, academics, activities, essays), with a completeness score that tells the student how much the AI has to go on.
My Profile roadmap: a four-year timeline with task cards and their completeness, a marker for the current month and four planning cards below
My Profile academics: cards for the current school, courses and grades, tests and honours, and a greeting card with a completeness bar at 48 percent

Program fit, with its numbers

Found
A list of attractive cards hides what a program asks of a family.
Decided
Every card carries age, length and price with a status; the counsellor sees the same cards and can recommend one to a student.
My Programs, Recommended tab: six program cards, each with a provider, a description, age, length, price and a status menu
The counsellor’s Programs screen dimmed behind a Recommend program dialog with the program and a Select student menu

One student, three other views

Found
Parents, counsellors and organisations look at the same student, and none of them should see or do more than their part.
Decided
Each role gets its own menu and its own home: a parent’s children, a counsellor’s students, an organisation’s members.
My Children: a connected profile card with the child’s details, View Profile and Open Chat, and the child’s counselor below
My Students table with name, grade, activity, date added and last active, and buttons to set a reminder or make an announcement
My Organization: a card for the organisation with its code and member avatars, and buttons to create an organisation or add a member

Who pays, and for what

Found
Payments and subscriptions feel bolted on when they sit away from the plan.
Decided
Payment method, invoices and a PRO subscription in one settings page; cancelling and resuming each a short dialog that says what changes.
Settings, Payments tab: organisation information, a payment method list, the PRO subscription with its status and dates, and an invoice table
Cancel PRO subscription dialog listing the two PRO features that will be lost, a field for the reason, and Go back and Yes, cancel buttons
Resume PRO subscription dialog with the two PRO features, the date it will be resumed from and a Resume button

One kit under every role

Found
People, programs and their states repeat across four roles, and drawn one by one they drift apart.
Decided
A UI kit of reusable parts: a profile card for each role, program cards in three depths, inputs, badges, dialogs and icons, shared by every screen.

One profile card for each role

A child, a parent and a counsellor, built from the same parts.

  • Profile card of a child with a photo, description, organisation, phone and email, View Profile and Open Chat buttons, and the child’s counselor
    Child: Details, chat and the child’s counsellor.
  • Profile card of a parent with a photo, description, organisation, phone and email, and a Write message button
    Parent: The same card, with one action.
  • Two counsellor profile cards: one connected with a green tick and Disconnect and Open Chat buttons, one not connected with a Show messages button
    Counsellor: Two counsellors, connected and not.

One program card, three depths

The same card for browsing, for recommending and for managing.

  • Program card with a photo, provider, title, description, age, length, price and a status menu
    Browse
  • Program card that records who it was recommended to, with View details and Recommend buttons
    Recommended
  • Compact program card with a title, description, age, length, price and Delete and Recommend buttons
    Manage

Where the design ended up

AispireMe’s MVP designed end to end for desktop web. We designed it; building it, the AI behind it and any launch were not part of our scope.

every role’s path, drawn with its states
Sign-up to enrollment
the platform we designed for, in a light interface
Desktop web
billing and the PRO subscription in the same settings
Plan + payments
a clickable prototype and a UI kit
Prototype + kit

Will your users trust what your AI says?

An AI answer, a shared plan and four roles that must not see each other’s data: we designed AispireMe around exactly that. Bring us your product, and we’ll show where that trust breaks first.

Discuss your product Explore more case studies

What we brought to AispireMe

The product

The AI, the research and the kit

Related reading

Read more about the design decisions

All articles