The University of Maryland Baltimore was in need of a new site structure for their Student Financial Assistance page to better meet the users' needs when accessing the financial assistance information.
Client: University of Maryland Baltimore, Student Financial Assistance | Timeline: October - November 2023 | Group Members: Olivia Pollard and Margaret Peterson
Why is this in my portfolio? This study showcases my ability to complete a website audit and to restructure the information based on findings from a card sorting study,
Methodology
Conducted a hybrid card sorting test method using Optimal Workshop in order to enable users to sort cards into categories that might make more sense to them while also testing the intuitiveness of the pre-defined category labels provided.
Participants
Participants were recruited through various social channels and by word of mouth.
Personas
Before we began our card study, we built out personas based on the different student demographics at UMB, all with goals of finding different types of information on the website.
Toggle through each person to learn more about their experience on the original site.
-
Maya is an example of someone who is not yet considered an adult-learner but has experience in the workforce. What’s unique about her is that she had the financial assistance and guidance in undergrad, but is now independent. She struggles most with where to begin, which is a common experience for most people who are doing this for the first time. We also wanted to have someone who is good with technology to show it’s not always a digital ability issue when accessing a website, but sometimes it’s the website's architecture that is limiting the user's experience.
Maya’s experience with finding scholarship information related to the program she is interested took longer than expected. Because of the main nav options, she could only choose between prospective, current, or graduating students. This already cornered her into a small section of the page. It wasn’t clear at first if she was in the right place, but after exploring around, she happened to noticed the ‘School-Specific Information’ tab. Once on this page, Maya found the information she was looking for, but thought that this information should be more readily available to prospective students and not tucked away in another tab. Overall, Maya left feeling accomplished in finding what she needed, but felt frustrated about the process it took to get there and she hopes information in the future will be easier for her to find.
-
Jaelle represents the demographic of people who are in need of an internship or work study program in order to attend University. This is unique from Maya’s experience, who already held a stable job before applying. Jaelle’s focus on the financial aid website will primarily be the student employment options, so it is vital that that page has accurate and readily available information. Currently, the pages for jobs are filled with drop down menus and pdfs. She’s instantly overwhelmed at the thought of having so many tabs open to actually see what the position is even for.
-
Eric represents the adult learner who is going back to school to start a different career path. He is accessing the website, knowing which school he wants to access information from and wants to find financial information pertaining specifically to that school. With being out of school for 20 years, Eric needs a site that is going to be easy to access and navigate as the financial aid process has changed since he was in school.
Eric gave up on his search pretty quickly due to being frustrated and having a lot of other distractions in his environment. He felt the information he needed was too difficult to find or unavailable. Eric left feeling like maybe this graduate program is not a good fit for him, but he will try again when he has more time available to devote to the process. He hopes someone will reach back out to him, and says that if they don't, he might move on to a different college. He blames himself for not being able to find the information he needs.
Content Inventory and Analysis
Purpose
The purpose of the content inventory on the University Student Financial Assistance site was to provide an overview of the site's current state. Revealing the site's contents and structures allowed for us designers to make informed decisions on what content to keep, how to organize the information, and how to organize the information in a way that was digestable and accessible to the site's viewers.
You can view our full content inventory and analysis here.
Findings
There was a large amount of information listed throughout the Financial Assistance portion of the website. While it is helpful for prospective, current and graduate students, the lack of an overall hierarchal structure and the excessive amount of pages makes said information harder to find. There are numerous pages that could be condensed down to hold more information while still being accessible to different users.
There was also a large amount of PDFs used as attachments throughout that contain important information. While this information is useful, the way it is presented becomes a barrier as the user must search through hyperlinks and various tabs to access that information when it should be displayed on the sites page itself. Restructuring the site and assigning the text a hierarchal format will help users navigate the site in a more efficient way and allow them to find the information they need with ease.
Sitemap Restructure
We took a look back at our content inventory and analysis data and restructured the site based on our personas. The key changes are as follows:
Removal of redundant school specific information: prospective and current student information were all identical and is available under tuition and expenses.
Combined all sources of financial assistance under one nav rather than having the same information be listed 10+ times
Gave graduating students their own nav label as the resources there are related to loan repayment options rather than being related to school tuition and fee's which they've already paid
Tuition and fee's now focuses on cost of attendance, when awards will be distributed and determining need rather than listing aid options under each section which became redundant
Condensed all resources under one tab rather than under individual sections for higher visibility
Low quality image of a high quality sitemap
Card Sorting Study
After setting up in Optimal Workshop (thank you professor for the license) , we decided on using the hybrid card sorting test method in order to enable users to sort cards into categories that might make more sense to them, while also testing the intuitiveness of the pre-defined category labels provided.
There was a mix of results during the first round of testing which lasted about a week. Sources of Aid and School Specific Information were strong, but Sources of Aid got mixed in a lot with Tuition and Expenses. Originally, the idea was to the have the cost of everything for current and prospective students broken out under Tuition and Expenses, but a few people commented on splitting it between Current Students and Prospective Students as there was a difference between the information they tend to look for. Financial Education and Wellness also created confusion as many participants mixed it with what we categorized under general resources.
Version 2 of the sitemap came about quickly as after a week of the study being live, we were receiving data and feedback that concerned us. We decided to pause the study, reevaluate the sitemap, which led us to version 2.
For the revisions, we took the feedback and broke Prospective Students and Current Students out from Tuition and Expenses and gave them their own level in the navigation. With doing so, we moved Award Information and the How to Apply page under Sources of Aid as that applies to both groups of students. Another big find was combining Resources under Financial Education and Wellness as users were splitting categories between the two. We decided to keep the name Financial Education and Wellness label as it is an office that relates to the school, so changing that would interfere with that link.
Lastly, we took SURFS Login and Institutional Reporting out of the study, however kept it a part of our final architecture. The reasoning was we found these two things to be of importance to the school that needed to be included by the University, however the average user would not use them. The title SURFS confused many study participants, but as the example earlier, SURFS is a system implemented by the University and changing it would affect another department.
After the results from our first case study, we found that people were more likely to put financial aid information all under sources of aid, rather than splitting it up between current students and prospective students. For the second round of our study, we made the change and you can see from the table above that the response was positive to the update.
Current versus prospective students was a challenge as many of the categories could be sat under both
Prospective students focus more on the cost of tuition and attendance
Current students need more information directly on the aid available to them
The original site had the different school’s listed under the main School Specific Information page, but not in the navigation. We decided to divide the navigation level into the different schools as a way to collectively show how the different programs fit together and to help organize the amount of information the user was seeing at once. This decision was agreed upon by most users as seen here in our data. Creating subcategories under each school provides a much cleaner viewing solution for the user.
Card Sorting: Version 1 Data
Creation of Version 2
Current versus Prospective Student Data
School Specific Information Data
Proposed Sitemap and Wireframes
One of the biggest challenges was the navigation tool and how to organize that in a way that made sense and was quick to skim through. From our study, we concluded that presenting information in an accessible way includes how we organized and how we labeled the categories. We included specific leveling indicators which have a color and text hierarchy to aid in eliminating confusion, and reduced the levels of navigation by half. This creates less clicks and page jumping for the user.
For the navigation, we brought everything into a dropdown menu like the original. However, with each level opening, the background grays out to bring focus to the current section being selected. By doing this, it allows the user to focus more on what they are looking for rather than how it is being presented. Used the same method for mobile, dropping down from a hamburger menu and filling up the width of the screen.
Our main action item was breaking out essential information to the users from the original pdfs they were in.
For example, the School Specific Information tab had each school's information saved into a pdf. Most pdfs were exactly the exact same as one another.
By pulling out similar information and putting it on the overview page, it allowed us to focus on, for example, just the Physical Therapy program and its cost breakdown on its own page.
There is also now a consistent textual hierarchy to the page, as well as layout hierarchy. With the navigation and school code/ contact information being at the same level, it shows the importance of these two pieces of the site as they are heavily used. We also used size, weight, and color to aid in the textual hierarchy which allows the reader to skim through to find what they need more easily than if it were to be aesthetically the same.
Lastly, we brought in realistic imagery to elevate the page. As we saw with our competitors, imagery was a big difference between the current site and their's.
Adding imagery will also help with information processing as it gives the eye a break, a place to land and connect with what the page is about.
Proposed Sitemap
Proposed Mobile Navigation Mockup
Conclusion
To conclude, after conducting an exhaustive content inventory analysis, SWOT analysis of several direct and indirect competitors, user focused research using a hybrid cart sorting, design tests of several iterations of our recommendations, and creating final mockups of our design recommendations, we are confident that our site solution for the University of Maryland Baltimore Student Financial Assistance page will better meet the users' needs when accessing financial assistance information. Our data supported the conclusion that simple and elegant changes such as clarifying and condensing redundant information, and making simple aesthetically functional changes to the site's navigation structure will dramatically improve the site’s ease of usability. These clarifying edits will reduce user frustration, and dramatically increase user confidence when selecting University of Maryland Baltimore as their college of choice.
Proposed School Specific Information Site