UX Case Study 2: Syracuse University College of Engineering and Computer Science

Graduate Site Redesign

The Syracuse College of Engineering and Computer Science is facing IA challenges and content strategy issues due to falling within the larger Syracuse University umbrella. They need to address the needs of a varied audience, and need to feel connected in some way to the larger University website.

Original site: http://eng-cs.syr.edu/

GOAL: Create a new Graduate Specific Flow that delivers clear and relevant information in less steps.


Planning:

Persona:

In order to complete this task I reviewed the current website and decided on a persona. Lets meet John! He is a 28yr old father. He is an a current engineer looking at further his education. As a father he is concerned with the cost of tuition especially the extra costs that always arise. Therefore he is also interested in tuition assistance such as fellowships. Additionally, as a grad student he is very interested in his teachers and soon to be peers.

“I want to improve my skill set to further my career.”

Personal Experience:

Before I began to test other users I wanted to see what my own personal experience with the website was so i pretended to be a prospective grad student and I began clicking around:

  • too many hover menus
  • I can’t find information that I need.
  • when I get to the page that should contain the information, its a lot of text and then I’m punted to another website to start my search all over again.
  • Multiple layers of hover menus create a frustrating experience when trying to move form one to the other. If I don’t follow the path exactly the hoer closes and I need to start all over again.

I decided to look into these experiences, and see what other issues were arising, redesign and test my theories.


Research and Analysis

As part of the research process I did some comparisons to see where Syracuse stood in relation to its competitors; MIT, Pace, Stanford (as they are known for having a good website.

Comparison 1 — User flows:

I went to each of these sites, went through the flow and documented each step. I sketched this out first and then redid it in Omnigraffle. I reviewed the Tuition user flow first. This exposed a few things.

  1. Syracuse had 9 steps to get to the financial aid information and you were bounced to another site.
  2. The competitors, especially Stanford had less steps.
  3. Goal is to reduce the number of steps and keep you on the same site.

Comparison 2 — Faculty User Flow:

The faculty user flow presented some different challenges. It wasn’t completely about the number of steps but rather the hoe the information was presented.

  1. You were dropped off at a generic page that didn’t differentiate undergrad vs grad.
  2. The filtering that was done separate the types of faculty only, but to undo the filter you had to go back home to change the faculty type.
  3. The layout of the page was overbearing with text.
  4. Goal: create a graduate specific page that allows you to filter between types of faculty and leads you to a faculty detail page that is easier to consume.

See appendix link at end of document for full files.

Site Map:

When creating the site map I used omnigraffle. I had to do a few iterations to figure out how to show al the hyperlinks but this is what I settled in on in the end and here were some of my preliminary observations:

  1. Maneuvering the site is a circular motion. As you can see in the image below with the dotted line boxes there are quick inks. Which can be a valid design choice, however, in this case they are actually confusing. Because the quick links incorporate so much of the same flow that you end up going back and forth before you realize its the same thing.
  2. When trying to get through the pages you very often get to a point where there is a lot of text to read with some hyperlinks that then send you to the Syracuse site to start searching all over.

See appendix link at end of document for full files.

Card Sorting:

next I began to move toward user feedback. I used the card sorting to look at the navigation of the current site. I looked for participants who were close to my persona of John. Therefore, I had an older demographic with more knowledge of their industry and an understanding of what they wanted to see first when reviewing a college for higher education. I wrote out the first 2 levels of the navigation onto index cards because I felt there there was too much information and redundancy and wanted to test my theory on what users would toss and how they would organize the cards. I had them do the following:

Please organize these into groups using only the cards available to you but you don’t need to use all of them. Use some of the cards as your category types and include a group of “I Don’t Care”
Please place these groups in order of what is important to you? please be ready to tell me why or why not (no judgement!). There is no wrong answer.
I’m creating a webpage for a university. Can you please organize these based knowing that you are a prospective grad student but into groups for a webpage

Findings:

  • Users that are focused on graduate degree are less focused on college life.
  • They want clear information about the academic program first and nothing undergrad.
  • Academic Programs, Prospective Students, and Current students were the most popular first 3 categories chosen.

Takeaways:

  • Difficulty finding the information.
  • Need less steps and more direct steps
  • Create a separate path for grad and undergrad.
“It’s like salad.. you’re looking for all the bacon amongst the lettuce”

Access to the full sorting results here and in the appendix: https://docs.google.com/spreadsheets/d/1yIcQOD9jXVFCY2U6StDEkcoAirQEsZx9vYt9o6llUss/edit?usp=sharing

Content Inventory:

To get a full understanding of what was on the different levels of my site I did a content inventory. I logged everything that I saw and noted if it was an active clickable thing ot just design. The purpose was to really do a deep dive into the site. See what was there and what may be redundant. Additionally, later I began to note what items I wanted to keep and what I didn’t as I built out my prototype (this was a result of the user testing and design choice). As this is a massive spreadsheet I will just leave the link here:

https://docs.google.com/spreadsheets/d/1Rya2l54NkYAv5l7jN1E9voyfeK6MVyk5x96Rseexz9s/edit?usp=sharing

See appendix link at end of document for full files.

Findings:

  • the quick links were so robust that they really are quick links. They are repeat paths.

Heuristics — Content Comparison of Competitors:

To begin thinking about the design factor I did a heuristic comparison of content blocking of the competitor sites. This allowed me to begin to switch from the analytics of the results to what visually may be an issue as well. For consistency I used the same competitors and the user flows and created this in Sketch.

Findings:

  • Homepage: Syracuse was too left heavy. The other sites had you moving down the page.
  • Faculty page: different options for the tiling.Syracuse and MIT had too much. Stanford had a nice balance to get quick info from the main page and then more on the detail page. Syracuse you had to click on every professor to get even basic details.
  • Financial Aid: Too much information on a page. Blocking info out is more soothing.
  • All other sites had a top navigation.

Takeaways:

  1. Less tiles on the page so that you are not overwhelmed.
  2. Provide basic content info (phone, email, title on in the tiling so that you can get quick information and more in-depth information on the detail page.
  3. Move navigation to the top
  4. Reduce the content on one page to make it more consumable.

UX Process

Design Iteration 1:

To start my design process I began to do some sketching and do some test content blocking on the home page. I did this because I wanted to figure out where blocks of pieces would go in the new design, test different concepts, and create direction and movement in the new site.

From the sketches I had done, I began to lean towards the first one. It felt the cleanest and moved the viewers eyes down the page as versus left to right. From this I moved into the Sketch Platform and began to map out the next pages. After blocking everything out I imported it into Invision for the first round of user testing: https://invis.io/C65X77G8K

Iteration 1 Low Fidelity

With my first iteration I had some general feedback:

  • It was too Low-fi: Add more connections and screens to clarify
  • Build out the flow more, i’m getting confused.
  • faculty profiles can be more tiled to fit more, why not more that one per line?
  • Beginning to look good.
  • Add content and see how you are going to block that out.

It seemed that I was on the right track but had a lot of work to do before I could do another round of testing.

Design: Iteration 2

From this point I began to move to iteration 2 and a mid level fidelity with greyed out images so that users really had a sense of where they were and what they were looking at. I took all the feedback from round one, added more connection links in Invision, and made the prototype more robust. I created the following flows for John:

  • Graduate Faculty
  • Tuition & Financial Aid — Fellowships
  • Tuition & Financial Aid — Cost of Attendance
Iteration 2 — Mid-Fidelity — Home Page
Iteration 2 — Mid-Fidelity — Category Page
Iteration 2 — Mid-Fidelity — Detail Page w/ Filtering
Iteration 2 — Mid-Fidelity — Detail Information Page

Desktop Prototype: https://invis.io/E25V0E3JZ

Then I had users test again and provide feedback. In addition to listening to their comments and taking notes I used a screen recording to record their actions with the mouse and asked about certain decisions or actions they took… or didn’t take.

Here is the script I used for the testing:

Hello Participant,
Thank you for taking the time to test my prototype. I’m going to ask you do run a series of tasks and ask you for your feedback. I will give you some background information to guide you through. Please note that there are no wrong answers and ANY and ALL feedback will assist me in making this a stronger site.
Who you are:
You are a prospective grad student with an interest in furthering your education in computer science.
Task 1:
Like all students you are interested in tuition and financial aid. However you are father and you are especially interested in Fellowships that may be a good fit. You have heard about the GEM Fellowship and wanted to get a bit more info.
Additionally he needs to see the cost breakdown of tuition, specifically around normal costs and extra costs.
Task 2:
As a graduate student your teachers and network are very important to you. You don’t want to study under just anyone! Please navigate to the graduate faculty pages and look up faculty in your interest/specialty of Computer Science. You were particularly interested in someone named Andrew Lee who you have heard about.
Please tell me about your likes, dislikes, and utter confusions. I’m all ears!

Findings:

  • Very easy to maneuver through. I know where to go!
  • Language around fellowship is confusing. It implies there are more but where are they?
  • I like the layout
  • How do I search by class?

See appendix link at end of document for full files.

Takeaways:

  • I’m getting closer to a final product!
  • I need to review the content on the pages as this had been copied from the site.
  • Search functionality on faculty pages may need to be more robust.

Responsive Design:

As part of the next steps in this project I wanted to work on the responsive designs. I primarily focused on the main pages. and then built out a bit more for a basic prototype. The prototype is in swipe stage but will give you an idea where where I left off in the planning and design. Below are some samples of the home page, the graduate category page and one of the detail pages. You can see the rest in the prototype.

Mobile prototype with no button links: https://invis.io/VD5W8AEPB

For the Homepage I moved the top navigation into the hamburger menu and shifted the image links at the bottom to stack on top of one another.

On this page I titled the left navigation and stacked it on top of the text. and added breadcrumbs

On the tuition detail page I stacked the tuition option as a list because they were longer and then moved all the content below it. the Direct and indirect expenses will expand to show the text when you click the radio button.

Next Steps

  • Do another round of user research just on faculty searching. Research hoe to build that out for a better experience.
  • Review the next flows to ensure the experience is consistent across the site
  • Review content to continue on pages with the client to condense and simplify.
  • Continue to design and test the mobile platform

Thoughts:

I would like to continue to research filtering and refining users flows. I would also like to test my theories and designs with more users. I definitely feel that the process of condensing the navigation was successful but could be even more refined and simplified. While this project seemed very overwhelming in the beginning because of the assumed chaos I really enjoyed taking this apart and putting it back together.

Appendix

For access to the larger files and wireframes please see the appendix:

https://drive.google.com/folderview?id=0B4Xd-pvlx5SlNm94VHZZaWpGTEU&usp=sharing