Information Architecture focuses on the organization and structuring of content and information in a clear and logical way. Information Architecture can be visualized as the center of a Venn Diagram between target/end users, content of the website or app where the user is browsing, and the context of the content (image from Adobe Blog). Adobe Blog's article on Information Architecture describes this relationship and concept as "the creation of a structure for a website, app, or other products, that allows users to understand where they are — and where the information they want is — in relation to their current position".
Information Architecture (IA) is important because time is a precious resource for [end] users, and people will abandon complex tasks/sites/apps/etc. if they feel as if they're wasting too much time on it. Users will also abandon a website if they find it takes them too long to navigate through the site where they want to go, or even if the site takes too long to load — and once those users leave, it's hard to get them to come back (or even want to come back).
Quinnipiac University – Information Architecture
"The Quinnipiac website has won awards for novelty in overall aesthetics. However, there have been many complaints by prospective and current members of the Quinnipiac community that it is incredibly difficult to find things on the site. Is this a case of visuals taking on more importance than information? How can this issue be rectified to be both visually appealing and make information easily accessible?"
The Information Architecture
Below you will find a [large] diagram of the current QU site's navigation hierarchy. I addressed the navigation because this is what I feel is the root cause of the QU site's issue — there's way too much information all in one place. I also feel that having two menu items (the main menu nav and the Q / schools) is overkill in any website's design, but I left it because I can only assume it was incorporated for a reason.
Here's the Sitemap Key for reference:
For "ease of sight", here are the individual nav items at a larger size:
The [Proposed] Solution
The solution I went for was the most obvious — the typical global navigation menu. A fly-out menu that covers 90% of the screen is intimidating enough, and having every menu item listed out at anything above a tablet's resolution can be daunting and overwhelming, which is why I think concise, top-tier/level category items work best.
In addition to creating a new [proposed] sitemap hierarchy, I also did a mockup of what the new menu would look like. As I mentioned earlier, I ended up leaving the right, Q / Schools fly-out menu intact; however, I reformatted the layout to be a bit more consistent with the drop-down nav's aesthetic and layout.
Again, here are each of the menu items at full-size for better viewability:
As I said before, browsing through a website can be an awful experience if you're given too many options and are overwhelmed with where to go next. As stated in the quote, the Quinnipiac website seems to revolve more around aesthetics than it does providing information. However, an education website should be able to do both, since people will decide against looking into a school or college if they can't find the information they need. I chose to use a drop-down navigation menu with top-tier/level categories for two reasons: there were four "calls-to-action" on the original site that were uncategorized, and literally "everything else" that didn't apply to "Academics", "Student Resources" or QU as an overview was shoved into the "everything else" category, dubbed the "Other Resources" category. The rule of thumb with website navigation is to not have more than seven (7) top-level items. The QU site doesn't exactly "break" that rule, but the reason I'm using quotation marks is because it technically does with how it lists certain items separately as their own entities. With the "Quinnipiac Education", "Apply Now", "Visit", "Contact Us", and "Donate Now" items, the total navigation top-tier count comes to twelve (12). That's a bit overwhelming in my opinion. I understand the appeal of wanting to make items like "Apply Now" and "Visit" emphasized by keeping them separate from top-level category lists, but then at that point you can use an in-page rail menu for quicklinks like that (I may also be biased because I work for a university that does that, but that's another story). You can also use an on-page form or quicklink for each of the schools as well for applying, but the "Visit" link isn't necessary considering it's already included in the "Meet Us" menu item (which is further down on the left-hand flyout menu on the original site's nav... that's a bit redundant, no?).
In a nutshell, I reorganized some of the items and gave a more focused category title to each top-level navigation item in order to eliminate the "Other Resources" "castaway" menu. That menu feels as if those items aren't prioritized, which they should be considering Alumni and Parents are technically an important part of any school's overall community.
Each navigation item would lead to its own page with its own appropriate information and links, but having a top-level menu that allows you to quickly navigate through important menu items allows for ease of use.
Quinnipiac University – Companion App
Student App (Data Flow Diagram)
After having seen Dale Day's (my fellow classmate) "love/hate" relationship with the MyQ website, I had the idea to make a companion app for it specifically. Unfortunately, the main QU app essentially does that. So, I ended up taking Professor Akselsen's idea(s) about a prospective, undergraduate, and graduate student app. The QU App seems to be a companion app for the site in and of itself, so I decided to make a generic student-centered app.
No login is needed to view all the aspects of the Quinnipiac app that relate to prospective/admitted students, but signing in with your QU ID unlocks menu items and clickthrough links that are specific to you as an undergraduate or graduate student. There is a menu on the right-hand side that allows you to either sign in or out, access the top-level menu items (anything labeled with one (1) decimal point; i.e. 3.0, 4.0, etc.), or add/access menu items in your Favorites.
There is logic that occurs on the main screen (and to the menu) once you sign in: if you are an undergraduate student, you have access to the undergraduate section items and some of the items in the graduate screen (the same items as someone not signed in) — this is in case you want to apply/are interested in continuing your education at Quinnipiac at the graduate level. However, the undergraduate item is removed from graduate students' views.
*Note: All screens have a "Back" button located on the top, left-hand side of the screen to enable the user to go back to the previous screen.
The full data-flow diagram:
The icon key for reference:
For "ease of sight", here are the individual nav items at a larger size.
First portion of the data flow diagram which involves the top, right-hand menu and the main screen.
All top-tier/level items that can be found on the main screen; all these items can be found in the aforementioned top, right-hand nav menu.
First four (4) items (3.0 — 6.0) found on the main screen with their respective layers:
Admission (made smaller for easier viewing):
Last three (3) items (8.0 — 10.0) found on the main screen with their respective layers: