DQ Akses

Reporting System of Quran Memorization

Project Brief

Provide reporting system from the school to the parents about the student's progress in memorizing the holy quran. Leveraging the research results for creating an interactive mobile view prototype.

Darul Quran is one of the best islamic boarding school in Indonesia. I've been graduated from high school there and want to contribute creating a reporting system for the school. This application design was concept for the final thesis bachelor degree of my study in University.

Duration

4 Months

Role

  • UI Designer
  • UI Researcher
  • Usability Tester

Existing System

Problems

  • The existing app doesn’t provide parent’s need in getting report on their children.
  • No standarization on application brand guideline.
  • Biases structure of hierarchy.
  • The system is running only on the web app, this makes parents could through a lot of journey for supervising their children progress

All-New Interface Design

Solutions

  • Make specific role on each specific user
  • Create design guideline and style system of the application
  • Defining the information architectures
  • Make a deep research from parents need and developing it dedicated design system for android

Scope of Field

User Role

In order to create a compherensive system, the users of this application were classified into 3 roles; admin, teacher, and parent. The role that developed for specific user is from parent POV

Developed modules

The activity of recording and reporting system will be broaden and very wide. We limited the task only for reporting memorization progress of students from school to the parents.

Timeline and Methodology

We build the design of application into 3 separated phases. Getting the designing methods from The Essential Guide to User Interface Design by Galitz, creating a well concept, researched and structured graphical mobile UI Design.

Discovery Phase

Designing Phase

Delivery Phase

II. Design Phase

Next
Want to see more detailed explanation?
See the full paper here

Style System

We build the design of application into 3 separated phases. Getting the designing methods from The Essential Guide to User Interface Design by Galitz, creating a well concept, researched and structured graphical mobile UI Design.

Typography
Color Style

App Preview

The developed design that has been researched were containing into 4 main modules of the application. Home module, Activity, Recap, and profile. The demonstration in the left is a medium fidelity of fully interaction prototyped UI design of this app.

1. Sign up/login

2. Beranda

3. Rekap Kehadiran

4. Rekap Hafalan

5. Menu Aktivitas

6. Menu Profil