Student Portal

Project Background

The client, a leading educational institution, needed to develop a Student Portal that would serve as a comprehensive web app for managing student information, course enrollment, academic performance, and faculty communication. The goal was to create a centralized platform where students could access all necessary academic resources and administrative services in one place.

The existing system was fragmented across various platforms, leading to inefficiencies and a poor user experience. The portal was outdated, with a cluttered interface and cumbersome navigation, leading to frequent user complaints.

The institution sought a modern, user-friendly solution that would integrate these disparate systems, streamline operations, and enhance the overall student experience. To address these issues, a complete redesign of the portal was initiated. This process involved in-depth user research, UX/UI design, and development of new functionalities. The redesign focused on creating an intuitive, accessible, and responsive web app that would cater to the needs of a diverse student body.

My Roles & Responsibilities

As the UX/UI Designer, I was responsible for overseeing the entire design process, from user research to final implementation. My key responsibilities included:

• User Research & Analysis: Conducted surveys, interviews, and usability tests to gather insights from students and faculty, which informed the design decisions.
• UX/UI Design: Led the creation of wireframes, prototypes, and the final interface design, ensuring a seamless and engaging user experience.

Deliverables

• [✔] User Research & Insights
• [✔] UX Process Documentation
• [✔] Style Guide & Components System
• [✔] Wireframe and High-Fidelity Prototype

The Key Problem

The legacy portal was not meeting the needs of its users, leading to decreased engagement and satisfaction. Key issues included a confusing interface, slow load times, and a lack of mobile responsiveness, all of which contributed to a fragmented and frustrating user experience. Additionally, since the platform was developed by a third-party provider, the institution faced restrictions on development.

Why we chose to address this problem: The institution recognized the need to improve the portal to enhance student satisfaction, streamline administrative processes, and ultimately support better academic outcomes. To address development limitations, we focused in component styling, page organization, and the addition of new pages with integrations and content.

The Solution

UX Research

Extensive research was conducted to understand the pain points and needs of students and faculty. This included competitive analysis, surveys, and in-depth interviews. The research revealed that students valued a streamlined, visually appealing interface that allowed them to quickly access essential information such as course schedules, grades, and announcements. Faculty, on the other hand, needed a tool for managing student communication.

Blueprint, wireframes and medium fidelity prototype

The project began with the development of a blueprint that mapped out the portal's new structure. Wireframes were created to outline the basic layout and functionality, followed by high-fidelity prototypes that allowed for initial user testing and feedback.

Key Features

Dashboard

• The dashboard serves as the central hub of the student portal, providing quick access to the platform’s key features. It includes shortcuts to essential links, messages from the university, a progress chart showing the student’s advancement in their course, and alerts for overdue payments.

Academic Information

• In this section, students can access comprehensive details about their course, including their class schedule, completed and ongoing subjects, grades, assessments, attendance records, and academic history. Additionally, students can manage their enrollment and submit requests for documents.

Custom Info

These are dedicated pages within the portal designed to facilitate communication between the university and students. They include tutorials, important announcements, and information about available benefits. These pages can be customized to meet the specific needs of the institution and its students.

Visual/UI Design

The UI design focused on simplicity and accessibility, adhering to best practices for web design and ensuring compliance with WCAG guidelines. The layout was structured with consistent spacing and font sizes to create a clean and organized interface.

Colors were carefully selected to align with the institution's branding while ensuring sufficient contrast for readability. The primary colors were used sparingly for action buttons and key elements, while neutral tones dominated the background to reduce visual clutter.

Style Guide and Components:

A comprehensive style guide was developed to ensure consistency across the portal. This guide included specifications for colors, typography, spacing, and component design.

Takeaways

The Student Portal redesign was a significant step forward in enhancing the user experience for students and faculty alike. The project underscored the importance of user-centered design in creating digital platforms that are not only functional but also enjoyable to use. By closely aligning with the needs of its users, the new portal has the potential to become an indispensable tool in the academic journey of the institution's students.