The second project for Web Design & Usability required students to redesign a web site of their own choosing. The goals were to improve usability, user interface and visual design of an existing site. They must present at least six areas where improvements were needed. This project focused on the desktop screen only. Minimum deliverables included a homepage design, secondary page design, a user-interaction design and another of their own choosing. They may hand in screenshots showing how the pages work or a functional HTML demo. Graduate students were required to design a mobile version of their redesign with the minimum deliverables of a homepage design and another design of your own choosing.
To help students narrow down their selection, I assigned the following questionnaire:
- What site will you redesign?
- Who visits your site?
- What do your visitors look for?
- Are they able to find it? If not, why?
- What does the current site do well?
- What does the current site do poorly?
- What are short-term or long-term goals that need to be considered in the redesign?
- How does the user interface need changing?
- What is the most important factor of the new site?
- What areas would you improve in the redesign?
- What features would you eliminate in the redesign?
- What features would you highlight in the redesign?
Areas of Improvement
The following list gives students an understanding of what I was looking for in their redesign:
- Navigational conventions
- Effective visual hierarchies
- Chunking (breaking pages up into clearly defined areas)
- Clear indications (make it obvious what’s clickable)
- Eliminate distractions
- Format contents to support scanning
To help students thinking about usability, I assigned the following readings from Steve Krug’s Don’t Make Me Think, Revisited (3rd Edition):
- Chapter 3: “Billboard Design 101”
- Chapter 7: “The Big Bang Theory of Web Design”
With this redesign project, students had the complete freedom to rearrangement contents, add new features or omit unnecessary items. They just need to provide me the reasons for doing so. After conducting content inventory, they worked on the wireframes and moved into a design tool of their choice to create the mockups.
For class critiques, I experimented with a different approach. In addition of having a full group or smaller groups, students were required to write down their feedback. Each computer station was set up with a project. Each student then had a chance to sit down, check out his classmate’s work and wrote down comments on a piece of paper. Some students found this approach helpful, especially the ones that don’t like speaking in front of a class.
For online critiques, students engaged more with Disqus on the course site than the previous project. Students that didn’t like speaking out in class did much better in writing. Graduate students continued to provide much more feedback in group discussions.
For the final results, most students stepped up their game from the previous project. We had some very strong designs and concepts. One student took on the challenge of reworking the VOA News. At first I was a bit skeptical, but she did an excellent job of restructuring the hierarchy of the site and added a function to allow users to customize their news homepage. Another student came up with an imaginative redesign of an entertainment site that let users watch Asian movies and TV series online.
One particular student wanted to take on a challenging redesign so I suggested that she reworked the VOA web site and she did an excellent job. One student completely reimagined a web site that let users watch Asian movies and TV series. For more intriguing redesigns, check out my Pinterest board.