top of page
This site was designed with the
.com
website builder. Create your website today.Start Now

Revamped Student Portal

SIM_PNG.png

An improved way to navigate through the student portal

Timeline

5 weeks

Role

UI Design, UX Design, User Research

Project Type
Platform

Personal Project

Desktop

Overview of the student portal

The student portal of a school requires students to access school materials, attendance, exam schedule, and grades easily to ensure that they get the best out of it. It is important to ensure that the usability of the Student Portal is important to facilitate a better user experience for the students. It is also important to ensure that the design of the Student Portal is intuitive and has a simple interface so that it is understandable how the student portal can be used without needing any assistance from the student services. 

My Responsibilities

​

  • Conducting user interviews, and usability testing with the students on the current student portal

  • Creating personas, user journey maps

  • Provide digital low-fidelity wireframes

  • Provide high-fidelity prototypes

  • Conducting usability testing of the revamped student portal

unsplash_md59bW9z4pA.png

"To be frank, it feels outdated. Not that UI intensive. I am not able to find simple things like accessing the student portal. I am not sure how I can do that? It doesn't really tell me what to do from the student portal."

Image by Christopher Campbell

"To be honest, I don’t feel like interacting with this website. It is very overwhelming with so much information. As a student, I am also busy with completing so many assignments and studying. I wanted the website to look easier as in the design of the website needs to tell me what the website is about."

Image by Andriyko Podilnyk

"It looks like a 1990s website. The SIM Student Portal, in general, is very hard to use. For example, if I want to pay my school fees, I have to go a long step in order to reach my goal. The navigation part is so confusing that I am not sure where I am going."

Qualitative interviews 

The current SIM Student Portal had navigation and aesthetic issues. This was a problem for many of the students who were accessing class materials and also trying to view their past attendance, unfortunately, they were not successful. They had to navigate extra steps in order to reach their goal. Some students do not know where to access the materials. Due to this issue, many of the students had a lot of frustration while accessing the SIM Student Portal. 

Problem statement

Here are some user interviews with the students on how they faced the current student portal:

Current student portal website:

User Research

I had conducted research with students on the current student portal. My research consisted of:

  • Conducting usability testing with the students on the current student portal. This is to understand how the current student portal is like.

  • Conducting user interviews with the students to understand what they were facing with the student portal

​

7

users had taken part

100%

navigation issues

90%

interface issues

I conducted interviews with the users to understand their requirements from the current student portal. This is to ensure that they get a positive experience while using the student portal. There were 7 users who had taken part in the interview. This is to understand what they really want to see in the revamped version of the student portal. All 7 users suggested that they were facing navigation problems in the current student portal. 6 users mentioned that they did not like the interface of the current student portal. All 7 users (100%) wanted to ensure that they experience good navigation from the revamped student portal.

Quantitative interviews

Personas

This is one of the user personas from the user interviews

Lily wants to access class materials in the revamped student portal

Untitled.png

User Journey Maps

Untitled.png

This is one of the user journey maps from the user interviews

Insights from the research

Here are some important insights that I gathered from the usability testing and user interviews

Untitled.png

Design Process

Information Architecture
​

A simple user flow diagram has been shown below to illustrate what the student portal will contain.

Design decision: The information architecture was necessary because it gave a clear picture of what the navigation would be like. The navigation section namings were important so that students can figure out how the student portal could be accessed and find it easier to access the required materials from the student portal.
Untitled.png
Digital Low Fidelity Prototypes
These are some of the low-fidelity prototypes of the revamped version of the SIM Student Portal.
Design decision: This was to understand what the entire student portal sections would contain.
 
  • The Login page shows how students can log in through the student portal
     
  • The Homepage would indicate how students can view their dashboard, what classes they have and they can access other

    sections from the student portal. There is a left-side navigation panel as it is easier to access sections in an organized manner.
     
  • The Attendance page is where students can view their attendance details and request an attendance appeal if anything goes

    wrong
     
  • The My Courses page shows how students can access their class materials, class recordings, and last year's papers
     
  • The Exam Schedule page is where students can view their exams through the student portal
     
  • The Grades page would indicate how students can view their grades through the student portal
     
  • The Support page is where students can write enquiries to the staff
     
  • The Settings page is where students can edit their settings
Revamped SIM Student Portal Style Guide
This is the style guide that will provide consistency throughout the SIM Student Portal.

Design decision: The colors and the logo brands are all similar to the current student portal as consistency had to be maintained. The icons were put in the revamped student portal to create an illustration of what it would be like when students access the sections from the student portal. The typography was to ensure that the text was clear, readable, and consistent with the students.
SIM Colours.jpg
SIM Typography.jpg
SIM Icons.jpg
SIM Logo.jpg
Revamped SIM Student Portal Design System Components

Design decision: These are various components that have been used in the student portal that makes the usage from the basic components. These components are used to ensure that the student portal maintains consistency.
 
SIM Buttons.jpg
SIM Breadcrumbs.jpg
SIM Accordion.jpg
SIM Calendar.jpg
SIM File Upload.jpg
SIM Profile.jpg
SIM Card.jpg
SIM Textbox.jpg
Video on the user flow of Revamped Student Portal
High Fidelity Prototypes

Design decision: This was to understand what the entire student portal sections would contain.
 
  • The Login page shows how students can log in through the student portal
     
  • The Homepage would indicate how students can view their dashboard, what classes they have and they can access
    other sections from the student portal. There is a left-side navigation panel as it is easier to access sections in an organized manner.
  • The Attendance page is where students can view their attendance details and request an attendance appeal if anything goes wrong
  • The My Courses page shows how students can access their class materials, class recordings, and last year's papers
  • The Exam Schedule page is where students can view their exams through the student portal
     
  • The Grades page would indicate how students can view their grades through the student portal
     
  • The Support page is where students can write enquiries to the staff
     
  • The Settings page is where students can edit their settings
Current design vs Revamped design
vs
Usability testing

  • Usability testing of the revamped student portal was conducted with 7 students

  • Navigation has become much simpler by clicking on the left side panel of the student portal.

  • Students were able to access the sections such as attendance, class materials, exam schedule, grades, and support easily

  • Students liked the fact that there was a visual calendar to help them determine what classes or exams they have

  • The interface was understandable to many of the students and they were able to know what each section does

  • The student portal was able to convey the information to the students

​

Result metrics from the usability testing

7

users had taken part

5 mins

to complete the task

97%

task success rate

3%

error rate

These were some of the success metrics gathered from the usability testing for the revamped student portal. The user experience and user interface have really been improved in the revamped student portal

Quotes from users on the revamped student portal

"Wow, this looks much better than the current student portal! I will definitely use this student portal!"​

​

"I love that there are calendar integrations for the student to access what lectures or exams they have. It's really visually appealing"

​

"Really great! I have no comments on this. This looks great!"

Learning Outcomes

  • Conducting research with the students has helped me to understand the requirements to be seen in the revamped student portal. 

  • I have learned the importance of "why" an issue is happening, understanding the problem further, and helping to improve the design 

  • This has helped me to improve my design skills and continuously learn trending design topics

bottom of page