ANODA Discuss your product

An AI academic assistant students actually open

An AI assistant that studies each student’s own courses with them, and the web tools their instructors, curriculum teams and school admins run it from.

Instructor dashboard: class counts, a table of classes with dates, status and students, today’s schedule and activity per course; Moka course chat: the assistant’s answer to a student’s voice question about bookkeeping
200+
screens for the student app and the staff web tools
312h
of design from the role map to the screen map
4
roles student, instructor, curriculum, admin
4
experts on one team from discovery to handoff

Moka is an AI academic assistant for schools: middle- and high-school students study their own courses with it on the phone, while instructors, curriculum developers and school administrators run classes, programmes and reports on the web. We designed the student’s mobile app and the web product for the three staff roles , across 200+ screens. Development and the AI itself stayed with the client.

Who uses Moka, and for what

One product, four jobs. From the student’s phone to the school’s reports:

  1. Student

    • Ask the assistant
    • Flash cards and quizzes
    • Schedule and progress

  2. Instructor

    • Classes
    • A student’s activity
    • Exercise results

  3. Curriculum

    • Programmes
    • Courses
    • Exercises and curriculum

  4. Admin

    • Engagement reports
    • Campuses
    • Staff
Engaging Serious
Colour, progress and small rewards, in a product teachers trust with a class.
Dense Readable
Every activity and number a student needs, with a clear order on a small screen.
One product Four roles
One visual language, each role with its own navigation and density.

Everything a student needs, on one calm screen

Found
Schedule, progress, recent work and the assistant all wanted the first screen of a small phone.
Decided
One order down the home screen: who it’s for, today’s classes with progress in each, then what the student did last, with the assistant one tap away in the tab bar.
For the user
A student opens the app between classes and sees where they are without searching.
Moka student home: greeting, today’s schedule with course codes and progress, and recent activity above the tab bar
After: the home screen, top to bottom: greeting, today, progress, recent work

  1. Who and when

    The student’s name and photo, the way back to their profile.

  2. Today

    The day’s classes with their code, time and progress, current or all.

  3. What I did

    Recent activities with their result, incomplete or all.

  4. Ask

    The assistant in the middle of the tab bar, from anywhere.

How the work progressed

From four roles on a board to one product system, a question at a time.

  1. Discovery

    Who the four roles are and what each needs from the product first

    Artifact Role map and information architecture for students, instructors, curriculum teams and admins

  2. User flows

    How each role moves through its jobs, including the errors along the way

    Artifact End-to-end flows for every role, each screen’s content beside its node

    Part of the student’s flow: the course chat with voice, typed and suggested questions, file attachments and their error states

  3. Wireframes

    Where the assistant, the schedule and the activities sit before any colour

    Artifact Desktop wireframes for the assistant and every activity

    Grey wireframe of the assistant home: study metrics, the chat area and the activity shortcuts

  4. Moodboards

    What a calm place to study should feel like

    Artifact Three moodboards; Deep Focus, in olive and latte, was chosen

    The Deep Focus moodboard: reference interfaces in coffee tones and its palette of dark olive, earthy, grey-green, latte and milk white

  5. UI & design system

    One interface for four roles, in the style the moodboards settled

    Artifact The final UI and a design system with its states

    One of the style directions: the Moka sign-in screen with the owl logo beside graduation caps and scrolls

  6. Delivery & handoff

    How a developer finds every screen and state

    Artifact A screen map and an organised design file

    Part of the Moka screen map: the Academic Assistant screens linked in the order a student moves through them

Four roles, mapped before they were drawn

Found
A student, an instructor, a curriculum developer and an admin need different things from the same courses.
Decided
Every role’s flows were mapped end to end first; each role then got its own sidebar in one shared shell, with only the sections it uses.

  1. Student: asking the assistant

    Voice, typed or suggested questions, files attached, and what happens when an upload fails.

    Open the full map
    The student’s course chat flow: a voice or text question, a suggested prompt, an attached file, and upload errors for size and file type

  2. Instructor: from a class to one answer

    Create a class, assign students, then open the class, a student and one exercise’s answers.

    Open the full map
    The instructor’s flow: creating a class and assigning students, then class details, a student’s completed exercises and one exercise’s results

  3. Curriculum developer: building a course

    A course with its instructor, added to programmes, then its exercises and an uploaded curriculum.

    Open the full map
    The curriculum developer’s flow: creating a course and assigning an instructor, adding it to programmes, then the course’s exercises and curriculum upload
Moka sidebars for each role, left to right: student, instructor, curriculum developer and admin, each with only its own sections

One shell, a sidebar per role

The student gets the assistant, activities, courses and messages; the instructor, classes and students; the curriculum team, programmes and reports; the admin, people and settings.

  • Information architecture for four roles
  • Role-specific navigation
  • End-to-end user flows
  • Error and empty states

Seven jobs across four roles

The student’s assistant and activities first, then the instructor, the curriculum team and the school.

An assistant that studies the student’s own courses

Found
A general chatbot knows nothing about the class a student is taking, and a student can’t tell where its answer comes from.
Decided
Every chat opens inside a course, so the answer stays on the syllabus. Students type, speak or attach a file, get a structured answer, and come back to any chat from the history.
Course chat for BK101 Intro to Bookkeeping with a voice message asking for help with bookkeeping and the assistant typing
The assistant’s answer under the voice question: what bookkeeping is and a list of its core tasks
Chats panel with search, a Start New Activity button, and recent and all chats listed by course

Flash cards that answer back

Found
Revising from notes is dull, and a wrong answer with no explanation teaches nothing.
Decided
Any chat can turn into an activity. Flash cards ask one question at a time, explain a wrong answer in plain words, and end with a score worth sharing.
Start New Activity sheet with five study modes: answer questions, flash cards, pop quiz, video search and replay lecture
Flash card 1 of 7 asking the main purpose of bookkeeping, with a text answer field
Flash card marked Incorrect with a short explanation of the right answer and a Next button
Flash card result: 6 of 7 correct, with a Finish Exercise button

Quizzes, videos and lectures around the same course

Found
Students learn in different ways, and every extra app between them and the material is one more reason to stop.
Decided
Pop quizzes that show the right answer at once, video search inside the course’s topic, and past lectures by chapter, all in the same shell as the chat.
Pop quiz question 1 of 20 with the correct option highlighted green and the chosen wrong option red
Pop quiz result: 15 of 20 correct, with an encouraging line
Video search results about bookkeeping, each with a thumbnail, duration and title
Replay of the Accounting Principles lecture: timestamped chapters and an audio player

A week the student can see

Found
Classes, deadlines and progress lived in different places, so nobody saw the week whole.
Decided
A schedule by day with every class’s code and status, and a profile that shows the level reached and how the week went.
Schedule view with an April 2025 day picker and upcoming classes with course codes and times
John Adams’ profile: beginner mastery level, quizzes completed, average time per exercise and average completion score

From a class to one student’s answer

Found
Instructors saw classes as rows of numbers, and getting to what one student actually answered took several tools.
Decided
A dashboard of classes with today’s schedule and activity per course, then one path down: a class, a student’s exercises, and the answers to one quiz.
Instructor dashboard for Prof. Carter: class counts, a table of nine classes with dates, status and students, today’s schedule and activity per course
Class details for Bookkeeping Beginner, in progress January to May 2026, listing nine students with emails and last activity
Student profile for Hana Kim with seven exercise cards across two courses, filterable by type
Exercise details for Hana Kim’s Bookkeeping Beginner pop quiz, 19 of 20, with correct and wrong answers highlighted

Programmes built the school’s way

Found
Every school structures its teaching differently, and a rigid template forces curriculum teams to bend their method to the software.
Decided
Programmes made of courses, courses made of exercises and an uploaded curriculum, each created and reordered by the team, with lessons that need review shown beside them.
Curriculum developer’s programme list: nine programmes with course codes and status, beside lessons needing review and top student question topics
The Comprehensive Guide to Bookkeeping programme with its five courses
Bookkeeping Beginner course, Exercises tab: sixteen student exercise cards with type, status, score and date
Add Program form filled in: a programme name, three selected courses and a pending status

Reports a school can act on

Found
Engagement data across campuses and courses meant little until someone turned it into a next step.
Decided
An engagement report by programme, course, campus and instructor with export, AI recommendations that pair each problem with a practical fix, and staff and campuses kept in settings.
Student engagement report: ten course rows by programme, campus, exercises, engagement score and instructor, with school-wide figures
AI recommendations for the Bookkeeping Beginner course: six cards, each a problem found in student results and a suggested fix
Settings, Staff tab: ten staff members with school emails and active, pending or deactivated status

One system for a phone and three dashboards

Found
Four roles on two platforms could easily have ended up as four products that only share a logo.
Decided
One component system: the same metric cards, tags, tables and sheets on web and mobile, each drawn for empty and error states, and the phone in light and dark.

A number reads the same for every role

Label, value and change against last week, whether an instructor counts classes or a curriculum team counts students.

  • Instructor metric cards: active classes, students and average exercise score, with change from last week
    Instructor: Classes, students and the average score.
  • Curriculum metric cards: students, engagement level, programme completion rate and active programmes
    Curriculum: Students, engagement, completion and programmes.

Drawn for the moments that go wrong

Nothing scheduled yet, a file too large, an answer not chosen: each says what happened and what to do.

  • Empty home: no courses in the schedule and no recent activity, each with a short explanation
    Nothing yet
  • Course chat with an error saying the file upload failed because it exceeds the 20 MB limit
    Upload failed
  • Pop quiz question with no option selected and a message asking to choose an answer
    No answer chosen

The phone, in dark too

The student app has a dark theme, drawn from the same Deep Focus palette as the light one.

The same flash card result in the dark theme
The assistant’s answer in the dark theme
Student home in the dark theme

Where the product ended up

One design for the whole product: a student’s assistant that works inside their courses, the learning activities around it, and web tools for instructors, curriculum teams and admins, in one visual system from the owl logo to the last state, delivered with a screen map and an organised file.

screens across web and mobile
200+
roles in one product
4

In the client's words

This was a large design project in which these guys excelled. Their expertise as a UX agency was evident throughout — especially in the attention to detail in user testing and seamless user flows. Will definitely be hiring again.

Riley Thomas Infinite Touch

5.0

Afraid students won’t open it?

Moka had to interest teenagers and still work for the teachers behind them. Show us your learning product, and we’ll show you where it loses each of them.

Discuss your product Explore more case studies

What we brought to Moka

The product

The interface and the work