hand drawn uml diagram

Sketch of a conceptual class diagram from uml.org.cn



another example diagram

Architecture diagram from signalogic.com

Assignment 4: HTML Mockups & Project Design Document

Grade Value: 125 points

Due Dates:
  Part I (Mockups): Tuesday January 19, on web
  Part II (Testing and Design Doc): Thursday January 21, in class

brief

HTML Mockups are the first step in the bridge between design and development. Once you have your initial low-fidelity prototypes, it's useful convert those to HTML/CSS. This way, you can experience "using" your application in a browser. In this assignment, your group will first create a set of HTML mockups for your web application. The mockups are due Tuesday; results from testing mockups are due Thursday.

Once you've designed your mockups, you will then produce a design document describing your planned implementation strategy and schedule. A fundamental step in any implementation is designing the system architecture. This is an important process that will allow you to plan ahead, save rewriting time, and communicate with both the members of your group, and to us.

You will present your mockups and design documents in studio on Thursday.

part i (due tuesday)

You will be creating a full set of HTML mockups for your web application. Every page that a user might see in the course of the application should be mocked up. The links on the mockups should work in the sense that they will bring the user to another mockup which shows what the landing page of that link would look like.

You should submit your mockups to the course submission site before class on Tuesday.

Target Time: Creating HTML mockups should take you 2-3 hours as a group.

Design goals and evaluation criteria:

part ii (due thursday)

Testing

You should then test these mockups with 3 people not in your group. This will give a sense of what a user's eye will gravitate to first, how intuitive your design is, and what some key issues will be in usability. We encourage, but do not require, that you document these tests using audio or video recording.

Give the users 5-10 minutes each with the application, don't give them any guidance, and have them talk aloud (saying what they're doing, and any questions they may have). However, if they get stuck for more than 30 seconds, you may answer their questions.

Target Time: Testing your mockups should take you 1-2 hours as a group.

Design Documents

Finally, your group should formulate a design document describing your proposed system architecture and schedule for completion.

Feel free to make use of design patterns, either in describing parts of the architecture (in pattern format), or for referring to elements of the architecture that employ them.

Target Time: Creating the design document should take around 2-5 hours as a group.

notes on scheduling

As you're aware, you only have a couple weeks to build your application. This is a very short time, so proper planning is incredibly important. Break your application development into three stages: alpha, beta, and launch. (The schedule for the course has been updated to reflect this new schedule.)

Alpha release: This is a release just for your group members, so it does not need to be completely functional. The point is to have the basic skeleton, as well as the core feature(s) implemented. Since you'll be using it yourself, you'll get some valuable insight into the pain points for power-users. You'll also start catching some of the early show-stopper bugs.

Beta release: This release is for "friends and family," so you'll want most of the functionality finished. However, make sure you don't over-commit; as Getting Real puts it, Fix Time and Budget, Flex Scope.

Launch: This is the public release. This is when you start running A/B tests, analyzing logs, and putting on polish. Again, It's better to make half a product than a half-assed product.

More detail is coming on each of the releases, but use these notes to lay out a schedule. The schedule you submit is not set in stone; it's for us to be able to discuss with you, and for your planning.

We suggest you break down tasks to 1-8 hours, so that your planning will be sufficiently granular.

in studio

Each group will give a ~15 minute presentation on their progress.

As a group, you will take 5 minutes to walk through 2-3 use cases in the HTML mockup. Each group member will tell a 30-second story about what they learned.

Next, your group will present your proposed system design and schedule. Create a diagram of your application. This diagram can be a class diagram, like the above example. If you're not using classes, the diagram should convey an overview of your data, as well as functions/methods being called to act upon the data.

You'll have the remainder of your 15 minutes to present your diagram and explain your architecture to the class. Be sure to include time for questions and highlight topics on which you'd like to gain feedback from the class.