Designing a Web App for Tuition Center Management

Context

Koios is an education technology team that wanted to start a browser-based application that would streamline the way tuition centers, private tutors, and students manage their classes and payments.

Team

Product Manager

Product Designer (myself), UX Designer

2 Developers

‍

Duration

2 months

‍

My Role

As the lead UX/UI designer on the platform , I was responsible for the end-to-end design process, including conducting competitive analysis, defining the information architecture, creating user flows and wireframes, developing a comprehensive design system, and performing usability testing to validate design decisions.

Challenge

Tuition centers and private tutors often use multiple disconnected tools (WhatsApp for communication, Excel for payments, separate apps for scheduling).

Students/parents find it hard to track classes, fees, and progress.

Tutors struggle with manual admin work instead of focusing on teaching.

‍

Solution

Centralized platform that allows tuition centres to manage lessons, track attendance, monitor student performance, and handle payments all in one place. By creating intuitive user flows and a consistent design system, we made complex admin tasks simple and accessible for both educators and students.

‍

Discovery & Research

I worked closely with a UX designer where we had defined user goals and decided to use Competitive Usability Testing and User Interviews in order to help their team empathize with their users so they have a clear picture of who their product is for.

Define Goals

Assess the usability and desirability of a competitor product with our intended users
Understand the processes used by private tutors and tuition center owners when it comes to lesson planning and student management
Understand how and what students look for when studying with a private tutor and/or tuition center

Remote User Interviews

Interviewed students to understand their experiences in studying with private tutors and tuition centers.

Design Process

Wireframes

We started with the provided wireframes. We used them as a starting point for something bigger. Exploration, questions, brainstorming were our key activities during that phase.

Information Architecture

Next was the big picture. We mapped all the pages and functionality and created the information architecture for the application.

‍

‍

User flows

We focused on details and executed the main user workflows. We concentrate on Admin functionality as it will cover all other roles functionalities. This way, we’ll design once, then cut off features after that to fit the different user roles. Below you will see some of the user flow we mapped.

‍

Design

The next step is to create the complete visual guidelines – Colors, Typography, Icons, Spacing System, Components library, Styles. We handle this with great respect and care.

‍

‍