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

Please register your group in Webreg. Each group should consist of 2-3 members.

The mini-project consists of three phases, each with an associated deliverable. At the end of each phase, the deliverable is presented to the recipient group either during class or at a lab session (see dates below).

Project deliverables and project plan

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

  1. analysis (deliver during lab session Nov 28)
  2. specification (deliver during class Dec 3)
  3. implementation (presentation and demo Dec 17)

Table of logistics

GroupMembersAnalysisAnalysis toAnalysis fromspecificationspecification tospecification fromImpl
1cass004, annpe207clothing store314product catalogue614product customization
2linta544, emme165product catalogue413clothing store711product customization
3yodem529, johis140product customization51clothing store810product catalogue
4alebr310, oskfr124clothing store62product catalogue915product customization
5carka480, anni913, jimer336product catalogue73product customization1012clothing store
6sofli276, madfr972product customization84clothing store111product catalogue
7danto582, felsc926, hanpe473clothing store95product catalogue122clothing store
8saral853, freej101product catalogue106product customization133clothing store
9johri201, marli947product customization117clothing store144product catalogue
10frien722, galosi721clothing store128product catalogue35product customization
11frijo793, albri134product catalogue139product customization26clothing store
12jonda429, freli693product customization1410clothing store57product catalogue
13moasa077, samth549clothing store211product catalogue158product customization
14peffa292, sofbe231, chafr402product catalogue112product customization19clothing store
15fraku565, jacga987, freni981product customization1515product customization413clothing store


  • The analysis and specification should be handed to the recipient group in paper during at the specified dates.
  • Each recipent should review the deliverable together with the group responsible for it.
  • As a recipient, use this as an opportunity to ask the delivering group for any clarifications needed to be able to continue with the next phase of the mini project (specification or implementation).
  • If you as a recipient feel that there is anything missing from the deliverable, ask the delivering group to revise their analysis/specification.
  • If the delivered analysis/specification is approved by the recipient, the team that produced the analysis/specification sends a copy to their TA.

The TA’s role during the mini project is to be a “supervisor” for each group. When your delivery is approved by the recipient, send a copy of the final version to your TA.

  • 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 and demoed during the lab session on Dec 17.

Analysis — Precedent Design Analysis

To be delivered on Nov 28

Your group will be given a context/domain and a functional specification (see below). 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 with annotated screenshots of your collected examples. The report should also contain recommendations to consider in a future implementation. Also include the functional specification you were given for your project analysis.

Analysis requirements

  • Follow the genre analysis protocol described during the lecture and in the original paper.
  • The report should contain annotated precedent design examples - at least 3 examples for each item in the functional specification. E.g. if the functional requirement is to display related items, the analysis should contain at least three examples of how this has been done in existing applications/websites.
  • The report should contain conclusions and recommendations for the design specification related to each of the functional requirements.


To be delivered on Dec 3

After approving the precendent design analysis that you recieve, use the information in the report, 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.

You do not have to use software to create the sketches and wireframes, but if you want, you can use e.g. Pencil or myBalsamiq (send an email to Jody to get an account).

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.
  • For one of the functional requirements, create and specify an interactive solution that does not appear in the analysis. Make a remark in the specification on which interactive element is your addition.


To be demoed and presented Dec 17

After approving the specification you recieve, create an implementation that follows the specification.

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 prototype should fulfill the functional requirements
  • Improve one of interactive elements in the specification.
  • Small deviations from the specification are allowed.

Demos and presentations

You will demo your implementations on Dec 17. The requirements are as follows:

  • All group members must participate.
  • Bring a paper copy of the final specification.

One group member should be available at all times to present and demo your impementation during the demo session. During the demo session you will switch places so that everybody has a change to look at the other group’s implementations.

Your TAs and the examiner will review the work done by each group and ask each group member questions about the project.

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. E.g. a sewing machine producer’s catalogue, or a camera producers catalogue, etc

  • 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: 2014-10-22