UI/UX: The One Academy’s Student Portal App Design

Project Brief

The One Academy is in the process of revamping its website. Based on the persona chosen and data collected to work with, research on the needs, the possibilities of technology, and the requirements for business success with my design.

Project Goal

This project aims to create an app that provides information and inspiration for the students of The One Academy. Besides, to give students when facing problem can get help and has ai to respond to students questions, provide solutions and website to help them. Not only that, it is to decrease the student's drop-off rate in The One Academy.

The Problem

Why should I create this app?

  • The One Academy is one of the best design colleges in Malaysia. To be the best, there has to have quality in students. With the amount of workload, it is overwhelming for newer students especially juniors. This has caused the rate of student dropouts to increase.



Creating Problem Statement

This is the hypothesize problem statement, by using Moore's template we can get to define the problem statement easily.

Problem Statement

Hypothesized User Persona

Hypothesized User Persona helps me to gauge a better understanding of users' needs, pain points, and goals.

User Persona (Hypothesized)

Defining The Target User

Target Users are Current The One Academy students.

Qualitative User Test 1 — Understanding The User

I started the research by crafting valuable user test questions using google Forms to understand better user’s pain points, problems, and needs.



Validated Problem Statement

After completing the qualitative user test, it gave me a clear idea and I refined my problem statement.

Validated User Persona

After completing the qualitative user test, I’m able to synthesize and create my user persona based on the information collected from the survey.

User Journey Map

Based on the validated user persona and the problem statement. I’ve crafted a User Journey Map to show the process of how Toa students cope with workload and stress. With this User journey map, I’m able to understand the pain points of the user and came up with ideas that could solve the problem based on each part of the journey.

User Journey Map & Opportunities and Solutions Idea

Competitor Competitive Analysis

In this section, I’ve conducted a Competitor Competitive Analysis(CCB) and finding out how The One Academy student portal compares with others colleges' students portal. From there, I created a few lists of feature and information and compare between colleges. I went around asking for my friend’s permission to lend me to log in to their student portal.

  1. TARC College
  2. New Era University
  3. Raffles University
  4. Mahsa University
BBC Board


UIUX Audit

I did a UI UX AUDIT on the pages and the features that I wish to remain and did an analysis on how to further improve it. The 4 pages/ features that I’ve chosen:

  • Home Page
  • Study Skills & Class Notices
  • Contact Us


Features Matrix

The Feature Matrix was done to lay out all of the features together — existing ones and new proposed features. Process of prioritization and finding out which was more beneficial in terms of impact and cost.

New Proposed Features

After the competitor's comparison research, I’ve introduced a few new features that the current TOA student portal doesn’t provide.

Low Fidelity Wireframes

I’ve created a wireframe prototype to construct a better understanding of the app flow and to use it for user testing. The prototype was done using Adobe XD.

Qualitative User Test 2 — UX Features

After completing the prototype of the wireframes, I’ve crafted some questions based on the wireframe.

  • Test out the concept and design.
  • Obtain feedback on the functionality of the wireframe design.

Task Given / Tested

These are the task that has been assigned to the user when conducting the user test to test out the feature are beneficial for the users.

Most and Least Favourite Features

Survey Findings

Summary of Feedbacks

The overall feedbacks collected are being analyzed and it helps me to decide what to do and which aspect needed improvement. It also helps me to validate my initial design concept.

A/B Screen Design Testing

Next Steps

These are the next steps to-do list to further improve after the Lo-fi User Test.



Creating a mood board helps to set an overall theme and style of the design.

Site Map

Creating a site map is able to have an overview of my entire app and the pages that I’ve decided to focus on.

User Flow

User flow helps us to understand and see clearly all the steps and clicks on each page and each section.

High Fidelity Screens UI Design

First draft.

Qualitative User Test 03-Usability

This user test is to understand and know more about the usability of the app.

  • To test buttons/icon sizes
  • To test color scheme
  • To test text readability
  • To test the First Impression when they click on the app

Task Given / Tested

These are the task that has been assigned to the user when conducting the user test.

Survey Findings

User’s Thoughts

A/B Screen Design Testing Options

Next Steps


User stories

I did user stories and thought about the process and flow of interaction for the home page from a user perspective. The reason for doing user stories is to prevent me from missing out on any important screens for happy and unhappy flow.

Product Style Guide

On this product style guide, it has components such as:

Product Roadmap

This is the entire product roadmap for this product from start to the upcoming 6 months.



  • Learned how to craft user test questions and interview the users.
  • Learned how to analyze findings and organize data.
  • Learned how to present and share ideas.
  • Learned how to create and design an app based on the user's need.
  • Learned a whole flow of creating an app, from research to handover.