Mini project

Learning outcomes

  • Gain experience in studying interaction used on the web.
  • Practice precedent design analysis
  • Gain insights regarding pitfalls of producing a interaction specification
  • Gain insights in how to approach an implementation problem given a specification

Project organization

You will be working in the same groups as previously. Each group has three deliverables that have to be made. The recipient of each deliverable is another group. The recepient group will provide you with a review of the deliverable. Details on deliverables, project time table and group logistiscs can be found below.

Project deliverables and project plan

The mini project will take four weeks. The list of deliverables can be found below.

  1. analysis (deliver by Nov 29)
  2. specification (deliver by Dec 6)
  3. implementation (deliver by 20 Dec)

    Each deliverable should be sent both to the recipient of the deliverable, and to your TA on the last day of each phase. Your TA will tell you if you have missed any of the requirements. Since the recipients depends on your work to continue their project, it is important that you deliver on time. You are encouraged to communicate with the recipent of your deliverable — make sure you are on the same page.

  • The requirements for each deliverable are available further down in this document.
  • Information on groups, recipients and designated product can be found below.
  • All projects will be presented at one of two seminars in the beginning of january. More details on this will follow.

Groupsend Analysis tosend Specification toProduct
A1B1B2Clothing store
A2B2B3Product catalogue
A3B3B4Product customization
A4B4B5Clothing store
A5B5C1Product catalogue
B1C1C2Product customization
B2C2C3Clothing store
B3C3A1Product catalogue
B4A1A2Product customization
B5A2A3Clothing store
C1A3A4Product catalogue
C2A4A5Product customization
C3A5B1Clothing store

Week 1 (25-29 Nov): Analysis — Precedent Design Analysis

To be delivered by Nov 29. Communicate with the recipient.

Your group will be given a context/domain and a functional specification. Your group will then perform a precedent design analysis and collect examples of different UI implementations of the specified functional specification for the given domain.

Your findings should be presented in a report. The report should present the examples you have found, along with rough recommendations to consider in a future implementation. The report should also include the functional specification for your project analysis.

Requirements for the analysis report

  • Follow the genre analysis protocol described during the lecture/in the original paper.
  • The report should contain annotated precedent design examples - at least 3 examples for each item in the functional specification.
  • The report should contain conclusions and recommendations for the design specification.

Week 2 (2-6 Dec): Specification

To be delivered by Dec 6. Communicate with the recipient.

Your group will be given an precedent design analysis report. Review the analysis report you have recieved. Critique the analysis on the following points:

  • relevance - were the examples relevant
  • did you find the analysis exhaustive? i.e. did it answer all your questions?
  • did you agree with the conclusions of the analysis?

Using the information in this report, your task is to produce a design specification to be used by the implementation team. Use sketches, wireframes, storyboards and textual descriptions to specify the implementation. The scope of the implementation should be between 1-3 screens depending on the product.

Specification requirements

  • The specification should have a short textual description (product description, number of web pages, etc)
  • The specification should contain annotated visual descriptions of interaction.
  • The design specification should specify the interaction to be implemented in detail. Programmers tend to only implement that which is specified.
  • The design specification should cover all requirements specified in the functional specification
  • The design specification should add additional elements to provide a complete experience within the scope of the delimited product, i.e. make sure the product makes sense

Week 3-4 (9-20 Dec): Implementation

To be delivered by Dec 20. Communicate with the recipient.

You will be given a design specification the design specification team. Write a review of the specification you have recieved. It is very difficult to write a complete specification for the first iteration. So the specification that you have recieved is probably incomplete in one area or another. Critique the specification on the following points:

  • What parts of the interaction has the specification left out completely?
  • What parts of the interaction are underspecified?
  • Is the specification clear? Are there parts of the specification that you have trouble understanding?
  • Are there parts of the specification that are well made? Clear and easy to understand?

After reviewing the specification you should create an implementation that follows the specification. Communicate with the specification team if anything is unclear.

For this project you will not have access to a graphical design team, so you may use relevant or neutral placeholder artwork that communicates a message that does not conflict with the final product to be. E.g. do not use images of flowers instead of clothes, or animated gif background if the final product will not have them etc.

Implementation requirements

  • Implement the design specification.
  • The implementation can differ from the specification, but changes must be cleared with the design team and documented.
  • If you need to change anything, check with the design team.
  • When the implementation is complete, write a report that assesses the quality and usefullness of the specification provided by the design team.


The presentations will be held on the 14th and 15th of January. You need only attend the seminar day of your group.

  • 14 Jan: groups A1-B2
  • 15 Jan: groups B3-C3

Each group has 20-30 minutes for presentation, demonstration and questions. The requirements are as follows:

  • All group members must participate actively in the presentation.
  • Highlight the most interesting parts of your implementation.
  • You do not have to go into every detail of the implementation.
  • You must demonstrate parts of the implementation.
  • You must refer to the specification in your presentation, e.g. show a specification sketch and its implementation.

Functional specifications

Below you can find the functional specifications for the different mini projects.

Clothing store

The clothing store is an interactive product where the user can browse clothes (or shoes, or jewelry, or other things you can wear) and add them to a shopping cart. In the implementation, severl items must be available to browse through, but all can lead to the same product information page.

  • browse items
  • shopping cart
  • add/remove items from shopping cart
  • select sizes and colors
  • view closeup of item
  • product descriptions

Product catalogue

The product catalogue is an interactive product where the user can browse a producer’s products. The user cannot buy products here, just get information about them. The product catalog is more about marketing than actual sales.

  • browse product series
  • multiple product images
  • product information: features (with description), specification
  • related products
  • product showcase - why is this product good

Product customization

The product customization is an interactive product where the user select various options before buying something. Information on the available options etc should be provided.

  • information about various options (color, size, accessories, speed, memory, etc)
  • price information
  • the ability to change options
  • feedback from each change
  • dynamic representation of the final result

Responsible for page content: Jody Foo
Last updated: 2013-10-21