Section 3: Design


Unit 3, Section 3, Overview

Next Up…
Before moving on to the rest of the content head over to the Unit 3, Section 3, assessment page to answer a few quiz questions.

Video Transcript
Welcome to Unit 3, Section 3: Design. We’re progressing through the ADDIE process. And the design stage reflects the first of two D’s in the process. Design is where we’ll take the next step in using the results of our analysis to put down on the paper what we hope to develop in the next stage.

Let’s begin. So where are we in the process? So far we’ve performed four of the five recommended stages of analysis by the W3 standards.

Here are our side goals of preliminary information architecture organized around five main categories and navigation areas: Courses and Programs, About Us, People, Careers and Resources. We have vetted this information throughout our analysis to make sure we’re on the right track. Each of the five areas mapped directly to what we’ve identified as high priority information needs of an academic department website’s users.

Now let’s create what we call a wireframe document that now reflects what we hope to develop.

In this case, here is an image of the current site. Are the goals met on the homepage? Remember usability. Can people find information on this page in an effective, efficient, and satisfying fashion?

Let’s take a closer look starting with our organizational goals. First, assist and advise current students. Second, market the program. Third, assist faculty with relevant information. And, four, maintaining connection with alumni. It would appear that in fact the homepage does meet all of these needs. The issue, however, becomes whether all of this information should be presented on the homepage at the exact same time. It seems right now that the current site is a bit overwhelming, which can negatively impact all three [sic] factors: usability, effectives, efficiency, and satisfaction.

Now let’s look at general user goals: Courses and Programs, About Us, People, Careers and Resources. Again, it would seem that the homepage does this effectively. The issue though, again, is whether too much information is available, causing users difficulty in locating the information they’re looking for.

Now let’s look at the site analytics in terms of most popular pages. The top five categories: Courses and Programs, About Us, People, Career, and Resources. Again, they appear to map out well with our preliminary information architecture.

Okay. Now let’s take a shot at a redesign based on our vetted information architecture. We have five categories plus a home button. Now let’s look at the site analytics in terms of the most popular pages. The top five categories: Courses and Programs, About Us, People, Careers, and Resources. Note that we’ve also added quick links based on the most popular pages receiving the most hits as well. Remember prioritization of functionality is one of the most important usability standards, and we want the most used information pushed to the top in an organized fashion so people can find what they’re looking for quickly and easily.

As recommended, we also have a second design for users to consider during usability testing, which we’ll be doing soon. Now let’s do a quick cognitive walk-through. First, Current Students. Course information, course schedules, information about faculty and staff, department contact information, calendar, and events. Check. Now Prospective Students. They want course information, department contact information, information about faculty and staff, course schedules, and tuition. Check. Alumni. They want departmental contact information, calendar events, news, careers, and department social media contact information. Again, check.

We found some problems, however, when we paper tested our design with actual students. Students have trouble finding information because they found redundancies around the About Us and People and Careers and resources navigation areas. People weren’t sure where to go. This occurred across multiple users. In fact, all four tests that we conducted.

Paper testing just involves using our scenarios to see if students can point out on our web map where they would go. This is a picture of an actual test that occurred in my office. Here is our revised information architecture. Notice we collapsed our five main categories into just three. We integrated People to the About Us section, and we also merged Careers and Resources together.

Now here’s another mockup of our preliminary design with our new information architecture. We’re going to test this soon.

That’s it for the design phase. We have tested and refined our preliminary information architecture through cognitive walk-throughs, information architecture analysis, and then paper testing.

Remember to do the review sessions to review what we’ve covered, read any readings provided, participate in the discussions, and do the hands-on activity.

Thanks for joining me. And I hope to see you in the next section.