Student Information System Redesign
In this case study, we undertook a complete redesign of a student information system, aimed at enhancing the user experience for students accessing their academic records and filling out personal information. Our objective was to replace the existing system with intuitive and cohesive interfaces, ensuring a seamless browsing and data entry experience.
My Role
UX/UI design
Project management
Team
Front-end developer Back-end developer QA specialist
Duration
4 months
Tool
Adobe XD
Before
After
Background
Key Users and Functions
The system serves three main user groups: teachers responsible for grade input and management, students accessing personal and academic purposes, and administrators overseeing user accounts and data authorization.
👩🏻‍🏫
Teachers
  • Input and manage grades for their classes
  • Browse students’ information
👨🏻‍🎓
Students
  • Enter personal and counselling information
  • Browse academic records
👨🏻‍💼
Administrators
  • Manage users account and authorization
  • Browse students’ information
Problems
Confusing Navigation
Users grapple with complex and redundant feature sets, leading to challenges in locating and accessing relevant data within the system
Cluttered Interface
Excessive volume of data on each page compounded by the absence of a clear visual hierarchy, resulting in a disorganized user interface
Lack of Mobile Optimization
Original design neglects mobile user experience, resulting in suboptimal usability and accessibility on portable devices
GOAL
Replace existing interface with a seamless and intuitive design,
ensuring cohesive browsing and data entry experiences.
DESIGN
Streamlined navigation
To replace the old navigation with numerous features hidden under a few toggle options, we introduced a new navigational system - top navigation for different identities and a left sidebar for related features. The sidebar categorizes features into three sections. This decision stems from the scalability offered by the side navigation bar, accommodating potential feature expansions as the product evolves.
Tabular Data Organization
The original system presented excessive text and data crammed onto a single page, causing new users struggle to locate specific information. To enhance information presentation, I opted to separate the data into distinct tabs, ensuring better scannability for the users. Additionally, recognizing the importance of mobile design, tabs emerged as a preferred choice for mobile users, eliminating the need for extensive scrolling to access information.
Mobile Interface Optimization
Here's an instance where I enhanced mobile design for the student rewards and punishments record screen. While a table view suffices for desktops, it's not ideal for mobile due to potential horizontal scrolling. To address this, I adopted a card view for mobile, presenting each data point within distinct cards.
With the time and resource constraints, my approach prioritized designing for larger screens while also factoring in the mobile experience. Furthermore, we adopted a responsive design strategy, eliminating the need to create designs for every individual mobile screen and only customizing where necessary.
Iteration
Through an iterative process, I refined our prototype by actively soliciting feedback from peers and stakeholders during design reviews. Close collaboration with engineers ensured we evaluated development feasibility and constraints, guaranteeing effective implementation. Following the release to select schools, we gathered valuable feedback, guiding subsequent iterations.
Final Design
Reflection
🍵  User-Centric Redesign for Better Readability
This redesign project emphasized the importance of understanding user needs and pain points before initiating the design process. As I reflect on my design, I recognize the opportunity to further optimize the font size and color decisions to improve content scannability. As a designer, I am committed to maximizing the benefits of information systems through thoughtful interface design, and this project reinforced the significance of this mission.
© 2025 Jocelin Liu