Stanford University

Project 4: Interaction Design

Part II

Mood board

A mood board captures the mood you seek with your visual design. Example themes might be 1) soft watercolor art, 2) UNIX terminal, or 3) dominant use of negative space. To create the mood board, collect concepts, photos, color swatches, illustrations, shapes, and anything else that conveys the identity you want to get across. Collect the ones you like into a page that is at least 8.5"x11". Powerpoint and Keynote should be plenty powerful for this purpose, but pick any digital layout tool you like.

There are two common errors that previous CS 247 students have made when creating mood boards. The first error is a mood board that has no clear concept behind it. A mood board must be more targeted than copy/pasting entire web pages: it must be small clippings, headlines, images, and other very specific media that evoke your concept. The second error is that they don't communicate a single mood or concept. If you're going for a punk aesthetic, find pieces of media that feel punk!

Pixel-perfect mocks

Having explored the options, you are ready to refine and create pixel-perfect mocks that represent different instantiations of the visual style. Your mocks should capture exactly what the application will look like when you implement the application using web technology. We recommend making these mocks in Sketch, because it is a far more fluid platform for messing with visual design.

Here are some good mocks from last year:

Functional prototype

Implement a functional prototype of your design. Start with the basics and then work to duplicate your pixel-perfect mocks.

To do this within the class timeline, you need to carefully scope the prototype: make sure it conveys the core aspects of the design, and nothing else. Fake any data or user accounts — don't build any back end code if you can avoid it.

Feedback and iterate

Take your prototype out to the field with real users and observe. Synthesize your results, make revised designs (in Sketch), and implement them.

Prototype video

Prototypes tend to stop working soon after the final presentation because of external dependencies or technology updates. Thus we require you to submit a video of your prototype being used by someone (you or a user) for archival. The video could be a screencast with voiceover, e.g. for a web application, or a real video for more experiental applications. Keep your video short—around one minute—and informative.

Final Presentation Pitch

You need to come up with a forty five-second pitch to the audience. Make sure the listener leaves with an understanding of the user, their need, and how you are addressing it with your design. You are welcome to design your pitch however any way that you feel will be compelling. We will present your slide(s) behind you as you present, and will automatically go on to the next group after forty five seconds. Keep in mind that your audience are likely design experts.

We are inviting coaches and external judges to the final project presentations to give feedback and help decide the awards. The judges will be given a rubric much like the ones attached to this assignment. They will be evaluating your presentation, poster, demo and design concept via a rubric.

Look below for details on how to submit your presentation materials. They will be due before the final presentations, so that we have time to compile them.

Final Presentation Poster

You will need a 20"x30" poster to tell judges about your project. This is a chance to show off your visual design skills. A common error is to put too much content on the poster. Keep it simple: convey the problem and how it is being solved by your design. We will provide easels; you will need to print out and mount your poster on a stiff backing so that it can stand alone on the easel. Posters can be printed at Lathrop, Costco ($25), FedEx or Walgreens ($24). They usually have a 1-2 day turnaround. You can order online and pick it up from the store.

Look on piazza for examples of good posters from last year.

Submit and Present

For the Final Presentations

You will be presenting your projects at the final presentations on the last day of class. We will need your presentation materials in advance of the deadline, by Thursday night:

In addition, bring your printed poster and demo to the final project presentations!

On Canvas

Pull everything together into your submission for P4.II on Canvas by the start of the project faire. This includes:

  • Your mood board, in PDF form
  • A report of your user study method, results, and resulting redesign, in PDF form
  • Your prototype video
  • Your video or slides for your presentation, in PDF form if applicable
  • Your poster file, in PDF form
  • Each member must also fill out the P4 final team reflection

Grading rubric

Category Unsatisfactory Adequate Good Excellent
Design insight
1: Idea is only marginally appropriate to the domain, barely articulate design goals, or barely address the given needs. 3: The design addresses user needs in ways that are surface-level interpretations of the problem space. Design goals are trivial or not well-connected to the idea. 5: Idea addresses user needs in generally appropriate ways, but may be incremental, have questionable design goals, or a surface-level interpretation of the problem space. 7: Idea presents a nontrivial and insightful interpretation of the design space, grounded in well-articulated design goals.
Visual and information design
1: Prototype has little or no visual and information design. 3: Prototype does not respect visual and information design principals. 5: Prototype has generally well-executed visual and information design. May have visual design issues that are not fatal. 7: Prototype has consistently strong visual and information design.
Interaction design
1: Prototype is barely functional or has little attention to interaction design. 3: Prototype is missing key functionality or has significant interaction flaws. 5: Prototype is generally well-executed, but is missing some relatively important elements or has minor to moderate interaction errors. 7: Prototype succesfully executes on its goals and has strong interaction design.
User feedback
1: User feedback is minimal or testing wrong aspects of prototype. 3: Feedback has been executed competently but only marginally tests the important aspects of the idea. 5: Studies draw out basic strengths and weaknesses of the prototype and approach, but may focus mainly on surface-level issues. 7: Studies are executed well and deliver deep insight into the idea and the prototype.
1: Presentation and poster tend to obscure the main idea. 3: Presentation and poster adequately explain the main idea, but are overwhelmed by details, do not present enough information, or are unclear. 5: Presentation and poster are generally clear, with moderate but not game-over issues. 7: Poster communicates the design idea clearly and effectively.

If any of the deliverables are missing, we will reduce your score by 25% per deliverable.