Skip to content
729G87 - Interaction Programming
GitLab

System specification

The purpose this assignment is to specify the components and interactions between the user and the graphical interface.

For this, you will create a wireflow mockup of your system. The mockup should be horizontal visual prototype.

Additionally, you should describe the components of your system with a structural diagram.

The wireflow sketches should describe your system entirely.

Bonus: Describe the structure and behavior/interaction of your components with UML diagrams.

Check out the nngroup article about wireflow diagrams and https://alvarotrigo.com/blog/wireflows/.

Deliverable

Submit your specification as a single PDF via gitlab.

The pdf should include:

  1. How many points you are aiming for.
  2. Short textual description of your project.
  3. A wireflow diagram.
  4. A reference analysis.
  5. Optional: A class diagram.

The wireflow diagram should be the main content of the specification.

This assignment has three different deliverables:

  • The wireflow diagram (visual prototype)

    • This should be a visual prototype of your whole system.
    • The wireflow diagram also visualizes the interaction between components.

  • A reference analysis (links & screenshots)

    • Look out for similar products/websites/games/etc.
    • Add screenshots (min. 4) of similar implementations with a link to the according resource.

  • The structural diagram (optional)
    • This should model selected components of your system (e.g., in a class diagram).

Please note that the wireflow diagram models the system from the user and interaction perspective.

The structural and behavioral UML diagrams model the system from the developer perspective.

Points

  • 1 Point for the wireflow diagram and reference analysis.
  • Optional: 1 Point for the structural diagram.

To pass this assignment, points for the wireflow diagram and reference analysis must be gained.

Tools

You do not have to use software to create the wireframe sketches, clearly drawn sketches are perfectly fine. However, if you want, there are several software options, e.g.

IMPORTANT: The purpose of using these tools for the specification is to draw the wireflow diagrams.

Do NOT submit Adobe XD/Figma links as your specification.

Level of Complexity

It is ok to strive for a more complex system than you later implement. Set your goals high, it’s ok if you don’t achieve them all. Better not to meet high targets than to meet low targets too early.

Define for yourself:

  • Must Haves
    • This is your basic concept
  • Should Haves
    • You aim for this to be in the final prototype
  • Could Haves
    • Realistically speaking, this won’t be in the final prototype, but maybe you achieve it.