UXDI Week 2 + 3: Redesigning UD Department of Biological Sciences Website

For Project 2 of UXDI, I redesigned the website of the University of Delaware Department of Biological Sciences. When I first heard what the assignment was I couldn’t help but to be — *snooze* — totally bored by the idea of redesigning a university website. After all, university websites are SO boring. And then I realized, that’s precisely the problem! Or at least one of the many problems of university websites.

When you think of an exciting educational website and experience, you think Skillshare, General Assembly, Devbootcamp, etc. Those are the companies who are making learning fun, exciting and most importantly, effectual. Meanwhile, the vast majority of university websites make the institutions feel like faceless resume builders that may or may not lead to an actual job. While this worked for universities for decades, higher education is changing fast right now and educational for-profit companies are shaking up the existing model of education, especially higher education.

Universities need to demonstrate that the tens of thousands of dollars that students will spend on their education will be worth the investment and will yield real-world results in terms of better jobs and higher pay. And they need to make it easy and quick for prospective students to get the information they need to make decisions about their future. This second project was far from boring — universities, whether they realize it or not, are facing an immense challenge for the future and my job was to help prepare them to meet that challenge.

With these thoughts in mind, I embarked on redesigning the website of the University of Delaware’s Department of Biological Sciences.

Design Process

Before I get into the nitty-gritty of my project, I want to present my design process. I’m still refining this process and I imagine by the end of UXDI my design process may look very different from my current process.

Design Process — Version 1

First, I start with identifying the problem, then I move on to research and competitive analysis, then to analyzing and synthesizing the research in order to distill clear design objectives. From there I ideate/sketch/design, then prototype and test, and finally synthesize feedback to identify the problem(s) and begin again.

Persona

The first step to identifying a problem is understanding who your user is. After all, a problem may exist for one person and not exist for another — problems are relative to the user. This is where personas come in. Personas are an effective tool for understanding and designing for your target user.

For this project, we didn’t actually research and create a persona (that comes next week I believe). We were provided with a choice of two personas. I chose John.

John is 28 years old, has two kids, works in the lab of a pharmaceutical company and wants to get his Masters of Biotechnology in order to advance his career. Based on his needs, I determined that he would be looking to answer three simple questions about a Masters of Biotechnology at UD.

  1. What are the admission requirements?
  2. What is the tuition?
  3. What are the current class times for the required coursework?

Competitive Analysis and User Flows

I started my research with competitive analysis. First, I researched programs that would be direct competitors to UD by searching for biological sciences programs that were geographically close to UD, were similar in size and had a comparable ranking in U.S. News & World Report for Biological Sciences. I was specifically trying to look for programs that John would be considering alongside the offerings of UD. I settled on Penn State’s Huck Institutes of the Life Sciences and University of Maryland University College.

From just a brief look at Penn State’s and the University of Maryland’s websites, it was clear to me that they would likely have similar problems as my client’s website. I knew that a competitive analysis would be more useful and insightful if I could find a program that was at least seemingly well designed. So I set about reviewing all of the top biological sciences programs in the U.S. News & World Report. Surprisingly, many of the top programs had websites that from cursory review were designed similarly to that of my client. Finally, I landed on website that appeared to be designed with the target user in mind — the Columbia University Biological Sciences website.

Having settled on 3 programs to compare to UD’s program, I conducted a competitive user flow analysis. In other words, I navigated each website to see how many steps it took to answer each of John’s seemingly straightforward questions.

The result was incredibly surprising.

Here’s the tally for Task 1 — Admission requirements:

UD 5 steps, Penn State 4 steps, UM 7 steps, Columbia 3 steps.

Competitive User Flow for Task 1 — What are the admission requirements?

The tally for Task 2 — Tuition:

UD 8 steps, Penn State 10 steps, UM 4 steps, Columbia 3 steps.

Competitive User Flow for Task 2 — What is the tuition?

And the tally for Task 3 — Current Class Times:

UD 7 steps, Penn State 9 steps, UM 9 steps, Columbia 4 steps.

Competitive User Flow for Task 3 — What are the current class times?

The implications of the competitive user flow analysis were clear. My initial hunch that UD, Penn State and University of Maryland’s websites were similarly designed was correct. All three websites required the user to take numerous steps to get the answer to seemingly simple questions. Often these websites required the user to leave the department or college’s website and navigate through the broader university website to get answers. Columbia on the other hand provided a streamlined flow.

Based on the user flow analysis, I determined my key task would be to design a flow that was quicker and easier to navigate.

Content Inventory/Site Map

The competitive user flow helped me diagnose a problem with the site — difficult navigation — but it didn’t provide a clear answer for why the user was having this problem. Why was UD’s website difficult to navigate? What about the content and mapping of the pages was causing this problem? In order to get to the why, I needed to better understand the what. So I began an admittedly tedious review of the content and structure of UD’s current website.

First, I began with a thorough content inventory of the pages that my tasks hit. The link to my full content inventory is here — https://docs.google.com/spreadsheets/d/1seejMJuu_4gP4drPEOyDXpNZ6CUCF0gNZbMRhD1StnM/edit?usp=sharing.

Content Inventory for the University of Delaware Department of Biological Sciences

Quick sidebar — when I was a summer associate at my law firm, I worked on the restructuring of the debt of Argentina. In 2001, Argentina had defaulted on $82 billion of sovereign bonds in the worst economic crisis in the country’s history and in 2005, my law firm was working on restructuring this debt. One of my tasks as a summer associate was to carefully review hundreds of bond documents and create a massive spreadsheet laying out the provisions of the bonds side-by-side so that the higher ups at my firm could come up with a strategy for restructuring the debt. This was an incredibly tedious and painstaking assignment but it also was an incredibly important one that had to be done correctly and carefully. We couldn’t possibly arrive at an effective strategy if we didn’t clearly understand the existing situation.

The point of that digression is to say: Performing a content inventory and sitemap of an existing website or product is crucial to arriving at an effective solution.

Existing Sitemap of the University of Delaware Department of Biological Sciences

So what did the content analysis and sitemap show me? I discovered the following about the site’s structure and content:

  1. Top navigation was concise but sub-navigation was complex and expansive
  2. Information was duplicated in whole and in part on numerous pages
  3. Information that was seemingly related was spread out amongst numerous pages

I knew that a redesign of the site would require a complete overhaul of the sub-navigation and would also require streamlining and consolidation of content.

Content Blocking

The next piece of research I performed was content blocking. Using color to differentiate the types of content, I blocked out the layout of each page of UD’s website that my user visited when trying to complete a task. I then blocked out the layout of the comparable pages on the website of the 3 competitors I had selected. By viewing these layouts side-by-side, I was able to see similarities and differences in the way the various sites were structured.

Content Blocking for Task 1 — What are the admissions requirements?
Content Blocking for Task 2 — What is the tuition?
Content Blocking for Task 3 — What are the current class times?

Specifically, I noticed the following:

  1. All of the programs dedicated a large section of the homepage to News & Events. Although I didn’t perform a content block analysis on companies like General Assembly and Dev Bootcamp, a quick look at any of those sites will tell you that their homepages are almost entirely dedicated to marketing messages geared at their target users.
  2. The websites with more confusing navigation (UD, Penn State and U of Maryland) tended to use large groupings of quick links as sub-navigation or had an expensive menu for sub-navigation.

Card Sorts

The user flow analysis, site mapping, content inventory and content blocking had it made it clear that I needed to completely overhaul the navigation of my website and reorganize the content. I had some hypotheses on how best to do this but I wanted to verify that my intuitions were correct. So I engaged in a card sorting exercise whereby I performed both a closed card sort and then an open card sort. First, I distilled all of the elements of the existing navigation relevant to my tasks on notecards. I then asked the 4 users to categorize the cards as information they would expect to find under “Masters of Biotechnology” and “Other”. Once they had sorted the notecards into these two categories, I had them perform an open card sort of the cards they had placed under “Masters of Biotechnology” and label each grouping.

Card Sorts

As expected, much of the existing navigation could be logically grouped together into broader categories such as “admission requirements”, “required coursework” and “costs”.

Redesign/Prototype

After using the card sorts to devise a revised navigation, I began the process of redesigning the layout of the website. Given my mission of making the content and layout of UD’s site more relevant to needs of its users, I mimicked sites like General Assembly and Bloc and redesigned the homepage to feature marketing messages with quick links to information about particular programs. And given that the most important business goal of the university would likely be to have prospective students “Apply”, I included this call to action prominently in the main navigation.

Redesign of Homepage — Version 1

I also redesigned the sub-navigation of the internal pages to be significantly simpler and condensed.

Redesign of MA Biotechnology page — Version 1

I put my designs into a prototype using InVision — and began my first round of user testing.

User Testing and Iterations

For my first round of testing, I tested my prototype with 6 users. My first round of user testing demonstrated that my users were easily and quickly able to accomplish the first 2 tasks of finding the admissions requirements and cost of tuition. My design was working for these two tasks.

However, my users were stumbling on the third task of finding the current class times. I needed to redesign.

Redesigning the coursework flow took several iterations. After each iteration, I tested my revised design with users. Only after the fourth iteration were users clear on how the content was being organized and presented.

My final prototype can be found here.

Redesign of Homepage — Final Prototype

Responsive Mobile Design

The final step of our project was to design the pages for a responsive mobile site. The most challenging part of this exercise was to design the way the mobile site should manage the sub-navigation. Given the small amount of screen real estate on mobile, multiple layers of static navigation can be challenging to accommodate. I opted to essentially eliminate a static sub-navigation from the mobile version.

Proposed Responsive Mobile Wireframes

Next Steps

We spent two weeks on this project but we could easily have spent a month or more redesigning this site. Next steps would include the following:

  1. Creating a mobile prototype and testing
  2. Researching, designing and testing additional tasks for John
  3. Creating additional personas, their related tasks and designing for those personas/tasks

Thoughts & Observations

Designing for users is not easy. It’s much easier to just throw up a website and a bunch of content and call it a day. But this approach is destined to fail and frustrate.

Through this information architecture project we took a very detail-oriented, systematic approach to organizing content and creating design. Each step, though tedious and time-consuming at times, provided crucial information in creating a design that was user-friendly.

The main area for personal improvement I discovered was on sketching. In the future projects, I plan to always sketch ideas with paper and pencil first and test or at least discuss those low fidelity ideas with colleagues and/or users before creating a medium fidelity mock-up and prototype. With the coursework task for my project, I had to go back to the drawing board several times — I probably would have come to the solution much quicker if I had simply sketched out ideas with paper and pencil and moved to an actual mock-up once I had some indication of which solution might work best.

Always learning.

Stay tuned for Project 3.