A5: Website Prototype

dub Site Redesign

The purpose of this assignment is for you to practice developing wireframe mockups for prototyping websites.

The first phase of the assignment is to analyze an existing website, and understand its current content and functionality. You will then redesign it, incorporating new requirements for the site.

The result of your redesign effort is limited to the content inventory, information architecture, site navigation, and general screen layout. You do not have to produce a complete working site, nor do you have to attempt a rebranding with a new visual identity.

You are to concentrate on the interaction design, and to implement a prototype of the site in wireframe format. This could be considered a blueprint for a developer to follow to actually implement the site.

dub-logo The subject of your wireframe prototype is our very own dub website. As you undoubtedly know, this site is quite out of date, both in form and content. It is in serious need of a complete overhaul.

Your challenge is to analyze, redesign, and develop a wireframe prototype for a new dub website. This site should be independent of MHCI+D; we’re not merging them, but they are to retain their separate identities.

The new site should include the following information or content:

  • Announcements: blog or other listing of news and announcements of interest to the community.
  • Directory: listing of faculty, students, affiliates, etc. who are members of the dub community.
  • Calendar: a calendar system for viewing and subscribing to a schedule of dub events (weekly talks, conferences, events, etc.).
  • Seminar: information about the weekly seminar series — schedule, presenters, abstracts, videos, etc.
  • Research: faculty research areas, projects, publications, collaborators, etc.
  • Membership: a members section for dub members (login required) to edit their own information on the site (profile, research, etc.).

You may add other features to the site if you wish, but you must include at least the above in your design. You may wish to take advantage of previous user research and analysis that has been done on the dub site earlier this year by MHCI+D staff.

Your redesign and prototype can be done in phases, to allow you to systematically approach this design problem:

  1. Analysis: study the existing site, the above requirements, and add your own thinking about use cases, scenarios, personas, and current trends in web design to the mix.
  2. Content Inventory: assemble a complete list of all content that you will incorporate in your redesigned site.
  3. Information Architecture: develop the site organization and architecture (sections, pages, navigation scheme, menus, etc.).
  4. Layout Template: develop an overall layout for the visual elements on site pages, and templates for different sections of the site.
  5. Skeleton Wireframe: implement a set of wireframe diagrams for your redesigned site, limiting your design to black and white line drawings and “sketchy” elements.
  6. Interactive Wireframe: implement a fully interactive wireframe prototype of your design, so that the complete functionality can be experienced or demonstrated. You may add visual design elements to this version, but that is not required.

You don’t have to follow that scheme exactly, but it may help you break down the process into manageable steps if you haven’t done this kind of project before.

With the resulting prototype, you should be able to completely communicate the user experience of the site. A developer should be able to implement the site by studying your prototype, especially if it is well annotated.

You should do at least some basic testing of the prototype with another user in order to evaluate the effectiveness of your design and the prototype.

I suggest that you use Axure to do this work, although you may use another tool if you can produce all of the required deliverables. (You can get a free student license for Axure.)

Submit the following:

  • Prototype: the interactive wireframe you implemented in Axure. The preferred way to do this is by using Axure Share and submitting the URL.
  • Project Report: Write a short report documenting your design and testing. This should be neat and clear, not overly designed, but suitable for a process portfolio artifact. (You should be able to reuse a lot of this information in your process blog.) The report should stand on its own as a communication about your prototype and cover the following elements:
    • Design: description of the website’s purpose and basic functionality.
    • Prototype: description of the intermediate steps you performed (as above) in your prototype process, to show how you analyzed and designed your solution.
    • Analysis: summary of the results of your testing — what about the prototype worked well, what needed improvement, and what you concluded about the effectiveness of your design from the testing.

    Include sketches, scans, photos, and other evidence of the design, the paper prototype, and your testing of it. Put it all in a PDF file, please.

  • Video Demo: A 60 second (maximum) video that demonstrates the key features of the site. You do not have to be exhaustive in this demo, but just show your general design and some sections of the site that you feel are important, useful, or innovative. The best way to do this is with a screencast utility, but if you have to point a camera at the screen and record it, that is acceptable. The video should be narrated to explain the site features.