Student Portal Information Architecture and Interface Design
Streamlining the navigation of Mount Mary University's intranet and creating a cohesive user interface to give students and staff the tools for success
Capstone
UX Design & Research
Intranet Design
Introduction
The university's request sounded simple, "redesign the school's intranet to improve the student and faculty experience." With this task, I went into the project thinking it would be a simple UI redesign.
However, I quickly learned it would be more challenging than I expected. I found myself immersed in and humbled by figuring out how to organize information for navigability, working within the technical limits of a student information system, and having only one developer.
I took on the challenge as the sole designer and researcher over a 12-week period and delivered:
A restructured navigation and content structure, improving usability and informed by user research insights
Accessible and aesthetically pleasing user Interface updates informed by heuristics and UI best practices, creating visual consistency
Product
The My Mount Mary student portal is essential to student and staff success. Students, employees, parents, and alumnae use the website to:
Review and register for classes
Check and enter grades
Pay tuition
Find necessary forms, documents, and records
Users
Students
University employees
Alumni
Problem
Mount Mary University students and staff are overwhelmed and confused by the academic portal. They struggle because:
They can't find things where they would expect to.
Search results are numerous but unrelated to their question.
They are overwhelmed by walls of text and visual inconsistencies.
These issues make it difficult for students to register for classes and slow down the workflow of faculty and staff.
Solution
A website information architecture structure based on user research and styling recommendations that improve usability
Merge "My Academics" and "My Advising" sections
Prioritize popular and commonly searched for content
Archive outdated content and remove broken links
Implement consistent spacing, icon sizing, and design
Process
Research & Discovery
Competitive Analysis
Reviewed the student portals of 4 local universities and colleges to identifying notable features and paying attention to navigation and UI design.
Student Surveys and Interviews
Surveyed 49 students and conducted 5 student interviews to understand student pain points.
Stakeholder Meetings
Conducted interviews and meetings with stakeholders to understand the goals and challenges of the university and technical constraints of the portal.
Employee Survey
Surveyed 25 faculty, staff, and administration members to gain a deeper understanding of portal challenges and issues.
Content Inventory
Scraped the website to understand what information was on the site and collect data for card sorting and tree tests.
Hybrid Card Sort
Performed an unmoderated hybrid card sort with 22 students and employees to understand users' mental models and begin site mapping.
Information Architecture & UI Design
Site Mapping
Used findings from surveys, interviews, and card sorts to design an initial site map to be validated during tree tests.
Tree Tests
Conducted 6 moderated and 27 unmoderated tree tests with students and employees to test intuitiveness and usability of the proposed structure.
Research Synthesis and Site Map Refinement
Compiled and analyzed all previous research to generate overarching findings, insights, and opportunities. Used synthesized data to refine the site map.
UI Design
Informed by WCAG AAA standards and UX design best practices, I produce UI recommendations that required light HTML & CSS adjustments while standardizing the interface and increasing usability.
Recommended Changes
A website information architecture structure based on user research and styling recommendations that improve usability
Primary Navigation
Merging of "My Academics" and "My Advising" sections
User research showed a large overlap in what students and staff felt belonged in "My Academics" and "My Advising." This finding presents the opportunity to merge the two into a single section separated into subgroups, like Registration, Graduation, Academics, etc.
Aligning Elements and Implementing Uniform Spacing
Aligning elements and using uniform spacing reduces visual clutter and user confusion.
Users are more forgiving of minor usability issues when using an aesthetically pleasing interface and are more likely to perceive it as easy to use. — Aesthetic-Usability Affect
Sidebar Navigation
Increased Spacing and Icon Sizing
Spacing is increased to reduce visual noise and improve readability. Indentation is used to show the relationships between links. Icon sizes are standardized to create consistency.
Reprioritizing Content
Based on user research findings, the new sidebar prioritizes content that is more relevant to and frequently searched for by students and staff. It also removes dead-end links or links that lead to sections of the website that have not been updated in the past five years.
User Interface
Implement consistent spacing
Uniform spacing in increments of 8px is used for visual consistency and to standardize the development process.
Column Resizing
The center column is expanded to cover more of the page's real estate. This visually signifies the section's importance in the hierarchy of information.
Colors, Icons, and Text Styles
The university's primary dark blue, "University Blue," is used for links and interactive elements. The navigation's deep blue is used for headings. These colors create a cohesive, sophisticated, and minimal interface aligned with the university's branding.
Variations of the yellow found in the logo and bolded text are used to highlight important information in a way that draws attention while maintaining a clean interface.
Icons are standardized to 16px, and redundant icons are removed, reducing visual noise and streamlining development.
Hierarchy is created through font weights — regular, semi-bold, and bold.
Outcome and Impact
The university has just begun implementing the visual improvements and assigning content cleanups to different departments. Because of the portal's size, this work will be a long-term project. Metrics to measure the impact are not available yet.
I would recommend measuring:
Document and page analytics
User sentiment
Error Rates
Task Completion Rates and Time on Task [New vs Experienced Users]
Next Steps
Content Cleanup
Status: In Progress
UI Design Implementation
Status: In Progress
Style Guide & Design System
Status: Coming Soon
Continuous User Sentiment & Usability Assessment
Status: Coming Soon
Document and page analytic tracking
User sentiment surveying
Task Completion Rates and Time on Task [New vs Experienced Users]
Reflection
As mentioned in the introduction, this project was challenging. However, it was very rewarding to do work that would improve the experience of future students and create a long-term project that fostered collaboration between the UX Department and the administration.
I'm grateful for the opportunity to expand my UX Design and Research skills while working on this project. It has shown me the importance of having clear goals and a well-defined scope. I've also learned that some of the most impactful user experience improvements have little to do with how a product looks.
