Process

The first thing I did to wrap my head around the project was to list out the required elements and sketch out a simple relationship diagram. This helped to start laying out the site’s information architecture and how people may navigate through the various components.

Next, I determined three different types of use cases: first time visitors who need to get acquainted with the website, set up a profile, explore current research, or look for members of the community; frequent visitors who regularly check the calendar of events and the news feed to look for seminars or projects they may be interested in; and infrequent visitors who may simply need to make a profile update, look up the contact info of a member or take a look at the latest projects that are being worked on. These use cases helped further shape the hierarchy of the site. Since frequent visitors likely want to get information quickly, the events calendar and news feed were placed at the top of the list. Member lists and current research are likely visited less often and were placed second in line. Finally, updating a member profile may be the least frequent interaction with the site and so was placed third in the hierarchy list.

Once I had a general site map and content list, I began sketching out some page layout concepts. While these ended up being quite different from the final digital wireframe layout in some cases, they helped tremendously in giving a starting point as I worked my way up into higher fidelity mockups in Axure.

Design

The final design is a result of a lot of trial and error within Axure. This was my first exposure to Axure (and digital wireframing in general) so there was a bit of a learning curve in getting the website layout and interactions to behave as I intended.

Using the sketches as an initial guideline, I began laying out the components of the various pages and testing the navigation through the website. I knew I wanted the site to have a more visual impact than the current design so I used images wherever appropriate to help guide the interaction. After several iterations, this is what the homepage looks like:

A large header image with large tiled elements below help create a more visual and clean experience than the original website. Consulting the hierarchy I had created earlier in the process, I placed a calendar of events and seminar summary at the center of the page to allow for a quick overview of what’s coming up so that frequent visitors don’t have to go deep into the site to find the information they regularly seek. Likewise, a news and blog feed was placed to the right to enable quick scanning of the latest happenings in the HCI+D community. To the left of the screen, ‘People of dub’ and ‘dub Projects’ image tiles allow for navigation to the project list and member directory.

The events page was reworked from the original to minimize clutter and make finding both upcoming events and videos of past events a simple process. On the left side, a daily event list is navigable with arrows. Hovering over the ‘detail’ button on the right reveals a flyout detail of the event without having to navigate away from the page. In the upper right is a ‘view past events’ button that drops down a list of past events by quarter with video links if available. To prevent occlusion, this list collapses when the user hovers over the details buttons for the upcoming events.

The original events page for comparison:

Both the People and Projects pages utilize a similar format. A list of faculty categories or projects categories on the left present a flyout list when clicked. In the case of the member directory, each member has a profile image next to them and clicking on a member brings you to their profile page. The projects page has tiled images to represent each project in the selected category. An overlayed title would indicate the name of the project.

The blog page is similar to the original design, but has been cleaned up a bit. Blog heights are made uniform which should help facilitate easy navigation. The commenter avatar tiles are retained but moved to the right of the blog summary. In the redesign, the blog feed would also serve as the news and announcement feed rather than having separate places to access current information and articles.

Clicking on the blog or news tile sends the user to the full article, which remains largely similar to the original design but has again been cleaned up:

Finally, a member may log in to their account with the ‘login’ button in the upper right corner of the homepage which takes them to the login screen:

After entering their information, they are taken to their profile page which they may edit as the owner. The page layout otherwise looks the same as if the user were to visit the profile of another member. A profile image is in the upper right followed by contact information and a member bio below, as well as projects they contributed to on the right in the form of image tiles. Underneath the bio is a list of publications the member has contributed to. The redesign once again includes a more visual experience compared to the text-heavy original and should facilitate easier access to the member’s projects and publications. The intention is that it also provides the opportunity to more easily get an overview of what the member is focused on visually rather than through reading through a large body of text.

In the end, here’s what the site structure looks like: