University of Maryland - Baltimore Financial Assistance Website

Project Overview

The University of Maryland - Baltimore tasked us with redesigning their Financial Assistance section to improve user experience and accessibility. The goal was to create a more intuitive, informative, and accessible platform for students seeking financial aid information. Our objective:

Enhance User Experience: Establishing a clear information architecture for simplified navigation and comprehension.
Visual and Interactive Redesign: Focus on aesthetic enhancements for positive user interaction.
Overall Goal: Create a website that is both informative and enjoyable, to help with students' needs with efficiency and ease.

The Process

The redesign process for the University of Maryland - Baltimore’s Financial Assistance section was organized, planned and executed, beginning with a comprehensive Content Inventory to assess and catalog existing content, ensuring relevance and optimizing organization. This was followed by a Competitive Analysis, where we evaluated key competitors to identify industry standards and innovative practices that could enhance our approach. To better understand our users' needs and behaviors, we developed detailed Personas and Journey Maps, which guided the design of user-centric workflows and interfaces. With this foundational understanding, we created a Site Map that structured the website logically and efficiently. To optimize information architecture, we conducted Card Sorting sessions with potential users, which helped in organizing the site content in a way that was intuitive to our target audience. The process culminated in the creation of detailed Wireframes, which laid out the visual blueprint for the redesigned website, focusing on enhancing usability and improving the overall user experience. Each step was very important in shaping a user-focused design that met both the practical and aesthetic needs of students seeking financial assistance.

Desktop Mockup of UMB Financial Assistance Website Redesign

The Content Inventory

Personas and Journey Map

We employed detailed personas representing key user groups: prospective, current, and graduating students; parents or guardians; and university employees. These personas were essential in shaping design decisions to cater specifically to the diverse needs of each user category. For example, the design was simplified to enable quick information retrieval for students, while more comprehensive explanations were integrated for parents and guardians who may require additional context.

Our journey mapping focused on a representative persona, 'Anastasia Doyle,' a prospective student at UMB. Analyzing Anastasia's interactions with the existing website highlighted crucial challenges related to navigation and information access. These observations were critical in the redesign process, ensuring that such barriers were removed in the new website layout, thus facilitating a more intuitive and accessible user experience for all stakeholders.

User Persona

User Journey Map

Site Map

In the redesign of the University of Maryland - Baltimore Financial Assistance website, we tackled a previously complex navigation system that included 15 different sections. Our refined site map streamlines these into 8 distinct categories, significantly enhancing the website's navigability and user accessibility. This strategic consolidation involved merging related content to minimize user confusion and facilitate easier access. Notably, various loan options were integrated into a single 'Loans Available' section to simplify comparisons. Additionally, 'Financial Calculator' and 'Budgeting and Savings Tips' were combined into a comprehensive 'Financial Tips and Calculators' section.

Our redesign efforts were driven by a commitment to improve usability and functionality, enabling students and other users to locate needed information swiftly and effortlessly. The new site structure was further validated through card sorting studies, ensuring our organizational changes met user expectations and needs effective

Card Sorting

The card sorting exercise was an important component in evaluating the usability and functionality of the redesigned site map for the University of Maryland - Baltimore Financial Assistance website. Our objective was to refine the information architecture based on user feedback, focusing particularly on the clarity of page and subpage titles. We utilized a hybrid card sorting method, involving 34 participants from a diverse demographic, to gather insights on naming and organizational preferences.

During the exercise, participants had the flexibility to suggest names and placements for various sections. This was especially helpful in making more descriptive changes, such as renaming "School-Specific Information" to "Financial Aid Information – School of Dentistry" to aid navigation for users unfamiliar with UMB's structure. The feedback led to adjustments in category naming to enhance clarity and reduce confusion, confirmed by a subsequent closed card sorting session with 20 participants.

Results from both sessions indicated varying levels of agreement on category placements, with significant improvements noted in how loan-related information was categorized. The exercises revealed that well-defined category names and clear, familiar terminology are critical in helping users efficiently find information, with our final site map reflecting these user-validated adjustments.

Sketches

The initial phase of designing involved creating sketches and wireframes that laid the foundation for the website’s structure and user interface. This process started with hand-drawn sketches to rapidly explore different layout and navigation options. These sketches were then translated into more detailed wireframes using Figma, which provided a clearer visual representation of the site’s architecture.

The Wireframe

In the final phase of redesigning the University of Maryland - Baltimore Financial Assistance website, we reviewed our previous work—including user stories, personas, user flows, and the revised sitemap—to ensure a strong foundation for the wireframing process.

I led the design of the desktop wireframes, focusing on a user-centered approach to simplify the navigation and enhance content accessibility. By reducing the main menu from 15 to 8 categories and minimizing subcategories, we achieved a more streamlined user experience. This reduction not only made information easier to find but also lessened the need for excessive navigation through tabs. We strategically used pop-up and drop-down menus to group information effectively, reducing page redirects and improving content manageability.

These changes, along with visual consistency across the site, were implemented to make the website responsive and accessible across various devices, thereby enhancing the overall user experience and ensuring that all users could navigate the site with ease.