Dub Site: Web Prototype
Redesigned UW dub website and built the interactive prototype in Axure.
DESIGN
The dub website is designed for people who belong to dub community to share information, and for people who do not belong to dub community to look at interesting projects and look up people in dub community. Considering these two group of target users, the key for redesigning the dub website is first is to make the important information more accessible to users, including the upcoming events, and dub seminar videos, and to make the finding or searching process easier.
The basic functionality of my design has five parts. The first part is the “Home” page, where it shows a summary of recent dub seminar record, the latest news, upcoming events and the dub blog. It also provides links to each individual section. The second part is the “People” page, with a bunch of different filters and a search bar, to make the finding people process simpler. The “Research” page is similar to the “People” page, where the projects are sorted with different departments and schools. The “Calendar” page is just a calendar with all the events in dub community. The “Log In” tab provides dub member to log in and edit their information.
The basic layout for the dub site contains a header with the dub logo, a navigation bar and a search bar, a slider with pictures of news, people, and research projects, a side navigation bar for specific navigation and filtering inside each page, and a footer, with the social network links on bottom right. Most layouts are in list view.
PROCESS
I started the prototype process with looking at the existing dub site, and figuring out what is the information they already had and what is their website structure. Then I started drawing the site map, based on the existing site when I suddenly realized that the home page for the existing site doesn’t provide much useful information for dub community members, and people page is not well designed at all. For my design, I would like the home page to include the most important information for all the users, which I think is the seminar information, dub news, upcoming events, and how to join the dub community. Besides, I want to make the people page more human, with pictures, and personal web page links on the summary page, with filters to make searching more convenient. I considered using drop-down menu for filtering with different criteria, like alphabetical order, departments or schools, and maybe research areas. But then I decide not to use that, because I think too many different types of filters complicate the searching. Since my design also provides a search bar, filtering with departments and schools is enough. A slider is also added to the site template, to show pictures from dub community. I originally was thinking using list layout for summary pages, like people and current research, but when I actually started prototyping in Axure, I realize that I do have a lot off space in actual scale, which makes tile-based layout a better choice to present more information at a time.
EVALUATE
I tested the prototype with two non-dub UW students. Both of them think the navigation in the prototype is really clear, and the filters are really helpful, although not all of them are implemented in the prototype. One suggested that the slider pictures should be clickable, and linked to the related news page. I specifically asked them if having sliders across all the pages could be too distracting or too much, one of the users thinks that it is a good thing to show these highlight pictures on all the pages, as they are truly the highlights in dub community. The other user thinks the header is a little bit empty, and suggests adding some dub related quotes to the header, which I think might be an interesting idea. They also think that Join Us section could be in a more obvious position, as this information might be important for non-dub users. The user also suggested for Log In, instead of directing to a new page, having a pop-up window for member login, to reduce the steps users need to take. In general, the website prototype is effective in presenting important information and assist users find the information they want much easier.
PROTOTYPE LINK
http://islc5b.axshare.com/home.html in Axure
