dub Site Redesign: Website Prototype

Design Challenge:

The design challenge for this week was to analyze, redesign, and develop a wireframe prototype for a new dub website that includes the following information or content:

  • 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 member’s section for dub members (login required) to edit their own information on the site (profile, research, etc.).

For those not yet part of the dub community, the site acts as a place to learn more about the people that make up dub, the research projects and publications that come out of this community, and also the weekly seminars.

Those that are already part of dub might be more interested in getting an overview of dub events via a calendar, checking out what the upcoming weekly seminar is going to be about, or adding new projects and publications to their profile for others to access.


I began by studying the existing dub site and some of the research that had already been conducted to understand what was working well and what needed improvement. From this I realized that the dub site has two main audiences (described above), those interested in dub and those that are already part of the dub community, but want to stay updated on dub news and events. It was also clear that the organization of content on the site could be drastically improved.

After defining the main audiences and use cases for the site, I conducted a content audit on the existing site and created a new inventory of the content I wanted to include on the new site.

Screen Shot 2014-02-15 at 3.09.31 PM.png
Screen Shot 2014-02-15 at 3.09.51 PM.png

Once I had an idea of the types of content to include in the new site, I created a mood board using Pinterest to collect inspiration for the design. Then, using good old paper and pen, I sketched out the basic layouts of my main pages. This really helped me to organize my thoughts before jumping into using Axure to create wireframes and an interactive prototype.

Screen Shot 2014-02-15 at 3.32.28 PM.png

The information architecture of the site was important to get right because of the amount of content. In particular, I felt it was important for people to be able to quickly scan and navigate to the information they were most interested in. On the existing site, this was difficult because there wasn’t a way to easily filter or search for people, publications, or projects. Different pages had different options for sorting through the content, and related content wasn’t linked to one another. To address this inconsistency, I decided to include a secondary navigation, seen in the images below, in the left column of each page.

Screen Shot 2014-02-15 at 3.45.15 PM.png
Screen Shot 2014-02-15 at 3.44.52 PM.png
Screen Shot 2014-02-15 at 3.46.00 PM.png

Additionally, I wanted to make it easy for users to move back and forth between different types of related content, which would make the discovery of new content on the site easier. For example, in the Research section, when you click into a particular topic such as Health, you can find all publications and projects related to health. And when on a particular project page such as the Baby Steps project page, you can navigate to any of the collaborators or the related publications directly from the project page without having to leave the page. This is not possible on the existing site.

I defined specific goals to address by the designs I created for each page.

For the People section, I wanted to make it easy for users to search and/or filter people by their status – Faculty, Students or Affiliates. I also wanted to include faces or each member of dub, so that users can scan faces if they can’t remember someone’s name. For each individual’s profile, I wanted to provide a way for users to contact and learn more about the person and their research.

The goal for the Research page was to easy navigate by areas of interest and include both projects and publications together, rather they separating them into different sections.

For Seminars, I wanted to highlight the current weeks seminar, but also provide an easy way to navigate the archive of videos by year and quarter.

The key component I wanted to include for the Calendar page, was a way to toggle between the big picture and the details. For this I created two views – a monthly calendar overview and a list view. It was also important to include a way to add the dub calendar to a users personal calendar client, so I added an option to add the dub calendar to a calendar feed.

Rather than having separate pages for news, announcements, and blog posts written by the dub community, I combined all news, announcements, blog posts into one Blog page.

Finally, I wanted to provide an easy way for those new to dub to create new accounts and for existing member to easily manage and update their profiles. This functionality was not available on the previous dub site.

The wireframe prototype can be accessed online at http://zlgatc.axshare.com/


What worked well:

Since my prototype was presented to the user in wireframe form, it was easy for him to focus on the content rather than the visual design. This worked well because I was more concerned in my testing to find out how well the information architecture and layout were working than on the visual design. The user found it easy to navigate and find specific information by filtering using the secondary navigation. He successfully completed all the tasks I asked. However, I did feel that he was not as interested in exploring the site beyond the tasks I gave him, because there were no visual elements of the design drawing him in to explore further.

What needed improvement:

Without images or certain aspects of the visual design flushed out, it was difficult to show dynamic content and interactions. At times, the user found it difficult to know what content was clickable and fully functional from what was simply a placeholder. The arrow cursor changing to the pointing finger for clickable items was not enough feedback for the user, so I found myself having to verbally explain that the site was not fully functional.

Conclusion & Post Critique Reflections:

At different levels of fidelity I could have probably learned different things from my prototype. With the goal of focusing on information architecture, navigation and layout, the wireframe prototype I put together was successful. However, I might want to include some higher fidelity elements to signal to the user during testing which parts of the site are fully functional rather than placeholders. I may not have needed to provide so much detail in the types of content I did choose to include. In the future, I will probably spend less time on looking for just the right content to include and use more representative blocks of sample text for similar levels of testing.