Website Prototype

HCID 521 | Prototyping Studio| Week 5| Assignment

Donglu Song

DUB is HCI community at UW, our program(MHCI+D) is jointly offered by the four primary dub departments. Our task this week was to redesign the dub (design, use, build) community website and generate a prototype that showcased the interaction design. The goal of assignment was not to focus on visual design, but to focus on interaction design and the information architecture (IA).


As always, I began with research and analysis. The current dub website is out of date, the latest news was published in 2012. I analyzed the information in website and interviewed 2 students in DUB community about their opinions and what functions they expect of DUB webiste. What they care most is the information of DUB seminar every week. Although they can register email update from DUB community, they still want to acquire more information of DUB seminar, such as they talkers’ background and their topic. What’s more, if they miss one seminar, they also hope to find the video from DUB website. I am also a user of DUB website, from my point of view, I also care about the project the professors are conducting and the updated announcements in DUB community.

I built 3 personas for this website, the first one is student in DUB community, the second one is faculty in DUB community, the third one is student who want to be involved in DUB community. When I had these personas in hand, it is easier for me to make it clear what information should be provided in DUB website.

Content Inventory

According to the needs of persona, I have the main content:

  1. Student in DUB community
  • Event video
  • Upcoming meeting information (speaker, topic, calendar, location)
  • Announcements
  • Projects

2. Faculty in DUB community

  • Upcoming meeting information (speaker, topic, calendar, location)
  • News
  • Announcements
  • Blog

3. Students want to ge involved

  • Admission
  • Projects
  • Publications
  • People

Information Architecture

After knowing the key content of DUB website, I looked for the information in the current website in order to find the problems. Here are the problems I found:

  • Navigation is confusing
  • Cannot find the link to seminar videos
  • Information on homepage is overwhelming
  • Most important information- seminar calendar is not apparent on homepage
  • Project page only shows the titles of projects, not visualized
  • People page so many names and not organized

In order to solve the problem of confusing navigation, I used the method of card sorting, organize the content into different groups that make sense for me, then developed a new information hierarchy, removing redundant pages when needed to improve the flow users could take. The goals of the information architecture are better content sorting, reduce the number of pages for easier navigation and gather the most important information on the landing page.

Then I sketched two website layouts of landing page and let users say which one is easier for them. Both of them chose the right one because the right one provide more information and the layout is clear.


I made the interactive wireframe with Axure, the link is here:

The final prototype is a bit different from the sketch because I got feedback from user evaluation and made some changes. The re-design of the site focused mainly on hierarchical and navigation changes. Using a cleaner, simplified and basic navigation helps the user find what they are indeed looking for. The main homepage acts as the news, blog and video page as this is the page that will be updated with current events and times/locations of the dub seminar. Navigation bar includes seminar, research, people, what’s happening and get involved. I combined project and publication from the current website in “research” category, and news, blog, announcement in “what’s happening” category to make the content more organized and clear. The side bar provides the upcoming event calendar, which is important and obvious here. This side bar also keeps in the same position on the page of “what’s happening”.

In the “Seminar” page, the side bar on the right shows the categories, which are upcoming seminars and the past seminars in different quarters. The information of upcoming events are shown in blocks including speaker profile, background and topic abstract. For past seminars, video and introduction are provided. In “People” page, faculties, graduate students, etc. are divided into 5 categories: CSE, HCDE, Ischool, Design, HCID.

For DUB community members, they need to log in and create their profile, research and projects, so I imitate LinkedIn to design the profile page. User can add industry, summary, publication, projects, courses and contacts in their profile. Upon user click the button to add industry, the page will jump to the industry block, which is direct and easy for users.


After building the interactive prototype, I made a list of tasks and invited one user to test it. Here is the feedback I got from him:

  • Log in is hard to find on the bottom of the page, there should be some indicator on the right-top position of page
  • Didn’t expect the only way to go back to homepage is clicking the logo, but not a big deal
  • The overall design is very clear and easy to use

Based on the feedback, I add a link on the right-top of each page. It goes to the bottom of page upon clicking it. After logging in, user can edit profile, write a blog, publish news and announcements.

From this assignment, I found it is exciting to use Axure to simulate interactions and give user experience of what the website is like. It is really a good way to keep the wireframe simple, black and white without any visual design, because it would keep the focus of critique on the website interaction and information architecture rather than on the color and visual design. It is also very quick to build and make some changes based on the feedback of users’ evaluation.

I was a visual designer before, I paid more attention to visual design and I absolutely knows how annoying it is to make changes of the website layout in Photoshop. In the future when I do the website design, there is no doubt that I will pay more attention to layout and build a blind spot strategy with the wireframe first.

Video of Prototype:

Like what you read? Give Donglu Song a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.