Website Prototype
Introduction
Website prototyping is a practice of showing the interactive wireframes for the usability testing for the end users. In this assignment, I am going to redesign a school website called dub (http://dub.washington.edu) by creating new requirements and improve its functionality.
Process
Step 1
I put every element I wanted into the main page first with a basic design layout.
Step 2
I sketched some design ideas for each subpage within the required elements.
Design
Home Page
This is the home page with a navigation bar at the top including six categories. There are also some announcements that the audience can see what is the recent news or information.
Compared with the original one, my navigation was much clearer and more understandable, which could give the audience an overall picture about the website.
Element 1 — About
I created this new page called about because a lot of people might not know what dub is, so I think an introduction would be helpful for them to get to know the website.
Element 2 — People
I designed a search bar with several filters for the audience to search for the people they want. Then a list of people’s bio would show up once they hit the search button.
The original one was not very user-friendly because there was no option for the user to choose their preference. In addition, it was hard to read all of those people’s name and their brief intro.
Element 3 — Research
If the user wanted to know the information about research, I listed all the people with their research areas, current and past projects and also their publication.
The original one structured the research project by their area or by alphabetical, which could not make the user see the author at the first time. In my opinion, the user would get more interested in the projects based on their author.
Element 4 — Calendar
I created the actual appearance of the calendar, which could make the user feel more practical and easy to remember the date of the events.
It was hard to remember the data of the events in the current calendar because it didn’t give the users an empathetic feeling.
Element 5 — Seminar
This was a page only for the seminar event if the users who were interested in that could check this immediately without being confused by other announcements.
The current version had a news page, which I thought would be too board for the information. With the specific area of news, users could find their interests easier and faster.
Element 6 — Join Us
This was a short form with user’s contact information when someone wanted to join in the dub.
I didn’t feel the current page would make the users to get involved because the information was about the academic program, but about the dub.
Analysis
Effectiveness
- The navigation was clear and the user could follow the link to search for the information he wanted.
- The color was simple and it was easy to notice the important information.
Weakness
- The color of the navigation was a little bit distracting because there was no highlighting to help the user to track the page he was under.
- Some of the categories name didn’t make sense such as “Join Us”, which might make the user feel to work for dub, not join the organization.
Suggestions
- Change “Join Us” to “Contact Us” or “Get in Touch”
- Under the people page, it will be helpful to list the person’s research areas, which will also save a button for other use.
- Under the research page, it will be understandable to have the list of research’s name and provide the members of each research.
- The calendar and seminar categories can be combine together, which shows the seminar event on the calendar. The new category can be called “Event”.
