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?
- Based on the data collected, students are not fully utilizing the TOA student portal. Due to the lack of content and design on the website and can’t get help when facing problems.
- 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.
Disclaimer: This is a college project done by me. It is not owned or endorsed by The One Academy.
Overview
RESEARCH SPRINT
The purpose of this research is to understand how satisfied current The One Academy students are with The One Academy website and understand how they usually use the website.
Creating Problem Statement
This is the hypothesize problem statement, by using Moore's template we can get to define the problem statement easily.
Hypothesized User Persona
Hypothesized User Persona helps me to gauge a better understanding of users' needs, pain points, and goals.
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.
I conducted the qualitative user test using Microsoft teams with 3 participants that are my targeted user. Each user test lasted about 40–50minutes.
First User Test Form :
Findings
Insights
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.
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.
This is the list of colleges that I’ve compared with:
- The One Academy (TOA)
- TARC College
- New Era University
- Raffles University
- Mahsa University
Full Research Sprint Deck :
CONCEPT SPRINT
The concept sprint is to analyze all of the research and come out with ideas to solve the problem.
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:
- Login Page
- Home Page
- Study Skills & Class Notices
- Contact Us
UIUX AUDIT Results
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.
- This allows me to understand the satisfaction of users with my app flow.
- Test out the concept and design.
- Obtain feedback on the functionality of the wireframe design.
I’ve conducted the qualitative user test 02 using Microsoft teams with 3 participants. Each user test lasted about 40–50minutes.
Second User Test Form
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.
Full Concept Sprint Deck :
USABILITY SPRINT
The usability sprint is to explore and try out different art direction, color, button style, typography, animation and etc.
Moodboard
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.
Goals For Testing :
- To test the overall visual design
- To test buttons/icon sizes
- To test color scheme
- To test text readability
- To test the First Impression when they click on the app
I’ve conducted the qualitative user test 03 using Microsoft teams with 3 participants. Each user test lasted about 40–50minutes.
Third User Test Form
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
HANDOVER SPRINT
The handover sprint is to prepare and warp up all of the design and assets nicely and consistently. So, everybody can directly export all of the assets & designs for future development design.
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:
- Typography, Buttons Style, Colour Code, Illustrations, Icons, Spacing, Overlay cards, forms and etc.
Product Roadmap
This is the entire product roadmap for this product from start to the upcoming 6 months.
Mockups
Full Handover Sprint Deck :
KEY LEARNINGS
- 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.
This project was super fun and cool, I know here are just a part of UI/UX, we should continue making improvements, optimize the design and add improving maintain the usability of the product. I’ve really learned a lot in these few months! Thank You!
