Project 0: The Me Button

Worth: 5%

Sketch, design, implement and document via a portfolio a WPF-based application where the central interaction is with a button, such that the interaction represents some aspect of your personality or who you are.

Designed objects are often seen as a reflection of the needs, wants, intentions and thoughts of the creator. Consider the intentions of the designer behind -- s/he was probably not blind, and really didn't understand the experience of being blind.

One fascinating idea that has really resonated with me is the notion of impression management -- the idea that we actively manage the "public face" of who we are to others. Consider a person's Facebook profile (perhaps even your own) -- they give off a certain impression, or personality. We take special note of these when the impression depicted is in variance to what we expect (or know of) that person. These (and perhaps even your own) may be carefully designed -- certain kinds of statuses posted, certain kinds of things that are "Like'd", etc. This is a designed object -- perhaps not for use, but designed nonetheless.

While most of the computer-based systems that you use are either tools or play-things (e.g. games), they are still a reflection of the creator(s). The best example of these are tools that were originally designed to scratch an itch of the designer/creator. Linux is an example of something created because of such a need.

In this project, you will design, implement, document and demonstrate an interface that reflects some aspect of your personality. That is, something about the interaction with the button should provide the user with an impression of who you are, or some aspect of your personality.

Pedagogical Objectives

  • Apply basic sketching techniques and lateral thinking to produce various designs
  • Acquire first-time experiences brainstorming ideas via sketches in a sketchbook
  • Learn how to implement, package, install and document WPF programs
  • Acquire first-time experiences creating a portfolio web site and summary

Assignment Deliverables and Details

  1. 10 competing design sketches, 10 sketch details, and sketch refinements. In your sketchbook, generate at least 10 competing (different) designs for each of the two techniques. Show and explain your design(s) to others. You will know which ones are the most exciting by how you talk about them and how others react. Choose the most promising one, and then produce 10 details and/or variations of a particular sketch in your sketchbook. You will be asked to briefly present your best ones. As your ideas change, sketch them out. You will be asked at any time to show your sketches to the instructor, TA, and/or the class.
  2. An implemented WPF application. Implement a WPF application that demonstrates how your system works.
  3. Web portfolio. Create a web site that will contain all your portfolio summaries. Include a brief introduction to yourself and (if you prefer) a photo. Make it engaging. For ideas, Google design portfolio and art portfolio. Also see Artist Portfolio Guidelines for some hints on portfolios and how they are used. Note that you will evolve this portfolio over the course.
  4. Visual project summary. Within the above web portfolio, create a web-based visual summary that illustrates your system. Provide a title, minimal text (perhaps as annotations), and visuals that reveal what this is about. Emphasize the visuals over text - let it tell its own story. Don't feel bound to a static page - you can have things unfold, have sets of pages, animations, overlays, etc. Have impact.
    Specifically, create a portfolio summary that documents and details your design and implementation in a visually appealing manner. Note that this may become your standard style for other summaries. The portfolio must minimally include the following (or equivalents):
    1. a front page with an illustrative image, description and index
    2. an illustrated and annotated sequence describing your project. Avoid lengthy text. Use visuals as much as possible, e.g., screen snapshots, animation, video, etc. The viewer should get a good sense of how your project works from this
    3. a download page containing the complete source and executables, and instructions for running the sample.
  5. Demonstrate your work. During class time, you will be asked to demonstrate all the above work to other class members and the instructor


Your grade will be based on your sketches, your design creativity, your implementation, documentation and packaging, and your portfolio summaries. However, great successes or failures, or incompleteness in one exercise criteria will likely affect your total grade. Note that a successful implementation is required: if you cannot demonstrate your system, you will automatically receive a zero. Similarly, missing, late or incomplete work will result in a large grade penalty.


Sept 9* Introduction to P0
* Homework: sketch 10 different ideas, based on at least two personality ideas
Sept 11* Present best idea
* Homework: sketch another 10 variations based on your best idea
Sept 16* Present your best idea out of these variations
* In-class implementation
Sept 18* Demonstrate your system, and web porfolio


  • - A nice video that illustrates how subtle deformations and motion can communicate personality (in this case, of a couple of balls).