UX Research
UX Design
Website
Capstone
Introduction
The university's request sounded simple, "redesign the student portal 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 information architecture and content structure, improving usability and informed by user research insights
Accessible and aesthetically pleasing user Interface updates, increasing usability and creating visual consistency informed by heuristics and UI best practices
Product
The Mount Mary student portal is essential to student and staff success. Students, employees, and alumnae use the website to:
Review and register for classes
Check and enter grades
Find necessary forms, documents, and records
And much more
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
Note from Malaika
Ensure video playback quality is set to 1080p in the YouTube settings for the best viewing experience.
Process
This project ran for 12 weeks between February 2024 and May 2024. It was based on a group project I worked on during the previous school year. The previous project turned my groups shared struggle navigating the student portal into a UI redesign project for the website.
The project piqued the administration's interest, and I was approached by a university dean and department chair to continue the work for my Capstone project. However, after meeting with the webmaster, I learned that the group's 2022 UI designs would require months of development on top of the webmaster's other work.
Thankfully, the research from the previous year provided valuable insights and created a starting point to continue the work.
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.
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. This work will be a long-term project because of the portal's size. Metrics to measure the impact are not available yet.
I would recommend measuring:
Usage Statistics of Documents and Pages
Student + Employee Sentiment
Error Rates
Task Completion Rates and Time on Task [New vs Experienced Users]
Tracking Percentage of Outdated Information or Deadlinks
Search Result Accuracy
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
Usage Statistics of Documents and Pages
Student + Employee Ease of Use Rating
Error Rates
Task Completion Rates and Time on Task[New vs Experienced Users]
Tracking Percentage of Outdated Information or Deadlinks
Search Result Accuracy
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.
