UI/UX Case Study: University of Lagos Student Portal

OVERVIEW

The University of Lagos Student Portal is one of the most vital tools needed by students of the university. It performs various functions ranging from payment of tuition and other fees to registration and editing of courses, balloting for hostel accommodation and many more.

Over the years, there have been little or no improvements to the functionality of the portal and this has led students to be desirous of a change. This influenced my decision to embark on redesigning the student portal.

PROJECT GOALS

1. Redesign the user interface of the portal to serve as a hub for all important information and resources needed by students on a day to day basis.

2. Implement new features and tools to be used by the students for an easier and more reliable flow of important information.

PROBLEMS

The student portal has become rather obsolete and students basically use it for only three things: payment of school fees, course registration and balloting for hostel accommodation. Also, students are not provided with relevant resources that are meant to be used on a daily basis. Lastly, students cannot get reliable information from the portal unless they perform an extensive search on the school’s website.

SOLUTION

To get students to use the portal daily, I introduced new features like schedules(timetables), student mails and a campus map amongst others. I also made the portal more accessible by creating a mobile app as most students are usually on their mobile phones. In addition, the portal was made to be more informative by providing students with relevant information through the introduction of the notification section for easier flow of communication and information from the school to the students.

USER RESEARCH

I began the research with a simple Google form to understand how the students currently use the portal and to find out what features they would prefer to see in the redesigned version.

Key Findings

1. Students disregard most resources that are not on the dashboard.
2. Lack of important news and alerts.
3. Some resources on the portal are not working.
4. Changing the default password as a new student can be stressful.
5. Students want to have a “most used links” feature on the dashboard.
6. Students want to see some new features: Student Mails, Timetables, Scholarship Opportunities, Campus Map (for freshers), View upcoming events in school, Ability to change portal profile picture.

I classified these features into 3 main groups (Academics, Resources, and Finances).

PERSONAS

These 2 personas were created to help me focus on the target audience and user groups.

DESIGN PROCESS

Sketching

After finding out the main problems, identifying the most used services and brainstorming for new features, I moved on to the design process. I sketched out a few variations for the portal keeping my research in mind.

Wireframing

After solidifying a few ideas, I took it to the next step by creating wireframes for each page (Dashboard, Academics, Resources, and Finances)

HiFi Mock-ups

Due to the relatively short time available, I skipped Lo-Fi Mock-ups and went straight ahead for HiFi Mock-ups and sent it out for testing.

The new design received a lot of positive feedback as the portal now has a new and fresh user interface and more useful features to make student life easier.

Test Prototype here: https://xd.adobe.com/view/9371ef35-b85c-4946-5de3-cbc4ab5962a2-e540/

**preferably on a PC**

STUDENT PORTAL APP

Most students own mobile phones, therefore to encourage daily use of the portal and to facilitate easy access to important information from the university management in real-time, I created an app for the student portal.

DESIGN PROCESS

Sketching

I sketched out a few of the screens I wanted on the app keeping in mind my research.

User-flow

I came up with this user-flow for the app. Features like Mails and Courses feature on the bottom navigation panel while all other features (Academics, Resources, and Finances) go into the side navigation panel of the app

Screens

Here a few of the screens from the app

VISUAL DESIGN

I used the Helvetica font family all through the redesign process of the portal. For colors, I chose different shades of Blue; The base color (#365A6F) is a lot darker than the accent color (#77B1D2)

The app also received a lot of positive reviews from students as it addressed one of their most vital needs.

Test Prototype Here: https://xd.adobe.com/view/7945b45e-ec36-4691-563d-6f87418a979c-0f74/

**preferably on a PC**

CONCLUSION

Summarily, the new student portal design presents a massive upgrade from the existing portal. With the introduction of new features and functionalities and a more user-friendly interface, it addresses the needs of the student population and improves communication within the student community making student life easier.

Thanks for reading! You can see more of my work on Instagram and Behance.