Episode 2, wherein Lowell discovers user experience design is about users

For our second major project in General Assembly’s UX Design Immersive, my classmates and I were tasked with redesigning a college website.

Well, not really. But we were asked to learn a design application (Sketch), a prototyping tool (InVision), a diagramming app (the oddly-named Omnigraffle) and some common methods for evaluating web content and navigation—and to imagine how those skills would apply to a struggling digital enterprise in the real world.

I was amused to be assigned the website for the College of Education at James Madison University, a school I know from visiting friends and working a summer internship in Harrisonburg, Virginia.

DIVING IN

Site map

Many effective websites are structured like the site map below, with a few main topics branching off the home page, and multiple secondary pages nested under each.

Many effective websites are structured like this simplified site map

When I charted the first couple levels of JMU’s College of Education site, the map looked like this:

A map of JMU’s College of Education website shows more than 30 pages beginning on the home page (center column).

The entire center column represents pages connected to the home page. Many pages are accessed by links in dropdown menus, represented here by light gray fields with a dashed border. The pages in red were inaccessible due to broken links. Pages in black were on external websites.

Comparative Analysis of Content

A comparative analysis was no more encouraging. I looked at how content was placed on JMU College of Education pages against similar pages at three schools of education at mid-sized universities in the region. For the most part, I coded essential content dark gray and superfluous content light gray, but I assigned colors to navigational menus, social media items and search fields.

JMU’s College of Education pages (in the left column below) ended up having few dark gray blocks representing strong content, few yellow blocks representing navigational options, and no page at all for Academics.

A comparative analysis of four pages on JMU’s College of Education site (left column) against similar pages at other schools of education in Virginia and North Carolina

Content inventory

I also began a more complete content inventory, focusing on the home page and trying to briefly describe each item of the page and evaluate its function and importance (using stoplight colors to easily identify problem areas).

Beginnings of a content inventory

PULLING BACK

It was at this point that I seemed to remember the “user” part of user experience design. To a certain extent, it doesn’t matter what I think as a designer—or what the competition does—if the people who actually use the product disagree. So I went looking for some users.

A persona

For the purposes of this assignment, we assumed that the school was interested in increasing admissions, had taken inventory of its prospective students, and had distilled that information into two “personas”—characters with likes, dislikes and needs that put a human face on the research data. My primary persona was a character dubbed John, a working parent interested in taking graduate-level courses to advance his elementary school teaching career, but concerned about scheduling and costs.

Some tasks

I approached a small handful of current and former General Assembly students and asked them to complete a series of tasks related to the needs of this persona.

  1. Find days and times of upper-level elementary education classes
  2. Find course costs, including non-tuition costs
  3. Find course descriptions and learning outcomes for upper-level elementary education classes

User Testing

This screen recording was typical of my tests. Nearly the first thing this user did was click away from the College of Education site and get lost on the Community page of JMU’s main site.

People who matched the persona of a typical site visitor were asked to complete a series of tasks.

In fact, it turned out that information about JMU’s College of Education was spread over three sites. If you wanted to get more information about master’s degree courses in Special Education, for example, you might find the information on the JMU university site, the College of Education site, or the JMU graduate catalog site.

Information about JMU’s College of Education is spread over three websites

As you can imagine, the information doesn’t always agree. Are all five of these degrees the same?

  • Inclusive Early Childhood 5-Year MAT
  • Inclusive Early Childhood Education 5 Year M.A.T.
  • Fifth Year Inclusive Early Childhood Education Program
  • Inclusive Early Childhood Education Masters of Arts in Teaching
  • Master of Teaching in Early Childhood Education

Task Flows

I went back to comparative analysis. Using the lovable yet devious Omnigraffle, I diagrammed the shortest paths my persona could take to complete each task on my assigned college website and the sites of each of our chosen competitors. (Here again, black symbols represent pages on external sites.)

Flow charts for completing three tasks on the websites of four Southern colleges of education.

BRINGING IT TOGETHER

Based on user testing and comparisons with other college sites, I envisioned four basic changes for JMU’s College of Education.

  • Simplified navigation
  • Less content
  • Higher-quality (more relevant) content
  • More visual elements

Clearly it could take a team of people years to do the job well. Since this was a two-week class assignment, I assumed I had been asked to do a few preliminary studies and make recommendations to a small group of college staff who could decide to carry the project forward.

Wireframes

“Wireframe” is designer-speak for “rough layout.” Some wireframes are sketched by hand. For this assignment, my classmates and I translated our hand drawings to a design program called Sketch. Besides making straight lines and legible letters, Sketch has templates for different screen configurations and elements, and makes it easy to duplicate elements across different pages. To keep things simple, we didn’t use color and drew Xs where images would be.

First layout ideas for a new home page at JMU’s College of Education
  • I shortened the college home page considerably.
  • Instead of showing (outdated) news and events, I imagined a few pictures that doubled as critical links.
  • Although the college was concerned about prospective students, I wanted to accommodate current students, faculty and other people who use the site, so I designed navigational links for each group.
  • And I standardized the main menu to include conventional headings like Admissions. I decided that faculty profiles would be consolidated in one searchable list under a single heading.

Testing a prototype

Using an online app called InVision, I made the wireframe minimally interactive and tested it with the same students who had explored JMU’s existing site. I asked them to complete just one of the tasks from John’s persona: finding course descriptions and learning outcomes for upper-level elementary education classes.

It failed miserably. Everyone either returned to the JMU menu at top, dutifully followed the “Future Students” link at right (which I hadn’t made functional) or fell into one of the large images at page bottom. No one used “Academics” or “Admissions” on what I was thinking was the main menu.

BACK TO THE DRAWING BOARD

Second iteration

It was clear that the navigation needed to be even simpler. And that some people will look for navigation on the body of the page rather than in the header.

I imagined an ambitious new site structure where all content would be tagged for a specific audience and users would log in by clicking what kind of information they wanted to see. Primary pages would be as simple as possible, with links in content areas echoing options in the main menu.

In addition to having adaptive content, the new site would need to have responsive design, so I created wireframes for a few mobile screens.

Three screens from my second set of wireframes, adapted for mobile. (Non-degree language stolen from the University of Virginia’s excellent Curry School of Education site.)

Although I couldn’t use my original students to test my second prototype, spot tests with a few housemates seemed more positive, and I was running out of time.

Presentation

In the end, I pretended my classmates were faculty and staff at JMU’s College of Education. I used my class presentation as an attempt to convince them that their website needed to be redesigned, and that they should play a critical role in the process.

It will be a lengthy process, but we would like to identify everyone who has a stake in the creation of the CoE site and work with you to determine what content is critical, optional, redundant or outdated. We would like to work with you to establish standards for generating good content, identifying the best people to do so, and equipping you with the tools you need to upgrade your portion of the site and maintain a high level of quality for years to come.
Now I know that some of you are thinking, “How are we going to have time to do that on top of our regular work load?” I don’t want to minimize the significance of this task. It is a lot, and it is important. But we are committed to working with you and the administration to figure out how it can be handled sustainably, because I can assure you the alternatives will be worse — having nobody do it, or watching somebody like me who doesn’t know the information try to do it.

If the process was successful, I suggested, it could be the template for university-wide changes.

My oh-so-clever faux Philadelphia design firm.

Learnings

Unfortunately, here is where my user experience focus really slipped. I rehearsed the presentation for nearly an hour in a quiet room at General Assembly. Every time I went through it, it ran long. But did I use that research to improve my design? No, no—I forged ahead, apparently expecting time to stand still, or to find a Bonus Time button blinking on the lectern.

True to form, the talk ran long. I spent too much time emphasizing how bad the existing site was, and ran out of time to explain what I proposed would fix it. (I said “beat a dead horse” twice as I was beating the dead horse.) If I had been in front of a real client it’s unlikely I would have gotten a contract—I risked offending the people who built and maintained the existing site, and I gave them little vision of how they should move forward.

Of course, failure is exactly what school is good for. On the next project I’ll be more ruthless with my slide deck, focus on simplified menus in my wireframe, build out more pages of my prototype and not wait so long to do user testing.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.