Website Prototype

Redesigning the DUB group page

My site prototype can be seen at http://wd3njw.axshare.com


Design

For this assignment, I was tasked with designing an interactive wireframe prototype of a redesign for the website of the HCI group DUB here on campus. The site, in its current state, is not paticularly good at conveying the information that the organization feels is important to have available to the public. The main requirements for the site were as follows:

  • Announcements: blog or other listing of news and announcements of interest to the community.
  • Directory: listing of faculty, students, affiliates, etc. who are members of the dub community.
  • Calendar: a calendar system for viewing and subscribing to a schedule of dub events (weekly talks, conferences, events, etc.).
  • Seminar: information about the weekly seminar series — schedule, presenters, abstracts, videos, etc.
  • Research: faculty research areas, projects, publications, collaborators, etc.
  • Membership: a members section for dub members (login required) to edit their own information on the site (profile, research, etc.).

After considering these requirements, I was able to come up with two main use cases that were at the core of my site redesign.

  1. ) A student or visitor to the University is interested in the work being done by the DUB group, and is interested in learning more about the current events and projects within the group. These visitors may or may not also be interested in reading up on or contacting a DUB member.
  2. ) A current member of the DUB group who wishes to update their member page to better reflect their current research, bio, contact information, and publications.

With these two use cases in mind, I began to lay out the Information Architecture of the site. The site map I eventually settled on is shown below.

For my first use case, I thought it was important for the user to be able to quickly access whatever kind of content they were searching for very easily, with only one click where necessary. That is why people, calendar, research, seminar, and blog all have their own pages, with each page being accessible from the home page. I also thought that it was important for users to be able to quickly and easily get to a DUB member’s profile any time that member came up, so I made the member profile page accessible from most other pages.

Process

After settling on a site map, I decided to sketch a sample front page, with design elements that I knew would be repeated on other pages (i.e. navigation bar).

Most of this initial sketch made it into my final design, with the exception of the “Trending in HCI” bar on the right side of the screen. My intention here was to pull posts from social media sites with an HCI or UX hashtag, however, when I actually implemented this in Axure it looked clunky and I decided to stick with my core requirements.

After sketching, I began recreating my home page in Axure. Without going into too much detail, I will say that I found Axure to be incredibly easy to pick up and rather powerful in the interactions I could show. Aside from the regular linking of pages, I was able to implement text field forms that accurately portray username/password fields for logging in users, a calendar that can switch between months dynamically, and forms to realistically simulate profile editing and saving. I think that if I were to spend more time learning Axure, it would be even easier to produce extremely high quality mockups and interactive prototypes. Below are the final page prototypes from the home page, member login screen, and profile edit pages.

Homepage
Dub Member Login


The page that allows DUB members to update their Information

Testing

After completing my Interactive Wireframe, I was able to test it with a user. Through this testing I learned several things that would definitely be incorporated into a future iteration of this design.

Positive Feedback (What the user liked):

The simple, minimal design, the user liked that there was no “useless” information
The short term focus on the front page and seminar page. The user liked the “this week in DUB calendar and the fact that the seminar page focused on this week’s presentation
The user liked how easy it was to edit and save information added to the member profile. They specifically liked how the edit page mirrors the profile display page, so it’s easy to find what information needs to be changed on each page.

What could have been done better/differently:

The research page could have been broken up differently, the user felt that just showing each research area and a list of projects wasn’t enough, they’d like to see individual project pages.
The people page was a little bit hard to navigate through, especially when the user was searching for a specific member. I saw a nice example of a carousel style member page broken up by category (Kyle’s site) that I think would be a better alternative.
Having the login button attached to the menu item for the people page confused the user. They thought that they were required to log in in order to view any portion of the site. I think that putting a dedicated login button in the corner or bottom of the screen would be less confusing for users in the first use case.