dub site Redesign
Website Prototype, HCID 521 Prototyping Studio, t University of Washington
Background
This project aimed to redesign the current dub(design use build, HCI Community, at University of Washington)website, from sketching to hi-fi prototype(Axure).
Research
Users’ feedback of the current website
- Too research focused, than offering usable information
- Recent news, dub seminar talks are important
- Visit dub site mainly aim to figure out Who is involveBlog is too out of date, if not update, delete it.
- Most users are dub members, especially faculties, they are willing to put their personal website link, projects, and publication on dub site
Design Requirements
About content
- Should add a About page, there is nowhere can find this kind of information, while it is important to present.
- People, Research are two most significant information.
- The Home page should present the most important and updated information.
About graphic design
- Colors should be consistent with UW website
User Cases
- First group users: dub members (faculties and students)
- Second group users: UWers, but not dub members
- Third group users: non-UWers, visitors
Iterative Prototype Process
Sketching
The first sketching, iterated on the same paper
Navigation
- About
- People, sub-menu: Faculty, Student, Alumi
- Research, sub-menu: Research area, Project, Publication, Collaborator
- Contact
- Slides: the latest news
- Highlights: News and Events, dub Seminar, Blog
At the same time, I researched other websites (University website, especially HCI Groups, like, Stanford HCI Group, CMU HCII Institute, and Gatech-HCI) and reference, and analyzed the content, information architecture, and layout etc.)
The second sketching, very simple, focused on the structure
Prototyping
Tested the first user though not finished yet, focused on the structure, layout, and content. Aimed to use similar methods like Behavioral Prototype and Participatory Design, to observe and explore use’s actions and needs.
The first user’s feedback (the user is dub member)
- +Like the overall design, very focused and clear
- +The spotlight slides in the middle is very good
- +Like the sub-menu
- -User try to clime the main-menu instead of the sub-menu, but it is not clickable.
- -Confused about whether “News & Events, dubTalk, dubThink” are clickable.
- -The grid view of people is a bit inconvenient, particularly, dup group is very big, it is better to use list view to help user figure out who is involved in dub group, though, maybe provide both views will be better as well.
- -The layout may be not suitable for different devices if wanna be responsive.
The first iteration
- Delete the sub-menus, suppose there is no need to add sub-menus, which also would lead to confusion.
- Underline the “News & Events, dubTalk, dubThink” to make it clickable
- Redesign the People, list view at first, then could view each categories — Faculty, Student, Alumi in grid view.
Tested the second user with the complete prototype, and focused on the overall design, interaction, and graphic design.
The second user’s feedback (the user is a non-UW student)
- +Overall, the prototype is very good.
- +Navigation of the current page is un-clickable, which is confusing.
- -Do not know whether he is in the current page.
The second iteration
- Highlight the current page, and make it clickable
- Also, I back to the design requirement, and noticed that I forgot to design “User’s profile”, thus, I add a profile page.
Soon, I tested the third user.
The third user’s feedback (the user is a UW student but not a dub member)
- +Overall, the design if good, could do anything she wanted.
- -The color is not that consistent.
- -Looked too simple (explained to her it is just a prototype not a final design, so most of the part and layout or structure, content is not presented yet)
The third iteration
- Redesign the color a bit.
- Fixed some interaction bugs.
The final prototype
Reflection
- Quick prototype, quick user testing, and quick iteration, this process is really helpful!
- Should not be too much in detail at first, important to follow the prototype process: Content→Information Architecture→Layout→Structure→Interaction→Graphic Design
- Different levels of prototype should design for different user groups. Thus, define which kind of user you want to design for, what question you wanna ask, or which assumption you wanna justify is very important before building the prototype.
- Keep it simple stupid. Though some interactions are very innovative or interesting, if users cannot pay attention to the interactions at the first sight or even be confused, then, should redesign the interactions.
- Be consistent, either the color or content structure or layout.
- Know as much as you can about “dub”, so that the website style, taste will be the same as “dub” (i.e. research focused, human value and technology), instead of other types of websites.
