Streamlining the University Website Labyrinth

Whether you are a prospective student, a current student, an administrative, or a parental unit, all information on a college website should be easily accessible.

General Assembly UXDI Project 2

Time Frame: Two weeks

Design Prompt: Redesign the information architecture and content strategy of the New York Institute of Technology website based off three personas, the goals of the university and its existing brand.

Through a series of research methods, I was able to define the following problems with the NYIT website:

  • Too many categories
  • Unorganized taxonomy
  • Inconsistent website layout

With the redesign, I integrated the following solutions based on the synthesis of my research and UX best practices:

  • Combine categories that were redundant
  • Restructure navigation
  • Consistent layout

Research

Persona, Heuristics and User Flow

Let’s meet Jessica. She is a current student coming back from a break. She knows exactly what she is looking for but does not have much time to figure it out since it’s getting closer to registration. Jessica will need the school calendar and list of required courses. I decided to go with these two specific needs because they also encompass the needs of the other two personas.

Through the heuristics method, I put myself in Jessica’s shoes to find list of required courses, navigated the NYIT website, and noted some interesting findings:

  • Course descriptions, catalog, syllabus and degree requirements are all correlated and important topics for determining list of required courses. Each of these should be linked together to provide quick navigation between topics in order for students to easily determine what required courses to take.
  • The NYIT Undergraduate Catalog 2015–2016 PDF is a 368-page PDF with poor layout and superfluous information for the first 168 pages including financial aid, withdrawal policy, and other info. The second half of the PDF is where a student can find the list of required courses for his or her respective majors.

As shown in the user flow diagrams below, it took more pages and clicks from the NYIT home page than Google side entry to get to the same page.

Understanding navigation and content through home page and through Google side entrance (searching the topic in Google and finding the same page in the search results)

Takeaway: Improve flow efficiency for important tasks such as looking for the school calendar and list of required courses by making important information accessible on the home page.

Site Map / Content Inventory

Site maps help to visually see the overall navigation. Shown in the site map are the first, second and third tier navigations. Faded out are repetitive categories and topics.

Site map of the NYIT website

Takeaway: Categories & topics can be consolidated and reduced to half of what’s existing.


Competitive Analysis

The existing NYIT site was compared to the existing sites of three other schools: Langara, Drexel and Johns Hopkins.

Competitive analysis helps to identify successful traits and avoid pitfalls of existing sites.

I took into consideration Langara’s wording, organization and layout. Important information needs to be exposed and easily accessible.

Based on Nielsen Norman Group best practices, I determined the following:

  • Avoid Drexel’s long scrolls — not everything is visible at once.
  • Avoid Hopkins layout of topics — reduced user’s scannability.

As shown in the element analysis above, sites with more content in the footer than in the header or primary navigation performed better. Miller’s Law argues that the number of categories an average human can retain is 7 ± 2. Users were confused when there were more than ten categories in the primary navigation.

I also conducted usability tests on all four websites by asking users to perform the two user tasks, finding the calendar and finding required classes.

Langara was the most successful with least number of pages and clicks per task. Langara was most successful with usability testing on both user task flows, finding the calendar and finding required classes. Navigation on Langara took less than half the amount of time on average compared to the three other colleges. NYIT was the least efficient with number of pages, clicks and navigation time per task.

Takeaway: There needs to be streamlined navigation, an organized layout and a reduction in the amount of categories within the primary navigation.

Card Sorting

This method validates the structure of the navigation and whether the navigation categories match people’s mental models. There are 15 categories in the primary navigation and 76 topics for the second and third tier subcategories.

Card sorting process:

  • I created an alphabetic system for the categories and topics to keep each test consistent which also made it easier made it to take down notes on a spreadsheet while observing the user.
  • Since the topic cards were in alphabetic order, it may have affected the way topics were placed. For example, anything that started with academics was consistently being placed in academics.
Card sorting in action
Yellow is existing site. The darker the box is, the more people agreed.

Decisions from card sorting:

  • I eliminated the category of Prospective Student because it was the same link as Admissions which was redundant. From card sorting, more users put topics in the Admissions bucket than Prospective Students.
  • The category of Alumni & Supporters combine with Giving because there was nothing about supporters in there.

I was able to do five closed card sorts and one open card sort. The open card sort proved to be ineffective due to the overwhelming amount of topic cards I had my users sort through. I made a conscious decision not to proceed with more open card sorts. I made executive decisions based on the closed card sorts, hoping to do open card sort once I was able to reorganize, reword and consolidate.

Takeaway: reclassify and reword to match people’s mental models.

Research Findings

Top tasks that the personas need:

  • list of required classes
  • school calendar

Issues with templates:

  • two existing templates: new and old (some pages have not been updated)
  • old template had different navigation bar and undergraduate was spelled incorrectly

Pages to focus on:

  • home page with revised primary navigation and footer

I also noticed from card sorting that there were certain topics that could go under different categories.

Prototype

Validated through the processes of site mapping and card sorting, categories in the primary navigation were reduced from fifteen to eight. I eliminated Current Students and Prospective Students to avoid confusion with Academics and Admissions.

Preliminary Design Sketches for website and mobile
Initial Prototype

I implemented the expandable menu to not overwhelm the user with content. It will work because Jessica the user has high motivation to navigate site.

I based other design decisions on the Nielsen Norman Group best practices.

  • Navigation bars are typically scanned and best user scanning occurs left justified and vertically, shown above in the prototype’s primary navigation
  • Chose not use all caps for all navigation text because all caps reduces legibility.

Link to latest prototype: https://invis.io/VA4B5M7CD

Usability Testing 1

Usability Testing in action

Immediate feedback from usability testing:

  • Global navigation bar seemed to be a success
  • Actual category page layout needed extra work because there was confusion with the wording
  • NYIT logo as the “back to home” icon confirmed with 2 out of 3 users

I had the Academic Calendar available in three different areas and wanted to test which was most successful. I made a mistake with wording while interviewing but I could not change in order to keep consistency in my results. I asked the question, “Now that you’ve found out what required classes, you need to figure out the registration deadline. Can you show me how you’d navigate the site to find out?” All three immediately associated registration with Register for Classes in the top supplemental bar, realized it was not clickable and then saw the Academic Calendar.

I also found out new areas of exploration that pertained to other personas. i.e. prospective students in high school are new to the process and may not know terms (implement a feature of hidden help annotations).

Iteration 1

First Design Iteration
  • Changed existing Catalog in navigation to Course Catalog (did not implement in my first prototype even though it was part of my analysis from card sorting)
  • Took out the actual context in certain areas because it was distracting and not my point but users focused on it.
  • Added words to indicate task was finished. i.e. * for required courses
  • Broke up large information to help users with scanning

Usability Testing 2

Usability Testing in action
  • I did not use the term registration deadline in my usability testing script so the top supplemental navigation bar was not noticed.
  • Users did not scroll because what was halfway above the fold floated completely above fold. There was no more indication that there was more to scroll.
  • Home button in the NYIT logo was confirmed with 3 out of 3 users.
  • Content page layout needed to be reworked, restructured or re-named for clarity.
  • Home page was successful overall. Next iteration would focus on content page.

Future Opportunities

Personal

  • Iterating and prototyping mobile layout
  • More open or hybrid card sorts
  • More usability testing on existing site and competitors because I found it extremely helpful in identifying good and bad practices
  • Design second iteration based on first iteration feedback
  • Explore other personas and their user flows to help test out rest of the navigation

For NYIT

  • Additional consolidated pages
  • Additional navigation reorganization at third tiers
  • Content/detail page updates because some still had the old template with undergraduate spelled incorrectly
  • Hidden help annotations for prospective high school students that are unfamiliar with some terms
Like what you read? Give Wei-Li Cheng a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.