Student Service Web App Redesign — A UX/UI Design Case Study
How I redesigned the user interface to improve the user experience
Introduction
In my final year at the Faculty of Technical Sciences in Novi Sad, I took on a project for my bachelor thesis to redesign the student service web application. Students use this application daily to manage their academic activities, but it has become outdated and difficult to use over time.
Imagine this
Consider a digital environment where essential academic tasks are filled by outdated design, inefficient navigation, and a need for more user-friendly features.
For students already juggling the demands of academic life, these obstacles can transform routine activities into sources of frustration and inefficiency, adding unnecessary stress to an already challenging experience.
This scenario is not hypothetical.
It describes the reality students face using the student service web application at the Faculty of Technical Sciences in Novi Sad. Despite its critical role, the application had become increasingly outdated, leading to widespread user dissatisfaction.
The Discovery
Faculty of Technical Sciences in Novi Sad has over 15,000 students, all relying on the student service web application to manage their academic lives. In casual conversations with fellow students, I frequently heard complaints about how it was making their academic tasks more difficult than they needed to be.
In a time when students have shorter attention spans and need motivation to stay focused, using inefficient tools can be a major setback. Serbia’s low university graduation rate (the percentage of students who finish their studies in the predicted time frame), which stands at only 7.4%, highlights the need for better support systems.
Seeing these challenges, I decided to redesign the student service web app as part of my bachelor thesis. My aim was simple: to create a tool that helps students and makes their academic journey smoother and more efficient.
...
User research
During user research, I focused on gathering direct insights from students at the Faculty of Technical Sciences in Novi Sad.
The research phase has two parts:
01 Survey
02 Interviews
Survey
Goal: Identify the most common issues students face with the app to guide targeted design improvements.
A survey was conducted among 83 students aged 19 to 23, representing 8 different study programs.
The survey consisted of 21 questions — 14 closed, 4 open, and 3 control questions — and took approximately 10 minutes to complete.
Students could leave any question unanswered.
Later in the text, we will rely on the survey results to explain and justify specific design changes.
Interviews
Goal: Identify the specific and personal issues students face with the app to guide targeted design improvements. Learn about the users, their needs, motivations, habits and frustrations.
During the evaluation of the student service web application, semi-structured interviews were conducted with 10 students from the Faculty of Technical Sciences, spanning the first, third, and fourth years of undergraduate studies.
The students were encouraged to express their opinions freely, and during the interviews, they actively used the application to illustrate their frustrations.
One major issue highlighted by 6 students was the lack of intuitiveness in the application. For example, they found tasks like exam registration to be confusing and difficult to complete, which pointed to the need for a more user-friendly interface.
Another significant problem was complicated navigation. 7 students reported that the menu structures are hard to follow when searching for important information. For instance, fourth-year students mentioned that navigating between sections required excessive clicks, making the process inefficient.
There were complaints about the inconsistency in design across different sections of the application. 3 students noted that varying layouts between pages made the experience confusing. As an example, the exam results page had a different format compared to the exam registration page, which led to unnecessary confusion.
Lack of support was another concern, especially among first-year students, with 7 students stating that the application lacked clear guidance for new users. This led to difficulties in completing even basic tasks, like updating personal information.
Four students pointed out the frustration caused by errors within the application. A common issue mentioned was the appearance of unhandled Tomcat server errors, which indicated a deeper problem with the application’s stability and reliability. These backend mistakes must be avoided since they have an enormous impact on reliability.
Motivations
Saving time — The redesign aims to simplify the app’s interface, allowing users to complete tasks quickly.
Competing with others — The updated app is expected to enable students to easily track and compare their academic progress with peers, fostering healthy competition using gamification principles.
Reducing stress —By making the app more user-friendly, the redesign will help minimize the stress students face when managing their academic responsibilities, which are already stressful enough on their own.
Frustrations
Navigation — Complicated menus, poorly organized sections, and difficulty finding necessary features.
Support — Lack of awareness about available support, slow responses, and unresolved technical issues.
Log-in Process — Lack of awareness about available support, slow responses, and unresolved technical issues.
Exam Registration — Confusing process, unclear deadlines, and insufficient communication about exam-related updates.
Ideation
The main task was to create a tool that helps students and makes their academic journey smoother and more efficient.
This is a broad task, so we need to break it down into smaller chunks. In the further text, I will discuss improved features with screenshots showing how they look and text describing the exact perspectives associated with them.
Log-in
Survey results indicate several issues with the login process for the application, such as the lack of a feature to remember the logged-in user, significant problems if a student forgets their password, and an overall interface design that is non-intuitive, and cluttered with unnecessary elements.
The login modal has been redesigned to include only the most essential fields for data entry, an option to “Keep me signed in,” and a feature that supports users in case they forget their password, guiding them directly through the problem-solving process via email instead of directing them to contact the support staff. If the user enters an incorrect password, all entered data will remain intact except for the password itself, which was not the case in the previous application version!
Home page
Enter your text The home page is one of the most important parts of the application because the amount and context of the information presented to the user immediately after logging in significantly affect their mood.
The old version of the application contained a large amount of poorly organized information, which led to increased user frustration. After the redesign, the home page now includes the most important information based on the results of surveys and user interviews, available for review immediately after logging in:
Account balance, with an option to hide the exact amount
The option to hide the exact amount is useful for students who do not want others to know how much money they have in their account but want the freedom to log in to the application in the presence of others.
2. Number of registered exams.
Clickable
3. Number of published results
Clickable
4. A chart comparing the user’s performance with the average performance of other students
Clickable, leads to Statistics page
5. A brief overview of the most important study-related statistics
Clickable, leads to Statistics page
On the left side is a redesigned navigation bar that includes:
The logo of the Faculty of Technical Sciences student service web application
8 links to the most important sections of the application
A profile overview of the logged-in user
An option to log out of the application
Problem
Users expressed frustration with the old version due to the need for clearer notifications regarding exam-related updates (registration, scheduling, and cancellation of exams). This issue was addressed by placing a homepage banner informing users of the most important current updates.
Solution
The pictures above demonstrate the solution for notifications sent to students when important exam-related events occur. These notifications are stacked one on top of the other, and when one is dismissed using the option in the top right corner of its container, the next unread notification appears, ensuring that users read each notification at least once.
Exams
As the most important functionality highlighted by surveyed students through both the survey and interviews, the “Exams” segment of the Faculty of Technical Sciences’ student service web application has been specially organized and tailored to meet the needs of students.
Problem
The survey indicated that students find frustration with the technical details related to exam registration, including information about exam scheduling, the deadline for registration, and contact information for the professor conducting the exam.
Solution
The application now includes exam information organized in a table. The final registration deadline is displayed on the homepage and in the top right corner of the screen. Additionally, a fixed notification stating, “To successfully register for the exam, you must do so at least two working days before the exam begins,” is placed on the interface where unregistered exams are listed.
When the “Apply” button is clicked, a modal appears displaying crucial information about the exam, such as the:
Exam name
Number of times it has been applied for
Choice of the exam period (which is always set to the current period),
Account balance after applying for this exam. The balance is highlighted in a bright orange, almost red color, to indicate the reduction in funds and emphasize the importance of this action for the user.
Completed exams are displayed on a single screen without the option to filter by semester or year because students indicated through the survey that having a centralized place to view all their completed exams is important to them.
A key feature is the brief statistics shown in the upper right corner of the screen, which allows students to quickly see their overall progress. Grades and exam dates are displayed, with more detailed exam results available on the subsequent screen, as shown in the picture above. A student who entered to see his completed exams probably wants to see a bit of statistics too.
Calendar
A key functionality that will transform how students use the application is the calendar, which includes all information about important time blocks. This feature is essential for every student who wants to easily organize their time and is an exclusive one since it doesn’t exist in the old version.
The redesigned calendar functionality offers the flexibility to view their academic obligations either weekly or monthly, depending on their current needs. Students who prefer to plan several weeks can opt for the monthly view, while those focusing on short-term organization can use the weekly view to manage their tasks more effectively.
The majority of surveyed students expressed a strong need for a scheduling tool that brings better task visibility and improved organization.
The calendar includes:
Non-working days
Exams
Lectures
Practical sessions
Clicking on any obligation opens a modal window with a detailed description and a link to the lecturer’s contact page. The current or upcoming exam period is displayed in the top right corner.
Study Statistics
72.3% of students mentioned in the survey that they want to see statistics that allow them to measure their academic performance and compare it with their peers.
While this functionality is not crucial for the basic operation of the student service web application at the Faculty of Technical Sciences, it reflects a strong desire among students. Psychologically, this could potentially foster a positive competitive spirit, aligning with the principles of gamification to motivate students to improve their performance.
Documents
In this section, there are functionalities of a secondary nature that are needed by each student only a few times during their studies and that’s the reason they are accessible only on this place in the app.
These include:
Certificates
My Profile
Request for Graduation
Studying Agreement
Internship
In the picture above, the student can edit information in the “My Profile” subsection, a feature that a small number of survey respondents indicated they wanted as a functionality because it is a feature that they use once, and then do not touch until the end of studies.
The user experience for graduating students has been significantly improved by streamlining the “Request for Graduation” process. Previously, the process was confusing and spread across two disjointed pages. The redesign has unified all steps into a cohesive workflow, making the submission process more intuitive and efficient.
Student Support
Survey results indicate that users (83.5% of them) feel unsupported when using its features.
Key issues identified include:
Lack of Awareness: Many students were unaware of any available support for using the application, highlighting insufficient visibility and accessibility of these services.
A dedicated “Support” section has been introduced to clearly guide users in case of issues.
Response Deficiency: Students expressed dissatisfaction with slow or absent responses to support requests. In some cases, support failed to resolve technical issues or provide useful information.
To address this, the “Mileva Chatbot” feature has been implemented, designed to provide timely and accurate responses.
On the contact page shown in the picture above, the first two contacts available to all students will be the Head of the Student Service and the Academic advisor for the student’s program. The remaining contacts will be listed, with a filter option available based on the type of study program if the student needs to reach other Student Service staff members. The academic advisor for the student’s major is highlighted with a bordered color in the modal, making it more noticeable and signaling that this contact might be more important for the student than others.
One of the key new features is the Mileva Chatbot, designed to offer efficient solutions for students. This chatbot is trained with data relevant to all students and serves as a resource for addressing common issues promptly.
The interface features a dialogue where students can interact with “Mileva,” starting with a list of frequently asked questions. This feature, as shown in the picture above, will significantly reduce the workload for Student Service staff at the Faculty of Technical Sciences and decrease frustration among users of the application.
The development of this solution was supported by all interviewed users, who recognized that this functionality aligns with the latest trends in software products. The chatbot is named Mileva after the popular Serbian TV show “Radio Mileva,” where the character Mileva is portrayed as a woman who knows everything, making it a fitting name for a knowledgeable and helpful chatbot.
Settings
Based on feedback from surveys and interviews, adjustments to the Faculty of Technical Sciences’ student service web application were necessary to align with user preferences. Although the option to change the language existed in the old version, it was flawed as it logged users out when the language was switched.
The redesigned application now includes the ability to toggle between light and dark themes based on user preference. While this feature was less frequently requested in the survey, it aligns with modern application standards, where users prefer to customize their interface. Research shows that allowing theme changes can significantly enhance the user experience by catering to individual preferences and reducing eye strain during prolonged use.
Opportunities for Future Improvements — More Gamification
To enhance the user experience of the student service web application, one promising approach is the introduction of gamification elements.
Gamification leverages game-like mechanics to motivate users, which can be particularly effective in an academic setting where students are often driven by competition and rewards.
We are talking about people aged 19–23, still playing a lot of real-world and digital games.
Levels and Competitions: Introducing levels based on academic performance allows students to compete within their specific study programs. This competition can be segmented by individual subjects or overall semester performance, creating a dynamic and motivating environment. Students progress through levels as they achieve higher grades or complete specific academic tasks.
Leaderboards and Prizes: Leaderboards will reset after each exam session (e.g., February session), displaying top performers within the same study program. The Faculty can offer rewards such as gym or pool memberships, or even monetary prizes for students who rank highly. At the end of the academic year, top students from each year (1st through 4th) could receive more significant rewards, further forcing consistent academic effort.
Psychological Benefits: This gamification approach taps into the competitive nature of students, motivating them to improve their academic performance. By providing tangible rewards and recognition, students are likely to be more engaged with their studies and the application itself, leading to a more satisfying and productive user experience.
Opportunities for Future Improvements — Student Clubs and Sections
The student service web application can feature a dedicated section for student clubs, allowing students to easily join various groups centered around sports, culture, and other extracurricular activities. These clubs provide opportunities for students to also engage in socially beneficial work, such as community clean-ups or volunteering events.
Students who participate in socially beneficial work will be rewarded with certain academic benefits. For instance, they may receive additional opportunities to take exams during extended exam sessions. In specific courses where professors allow it, these students might also be given more flexible grading criteria, making it slightly easier to pass the subject.
This initiative aims to promote social responsibility among students while recognizing and rewarding their contributions to the community. By participating in these activities, students not only enhance their academic standing but also build a sense of a shared purpose with their peers.
Conclusion and Future Work
This article detailed the redesign of the student service web application at the Faculty of Technical Sciences in Novi Sad, aimed at improving usability and enhancing the student experience.
Future Scope
The next step is to conduct usability testing to validate the effectiveness of the redesign in real-world scenarios. The insights gained from these tests will be critical for refining the application to better meet user needs.
Takeaways
The next step is to conduct usability testing to validate the effectiveness of the redesign in real-world scenarios. The insights gained from these tests will be critical for refining the application to better meet user needs.