School Mobile App

🎯 Problem Statement

Schools in Cambodia, especially Khmer General Education, still rely heavily on paper notices, physical meetings, or fragmented communication channels (e.g., phone calls, Telegram, Facebook). This often leads to

• Missed announcements or fee deadlines

• Inconsistent tracking of student attendance and performance

• Limited transparency for parents

• Poor user experience with outdated platforms (if any)

Challenge: How might we design a modern, bilingual mobile app that empowers parents and students to stay informed, connected, and actively involved in school life?

👦 Target Audience

Parents & Guardians

Demographics:

• Ages 28–50

• Primarily located in Cambodia (urban and semi-urban areas)

• Moderate to high smartphone usage

• Varying levels of digital literacy

Needs & Behaviors:

• Want real-time access to their child’s academic performance, attendance, and school updates

• Responsible for tuition payments and monitoring school communication

• Use apps like Telegram, Facebook, ABA, and YouTube frequently

🔍 Research & Discovery

📄 Stakeholder Interviews

We have visited the school, and we have interviewed

• School administrators (to understand workflows within the actual school)

• Teachers (to learn how data is generated and used )

• Parents and Students

💬 Key Insights

Below are some key statements from the interview:

“It’s hard to keep track of my daughter’s grades. I want to see her results right when they’re available.”

“Sometimes I don’t know what class I have next or if it’s been rescheduled. A clear timetable would help a lot.”

“I just want to know immediately if my child is absent — not wait until the end of the day.”

"Almost every highschool student owned a mobile phone, having an app to keep track of their studies will be useful"

Besides the interview, we also requested all the manual paperwork documents which includes student registration paper form, invoice, receipt, student data, certificate, etc.

🗺️ Sitemap Design

To ensure the app’s structure was simple and intuitive for both user groups, I created two separate mobile sitemaps — one for parents and one for students. This helped us visualize and organize the key sections based on their distinct needs.

🔹 Parent Sitemap Highlights:

• Home Dashboard

• My Children Selector

• Attendance Overview

• Class Schedule

• Exam Results

• Announcements

• Payments & Invoices

• Settings

🔹 Student Sitemap Highlights:

• Home Dashboard

• Class Schedule

• Exam Results

• Announcements

• Attendance Record

• Settings

The goal was to ensure that users could reach the most important information in the shortest period of time possible, to keep the experience smooth even on low-end mobile devices.

These sitemaps served as the foundation for both user flows and wireframes, ensuring clarity and purpose from the earliest planning stages.

🎨 Wireframes

After validating the user flow and structure through research and feedback, I moved on to designing wireframes that closely resembled the final product. These screens were built using Figma, without incorporating the actual UI components, color schemes, typography, iconography, and spacing that reflected the intended user experience.

🎨 Visual Design

Designed high-fidelity mockups in Figma using:

• Fonts: Inter (English) and Kantumruy Pro (Khmer)

• Icons: Vuesax for a clean, modern look

• Colors: School’s branding (blue and white) with accessibility considerations

As we used Figma, we incorporated all the styles into local styles within the project for easier iteration in the future. I aimed for a minimal yet welcoming interface with intuitive navigation for all age groups.

💡 Final Design Highlights

• Multi-child switcher: Quick and elegant buttonsheet

• Smart Real-time Reminders: Push notifications for fees, absences, new grades

• Multilingual UX: Smooth switch with content that respects both Khmer and English structure

• Make Online Payment: Parents can make payment from anywhere.

• Leave: Students and parents can submit leave with ease.

• Leave Notification

• Settings: designed to control app preferences.

and many more module…etc.

⚙️ Prototyping

I created an interactive prototype in Figma and conducted usability testing.

🔍 Key Improvements After Testing:

• Increased font sizes for Khmer script

• Added visual indicators for unread announcements

• Made schedule page scroll horizontally (mimicking a paper tixmetable)

Once the design phase is complete, the next critical step is handing off the designs to the development team. As a UX/UI Designer, my responsibility doesn't end at delivering high-fidelity mockups. Instead, I stay actively involved to ensure a smooth transition from design to implementation.

To use a Figma Prototype, you may go to: This Link or Use below