Problem
Even in this day and age, most college and school ERP portals have an outdated and cluttered UI/UX. This results in a frustrating experience for students who have no choice but to use these complicated, dysfunctional and unresponsive interfaces to access their academic data and facilities.
A frustrating process of accessing academic data such as attendance, grades and college updates discourages students from utilizing this data.
This is a problem I've personally struggled with in college. I've also come across many other students that experienced similar frustration with their respective college ERP portals, or lack thereof. This motivated me to think of a design solution to address this problem.
Process
User Research
Through personal observations, discussions with students from different universities, and research on internet forums, I identified the most common pain points that they feel while using their college ERP portals:
- The interface of existing college portals is complicated, cluttered and unresponsive, which makes it frustrating to access academic data. Each task requires more time and effort by students than it needs to.
- Students have to check college website or WhatsApp groups for college updates and schedule changes. Many times they forget to check and miss important updates.
- Keeping track of class timings and location can be difficult as most students have to rely on time-tables shared on WhatsApp groups or college website.
- Tracking attendance is difficult. Often students have to scroll a long way to find a specific date's attendance. They also have no means to view attendance trends.
I empathized with the frustration caused due to broken functionality, complicated flow of use and an outdated design.
Ideation
I explored multiple potential design solutions for the problems highlighted in the research. The major challenge was to define an optimized flow of operations and a seamless integration of modules in a centralized platform.
Expanding on the ideas generated in the brainstorming session, I narrowed it down to four modules that I wanted to simplify for the users.
Attendance
Grades
Schedule
Notices
I started drawing rough paper wireframes to establish a basic layout that I had in mind. With the basic layout finalised on paper, I proceeded to convert the layout to wireframes in Figma.
User Testing
I conducted an unmoderated usability study among students of different colleges. My aim was to gather feedback about the design and determine if users can navigate and complete core tasks within the prototype.
Key Feedback:
- The flow and navigation of the app is very smooth.
- The homescreen layout feels empty and can be improved.
- Calendar layout for viewing attendance is helpful but can be improved.
Keeping the feedback received in mind, I started working on adjustments and changes while converting the design to high-fidelity.
Changes done based on user feedback:
- Completely revamped the homepage to make it more useful and visually appealing for the user
- Added a navigation bar to further improve the navigation & flow of the design
- Added a weekly view on the calendar screen to improve usability
While working on these changes, I also learned in depth about Auto Layouts and Design Systems in Figma and made sure the design had a structured Design System. I utilized the Auto Layout feature wherever it was feasible to make sure that the design is consistent and pixel perfect.