Hochschule Darmstadt Human Machine Interfaces Prof. Dr.

Christian Bürgy
University of Applied Sciences M.Sc. Alexander König
Design Project WS 2023/24
FB EIT
(elective in MSE/Wing Master course)

Objectives

In this design project, you will apply the learned HMI theories and the techniques of
modeling user interaction of a GUI-based panel-like application using UML.
Furthermore, you will create your own mock-up of that system using Axure. Finally,
you will provide some reflection on your design and the design process. You may
submit alone or with a partner.

Regulations

General
You will submit your assignment in Moodle. The assignment will consist of a single
Axure project file. Please be sure to add your names to the file name of the project file
(.rp file), as we download all files into a single folder and need to identify the students
/ groups of students.

Distribution
The assignment for the design project will be published in the Moodle course of the
module on Wednesday, December 13th, 2023 at 1:30pm.

Submission
The following tasks need to be solved and submitted on Moodle by February 10th
2024 (at noon) (8 weeks after distribution!).

Preparation
A template of the Axure project file is to be found on Moodle. The submission consists
of a single Axure project file with all your results saved to this file. The submission
deadline is fixed in Moodle and can only be extended upon a medical certificate. No or
an improper submission, as well as plagiarism, lead to a “fail” grade.

The preparation of the project can be done by a single student or a group of two
students. If two students work together, both need to submit the very same project
file on Moodle, i.e.: two students - two identical submissions on Moodle.

The project will be rated with 100 points, which lead to a grade between 1 and 5. The
achievable points of the different tasks are assigned to each task on the following
pages.

Seite 1 von 5
 Hochschule Darmstadt Human Machine Interfaces Prof. Dr. Christian Bürgy
University of Applied Sciences M.Sc. Alexander König
Design Project WS 2023/24
FB EIT
(elective in MSE/Wing Master course)

Design Project - Axure Project File

• If you did not do, yet, please download and install Axure 10 on your computer.
We recommend applying for the free academic license (you need to apply with
the e-mail address of your h_da account) - the 30 days trial version is sufficient
for a start, too, though.
• Download and save the template of the Axure project (.rp file) from Moodle,
add your name(s) to the file name.
• Open the Axure project and change the names at the menu option
“project/global variables” - add your name(s) - remove entry of person 2, if
you’re working alone (don’t remove the variable, though).

• Check the project template and test the options of „preview” and “share”; check
the changes you made (names) and test the given functionality.
• Set the password at the „Share“ option to „hmi-2024“, create a new project, do
not update an existing project.
• Save the link generated while using „share” and enter it at the submission
comments, while submitting to Moodle (that way, we can easily open your
project).

Introduction to Project

You are about to design a mock-up for a fictional application of your choice. We
provided a preliminary project application and verification process, in which we gave
feedback to your idea. We provide a sample project, which allows you to research
about and copy parts of input and output interfaces.
You are free in selecting the depth of your development; as we rate your creativity
and effort, too, your grade will depend on both, a certain level of detail and the
implementation of standard, rules and principle of HMI.

The idea of this assignment is that you build your own input and output interfaces that
let users get a glimpse of the look & feel of your system and let them see the effect of
their interaction with the system – and, if applicable, the current “virtual” input of
external sensors (e.g. outside temperature, performance of the photovoltaic panel,
etc.).

Seite 2 von 5
Hochschule Darmstadt Human Machine Interfaces Prof. Dr. Christian Bürgy
University of Applied Sciences M.Sc. Alexander König
Design Project WS 2023/24
FB EIT
(elective in MSE/Wing Master course)

Task 1 - Use Case Diagram [10 points]

• Set up a use case diagram within your Axure project at the page “Use Case
Diagram”. Model a high-level overview in UML notation showing the functional
dependencies between the different use cases.
• Use UML notation for this diagram and use the shapes offered by the Axure
libraries (e.g. library “flow”), an example is given.
If you prefer other UML modeling tools or if you want to draw by hand, you
may include a picture instead, too.
• Remember: in general, a diagram is best “consumed” if it offers no more than
10-15 use cases per page.
• Please name your use cases with IDs (e.g. UC-01), so you can afterwards refer
to those using this ID.

Task 2 – Activity Diagram [10 points]

• Based on Task 1, set up an activity diagram of one selected use case, showing
the process flow of this use case.
• Use swim lanes to separate activities of the different stakeholders, e.g. (if
applicable) the controller, sensors, actuators, users. You might also simplify by
having one swim lane for the “system” and one for the “user”. If swim lanes
are crossed, we see user interfaces: mark those as interfaces with IDs, so you
can refer to those afterwards (e.g. INT-01).
• Use UML notation for this diagram and use the shapes offered by the Axure
libraries (e.g. library “flow”).
If you prefer other UML modeling tools or if you want to draw by hand, you
may include a picture instead, too.
• Use the correct UML notation for loops, decisions, etc.

Seite 3 von 5
Hochschule Darmstadt Human Machine Interfaces Prof. Dr. Christian Bürgy
University of Applied Sciences M.Sc. Alexander König
Design Project WS 2023/24
FB EIT
(elective in MSE/Wing Master course)

Task 3 – State Diagram [10 points]

• Imagine the state machine your application is based on. Simplify, if that system
seems to be too complex to cover it in the given time.
• Set up a UML state diagram, which models this state machine.
• Use the following notation for marking the transitions:

event [condition] / action()

• You may extend this with entry/do/exit actions, if needed / more intuitive.
• Use UML notation for this diagram and use the shapes offered by the Axure
libraries (e.g. library “flow”).
If you prefer other UML modeling tools or if you want to draw by hand, you
may include a picture instead, too.

Task 4 – Design Considerations of Mock-up [5 points]

• Use the table at the page “Design Consideration” in the Axure project to
describe user interface options that could be mapped to use cases defined in
Task 1 and link them to the activities marked in Task 2.
• Find at least 10 examples of design considerations.
• Note that there could be more than one interface for a single use case, if use
cases would perform only internal actions, e.g. calculations, they might not have
interfaces at all.

Task 5 – Implementation of Mock-up Interfaces [40 points]

This is the actual implementation task:

• Set up the mock-up of your application by creating new controls and actors on
the given and new Axure page(s).
• Add controls and images, if needed, add layered or nested images, which show
the states of the actors / devices, which you want to include in your mock-up.
E.g., show a PV panel, show the sun, show the season (summer, winter, …),
show state of container (full/medium/empty), …
• Decide whether input/output interfaces are on the same page, decide if you
want to separate your system into subsystems, decide how much freedom you
give to the users, decide…
• You may decide yourself, if you want to use predefined or own widgets and
whether you want to mock-up a certain (OS) platform or not.
• Demonstrated creativity and effort will be grading criteria, too.
• Make sure, your system is self-describing and easy to use.
• While grading, we will not have the option to consult you for help, so this system
must perform “as is” and must be usable without a manual or additional
documentation; you may assume, though, that we have a basic understanding
of technical systems… ;-)

Seite 4 von 5
Hochschule Darmstadt Human Machine Interfaces Prof. Dr. Christian Bürgy
University of Applied Sciences M.Sc. Alexander König
Design Project WS 2023/24
FB EIT
(elective in MSE/Wing Master course)

If you run into problems of the Axure project or if you have questions of missing /
not working functionality of Axure, please use the forum on the Moodle page to ask
your questions. We will answer those as soon as possible. That way, all participants
will benefit from that question. – And if you still need help, send us an e-mail
(Alexander König or Christian Bürgy).

Task 6 – Design Approach [5 points]

• For five of the UI elements, you designed in Task 5, please add a “note” in the
Axure project (on the right tool panel, next to “style” and “interactions”.
• In each of these five notes, please give at least three different examples of
interface decisions that you took, mention the affordance, design principles, i.e.,
guidelines, norms or ideas, which let you choose this very interface.
• Please use different examples, e.g., do not describe five “text fields for entering
text” …

Task 7 – Test of the System [10 points]

• On the Axure page “Tests”, fill in the table with at least 10 test descriptions of
your system.
• Define these tests in a way, so a novice user can perform those and decide
whether these are successful (ok) or not (nok).
• Define the steps to perform the tests and the anticipated result of the actions,
i.e. what the system “does”.
• Try to cover the main functionality of your system with the listed tests as
completely as possible.

Task 8 – Video of the System [10 points]

• Prepare a short video (between 60 and 90sec), which shows the main or most
interesting features of your system.
• Take a screenshot video or start a BBB/Zoom session, which you can record,
while sharing your screen.
• You may either comment as spoken text or with simple labels in the video; if
your UI is self-explaining, you might not need any comments.
• There are no limits for your creativity in this task.
• Please avoid showing private information (names, student ID, pictures, …), as
I intend to share the learnings between the different (current and future)
groups.
• I will take the highlights to compose a “best of” video after submission, i.e. in
the last lecture. In that session, I will give live feedback to those videos.

Good luck and have fun!

Seite 5 von 5