Spring 06 Project 2

In this project you will create an interface for pedestrians in Chicago. The concept (and the conceit) here is that the city of Chicago and the Chicago Transit Authority decide to install large touch-screen panels on the streets outside every major El stop in the city to help people navigate around the city sucessfully and replace the current model of "if you don't know where you are, then you shouldn't be here."

The goal here is to work through the process of creating a user interface fhat 'regular people' can use sucessfully.

The display is a large touch-screen display

My expectation here is not that you will produce something that looks as good as a professional graphic designer, but that you will apply the basic rules of visual design to design an effective interface to communicate with the user.

This project has two phases:

  1. the sketch phase
  2. the implementation phase

You will be working in groups. Due to the class size, the group size will be 2 or 3 people. The goal is to have at most 12 groups. You will need to choose your team and email me the members by 2/9, or I will randomly assign people teams. The requirements remain the same no matter how many people are in the group.

Here is a link with some good hints on sucessfully working in groups. You might also find some good ideas in Chapter 3 of the Schneiderman textbook.

This project has two major due dates: one for the sketches, one for the implementation. Both are due at the beginning of class on the due date.

Sketch phase - in this phase your team will choose a local Chicago area El stop exit and tell me which one you want to pick as soon as possible through email, at the latest by 2/14,  e.g. Red Line Stop exit at Jackson and State. I need to approve your choice. At most one group will be able to work with the same exit and if two groups ask for the same one, then the arrival time of the email in my mailbox determines the winner. So please do not wait until the last minute to choose, or you may find your choice has already been taken. Each chosen stop must be at least one block away from the nearest already chosen stop, i.e. the red line stop at Jackson/State can be chosen as well as the blue line stop at Jackson/Dearborn, but only one of the Jackson/State exits can be chosen.

The chosen El stop also must have:
        a major attraction within 4 blocks
        at least 4 places to eat/drink within 2 blocks

If possible, pick a place that you are familiar with or that is near a site that interests you. 

Then your group needs to collect information. Some information can be found on-line but the group should also visit the site and take some photographs and note down what things (shops, museums, theatres, tall buildings with skydecks on top, etc) are in the area.

The final interface you create should have the following features:

Its important to think of this system from the point of view of the person who is going to use it. This person has just come out of the El, or is just about to go in, or is just walking around the streets. What information are they most likely to need and how can they get to it easily.

This person might be a native, or a visitor. You should support both. Depending on the area that you chose there may be more students, or more business people, or more tourists, so you should take that into account when you design your interface. Who are the most common users? Who is there during the week? Who is there on week-ends? Who is there during the day? at night?

Here is also a nice link on suggestions for the design of public access terminals.

There will be several different ways to accomplish this task, so one major feature of the sketch phase is to for your group to create and evaluate multiple designs. I think the easiest way to do this is to have each of the three members of the group design a version of the interface completely on his/her own and then bring these three designs together in a meeting and create your final (4th) proposed design that you will implement. All three designs must be significantly different. The idea here is to get many ideas out and on the table so you don't converge on a sub-optimal solution too early. With multiple independent starting points it is more likely that you will see options that you didn't initially think of.

Each design should be composed of sketches showing each of the screens that the user will be confronted with and text explaining what this screen shows, and what the user can do at this screen. I would expect there to be at least 20 pages per design. I would prefer that the designs are done on a computer, but if you draw _neatly_ making use of a ruler then that is also acceptable. Anything that remotely looks like it was done at the last minute and scribbled on a set of pages torn out of a notebook will get no credit.

In this phase you should turn in the following in a folder:

If you prefer, you can scan in these things and make all this information available as a pdf file.

Important note: I will not be commenting on your sketches. I am not going to tell you what is good or bad about your design - that is where the value of having many voices on a team comes into play. Your grade will be based on the completeness of your information and the quality and variety of your designs.

This project has two critique phases. An important part of user interface design is getting feedback. Part of this feedback comes in the design phase where your group critiques each others design and then comes up with a final design to implement. Part comes from presenting your design to the other groups. Each project team will give a short 10 minute presentation of their 4th design to the rest of the class, and then answer questions from the class for another 10 minutes. Each person in the group must speak for part of that time. Groups will be graded on the quality of the presentation so I highly recommend practicing the presentation several times.

Members of the audience get points for asking good questions or making good comments about the interface presented. Each group can ask at most one question or comment per presentation. When asking a question or making a comment the groupmember should identify their group - this is like in a press conference when the reporter says what paper he/she works for.

Three groups will present each day for four days. Each group will also get together and type a one page critique of each of the two other projects presented on their day.  The goal here, again, is to see different possible design alternatives and to get new ideas to improve your own design and implementation. As such the goal of the question and answer session is not to pick on people and rip their design apart, but rather to give constructive criticism on how to improve the design. The goal is for everyone to come up with a really good interface for the given problem.

The critiques are currently available at ftp.evl.uic.edu/pub/INcoming/andy/422

MODIFIED REQUIREMENT - by 3/30 I would like each group to create a web page showing the final design (several screens) that you plan to implement - including revisions based on the comments from the class.This replaces the 1 page response to the critiques from the other groups, so instead of writing about your response to the critiques, you will show me what your response is.

Implementation phase - in this phase you will implement your interface. You should make use of the techniques discussed in class as well as the feedback from the sketch phase to come up with a good solution. You can use a language of your choice, as long as you can demonstrate it in class, and I will be able to run your interface on the CS linux machines or the public ACCC windows machines on the 2nd floor of SEL.

Your sketches from the first phase should allow you to divide up the work in the implementation phase, but I highly advise that the entire group hold regular meetings to look at the current state of the entire integrated interface. Trying to put components together at the last minute is a really bad idea. It would also be a good idea to test your intermediate versions out on your friends, parents, or other novice computer users to see if it actually 'works.' Having first time users talk aloud about what they are thinking when confronted with your interface and a given task (ie find a given restaurant) can be extreemly helpful in giving your assumptions a reality check.

In this phase you should turn in the following:

Any code, images, or other elements borrowed from others must be cited clearly in the interface itself and in the documentation.

As with the sketch phase, this phase will also have a public critique of your completed project with the same rules as the sketch phase.

You should also take advantage of sites such as http://www.vischeck.com/vischeck/ to make sure that your interface will work for colour blind people.


Here is a list of the current teams and their choice for project 2:

Team # Members Choice
1 Velazquez, Malinis
Blue Line (Washington stop) Washington and Dearborn

2 Ho, Popuri, Prakash Orange Line Madison and Wabash

3 Rabindran, Bernasconi, Krishnamoorthy Red Line (Chicago stop)


4 Ansari, Uphoff, Biagioni Red Line (Lake stop)

5 Bhatt, Friend, Tran Blue Line (Racine stop)

6 Kori, Jilek, Rajkumar Red Line (Jackson stop)

7 Ausmann, Czajkowskyj, Pro Red Line (Addison stop)


8 Chawla, Dombek Red Line (Roosevelt)

9 Kaufmann, Davey, Litberg Red Line (Harrison


last updated 11/18/07