UI/UX Case Study: The One Academy Student Portal App

Ee Huey
9 min readSep 2, 2020

The One Academy’s student portal is a necessity for all current The One Academy students, but they often feel like hassle and inconvenience to use it cause of the troublesome login process and unclear navigation.

TOA student portal
The One Academy’s Student Portal

RESEARCH SPRINT

Objectives

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.

User Persona Hypothesis
User Persona Hypothesis

To collect data, I surveyed 5 people, aged between 19 to 21, who are currently studying in The One Academy at least 2 years and above.

Persona Survey Questions:

Consequence

After the interview, I found out that students have more opportunities to use the student portal rather than the website, because of the information on the website are not relevant to them and they mostly use student portal to check information.

User Persona Validated
Validated User Persona

Persona Survey Supplementary Questions:

Supplementary questions to ask about The One Academy’s student portal.

Pain Points

Since students are mostly using the student portal, I asked with some supplementary questions about the student portal, and help me find out the pain points of them using the student portal.

  1. Interviewees felt hassle and inconvenience every time they had to log in to the student portal and had to constantly update their personal information.
  2. Interviewees said that the student portal is overloaded with text as if it’s like a government website.
  3. Interviewees mentioned that it should be more convenient to help students to find what they’re looking for efficiently.
  4. Interviewees said that the navigation of the student portal website are not clear and they will feel lost sometimes.

Problem Statement

For first-year students that just joining The One Academy,

Who wants to check the school’s announcement and latest updates,

The One Academy’s Student Portal Is an app

That is providing more information and latest updates of the school for current The One Academy students.

Unlike The One Academy’s website,

Our product is providing a more private, personalized and convenient platform for students to check and update their school documents.

User’s Journey

The user journey starts from Kelly who wants to check for school announcements through The One Academy website, and she found out that the information on the website is not relevant to her, so she tries to check on her student portal and she felt hassle and inconvenient of the login process.

User’s Journey
User’s Journey

Opportunites

Due to the questions and thought of the user’s journey, I will create a more personalized and convenient Student Portal App for The One Academy students.

Opportunities
Opportunities

Full Research Deck Slides:

Research Sprint Presentation Slides

CONCEPT SPRINT

Sitemap

The sitemap for current The One Academy Student Portal.

Student Portal Sitemap
Student Portal Website Sitemap

UX Audit

I did a UX audit on current The One Academy Student Portal and it scores 3.5

UX Score Card
UX Score Card

Features Matrix

Using this method to filter out the unnecessary features and the highlighted features will be added into the Student Portal App.

Features Matrix
Features Matrix

First Round Survey

After I have created the wireframes, I interviewed with the same 5 people and gather their feedback about the new features.

Prototype Survey Questions:

Here are some main feedbacks:

1. Log In with Face ID

Login

“I would like to login with password or fingerprint because I’m not using Face ID.”

I added this feature is to make it easier for students to log in to this app, and fingerprint and Face ID depends on the phone model, but it reminds me of some people who will more prefer on using the password, so I will let users have a choice of choosing use Face ID/Fingerprint or password to log in.

2. Linking Student ID to the App

Student ID

“It’s unnecessary to link my Student ID card again because I already log in with my Student ID.”

The purpose of this feature is to let users manage their Student ID card through their mobile phone since the user feels like it’s adding one more steps, I will combine log in with linking their Student ID card, which means users can log in through scanning their Student ID card and it will link it automatically after they’ve successfully logged in.

Wireframe Prototype:

AB Testing

AB testing on 5 different home page and profile page layout.

Home page
Most of them vote on the fourth layout because of the menu bar at the bottom.
Profile Page
The votes are evenly distributed among the second, third and fifth.

Full Concept Sprint Slides:

Concept Sprint Presentation Slides

USABILITY SPRINT

Sitemap

The sitemap for the Student Portal App.

Student Portal App Sitemap
Student Portal App Sitemap

Moodboard

Moodboard for the Student Portal App

First User Flow

User Flow for The Student Portal App

Second Round Survey

I interviewed with the same 3 people again and gather their feedback about the design and usability of the app.

Hi-Fi Prototype Survey Questions:

Here are some main feedbacks:

1. Customise Home Page

Home Page

“The menu button in each widget is unnecessary, I will prefer hold and drag to do the arrangement of my home page.”

That is a good suggestion to rearrange the widget, I will remove the menu button, make it hold for a second and drag to arrange the widget and users can directly resize the widget by holding on the corner of the widget.

2. Check for Announcement

Announcement Page

“I feel hassle and there is too much of steps to reach the announcement listing page.”

Since most of the interviewees mentioned this problem, I will reduce the steps by adding a speaker icon on the top right corner of the announcement widget so that users can reach the announcement listing page by just clicking one button.

3. Lack of Graphics and Color Difference

“Overall is a bit monotunes and lack of graphics.”

After they mentioned it, I realized that all the colours are not much different. I will replace some text with icons, adding some graphics and secondary colours to make it more interesting.

Hi-Fi Prototype:

AB Testing

AB testing on different button style, layout and colour.

All of them prefer the second button style because it is more interesting.
All of them prefer the first menu page layout.
All of them prefer a dark theme.

Final Prototype:

After gathered the user’s feedback, I amended on the flow and added some graphics and colours.

Second User Flow (Amended)

Based on the user’s feedback and amended on the user flow.

Validated User Flow

Full Usability Sprint Slides:

Usability Sprint Presentation Slides

HANDOVER SPRINT

Style Guide

All the style guide are exported to Zeplin and all the icons are marked as exportable.

Style Guide

User Stories

User Stories for Home Page.

Product Roadmap

Product roadmap from June to November.

Zeplin Link:

https://zpl.io/bLMxlkD

Full Handover Sprint Deck:

Handover Sprint Presentation Slides

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 users 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 improvement, optimize the design and add improving maintain the usability of the product. I’ve really learned a lot in these few months! Thank You!

--

--