Lecturers

• Prof. Jürgen Späth

Teaching assistance

• Marcial Koch

Collaboration partner

ZHAW School of Health Professions
Institute of Physiotherapy

• Dr. Christoph Bauer ZHAW School of Health Professions; Head, Research Group Movement Laboratory
• Dr. Sabina Hotz Boendermaker ZHAW School of Health Professions; Senior researcher

Students - Groups

• Group 01   
  Power Rangers - Johannes Reck, Eleonora Bonorva, Réjane Schrago, Fabrizio Willi, Dzhuliia Kolodko, Miguel Seabra

• Group 02   
  The Guirdians of the Guilaxy - Nicola Bischof, Bin Martig, Elena de Carlo, Silvan Weber, Nadia Westermann, Guan Arobei

• Group 03   
  The responsive Dinosaurs - Janosch Tillich, Svenja Steurer Jene, Thore Reigber, Micaela Brazerol, Sandro Beti

Tools

• Teleconferencing Zoom
• Online Collaboration Figma
• Online Collaboration Miro

Attendance

In the contact hours a minimum attendance of 80% is required to pass the course. Contact hours: kick-off, input session, mentoring, presentation. Two or more unexcused absences will affect the final grade. Arriving late on more than one occasion will also affect the grade.

Grading

Grades will be based on final presentation, final work and deliverables.

• 20% Final presentation

• 50% Final work (Concept, GUI, Micro Interactions, Prototype)

• 30% Deliverables

Deliverables

All deliverables have to be uploaded to the filer until Monday 14.06.2021 at 09:00 AM.

• PDF Documentation' (to be stored in a file labelled “Documentation”)

• Mockup & screencast of interaction with the mockup. A short video (~2min) of the project (to be stored in a file labelled “Video”)

• Text file including the project title, a short description, and a project description (in a file to be labeled “Texts”)

• Approx. 10 representative images of the project (to be stored in a file labeled “Images”)

• Click-Dummy

Please take a look at the IAD documentation guidelines for submission.

Teaching format

The module involves a mixture of inputs, mentoring, atelier visits and independent work. The difference between the mentoring and the atelier visit lies in the level of expectation:

Atelier Visit: Is like a shoulder view. Students show where they stand at the moment. They have the opportunity to ask questions that have arisen. 

Mentoring: There is an expectation of what the mentors want to see. This is specially prepared for the mentoring session, i.e. there are individual boards on which the relevant things to be shown and discussed are displayed. Motto: No Prototype. No Meeting.

Overview & Objectives

The main objective of the course is to gain practical experience in creating a graphical user interface (GUI). Therefore the students will apply their theoretical knowledge on design methods and processes to create an interactive prototype.

Organised into groups, students will work their way through a four-part process.

During the course the student will learn:

• how to analyse implemented graphical user interfaces in a comparable way,
• how to design a graphical user interface in draft form and work it out as a simple prototype,
• access a box of design methods for developing graphical user interfaces and use them appropriately.

Topic

PhysioX – Next tier of physiotherapy

Kick-Off

• Introduction into the module "Graphical User Interface"
  
• Introduction to the basic tools
  
• Super hereos & super villains
  
• Team culture, team building
• Explore Documentation GUI 2020
• Introduction into the topic by Christoph Bauer
  

Intro Explore Module

Introduction to the explore part of the module, which will take up the next 2 weeks. What methods are used in the explore phase and what should be there at the end.

Q&A Session with 4. Semester

Students can ask questions to the students from the module in the last year post. In preparation, all documentation from the last year must be read through.

Pyhsiodoc - Mai Watanabe
Physis - Daniela Spühler
Doc. - Sonia Tao
PhichiDoc - David Wollschlegel
Physio Pal - Ramona Rüttimann
momen - Andreas Waldburger

Input Qualitative Interviews

Explanation of the Explore Method «Interviews». What needs to be considered in order to produce useful material.

Atelier Visit

Mentor shoulder view. Students show where they current standpoint. They have the opportunity to ask questions that have arisen. 

Source: Digital Innovation Playbook

Input Wireframes

A wireframe is a visual guide that represents the basic framework of a website. Wireframes are created to arrange elements to best serve a specific purpose.

Atelier Visits

Mentor shoulder view. Students show where they current standpoint. They have the opportunity to ask questions that have arisen. 

Q/A Christoph Bauer

Post your question here to avoid duplication.

Input Prototyping Tools

Design Guidelines

• Design Guidelines Google
• Design Guidelines IBM
• Design Guidelines Apple

Tools overview

• Design Valley
• Prototypr

UI Frameworks

• Angular Material
• React

Prototyping Tools Tutorials

• Figma
• Protopie
• Origami
• AdobeXD

Icons

• Evericons
• TheNounProject
• Google Material Icons

Colors

• Palette List
• HTML Color Codes

Qualitative Interview Physiotherapists

Each group has the chance to go in an remote Interview with a physiotherapist. At the moment we could organise 5 therapists, so 2 groups are able to interview 2 therapists, while 1 group can talk to only 1. We are still waiting for the answer of another physiotherapist.. At this point I would like to ask you, do you know any physiotherapists in your environment who would be willing to participate in such an interview?

Fill out the doodle.

Download Session Interviews

Each team has 15 minutes to tell the others about surprising answers and insights from their interview. The people listening add these points with post-its on their white boards (Miro). All post-its must then be clustered and help to create a journey map.

Deliverables on 21.05.21

• Filled Digital Innovation Board: Explore with all relevant information.
  
• at least one „How Might We“ question but there may also be more problem hypotheses

https://uxmag.com/articles/what-is-at-the-top-of-the-ux-pyramid

Input GUI Design

Atelier Visits on request

Mentor shoulder view. Students show where they current standpoint. They have the opportunity to ask questions that have arisen.
Write us an email to juergen.spaeth@zhdk.ch & marcial.koch@zhdk.ch.

Mentorings

Fill out the doodle!

We expect ideas from brainwriting and brainstorming.

Elevator Pitch

Each team presents 3 ideas in 2 minutes each. A Create Module must be completed for each idea.

Intro Evaluate Module

Presentation Create Module: Comprehension Prototype

This comprehension prototype can be made of paper or sketched and should clarify the idea as well as serve as a communication tool.

Instruction: Pragmatically, start with the aspects that the project team understands most clearly. Then add more and more aspects and details. Make a list of all the aspects that should be included in the advanced version. The team should be divided to work alone or in two subteams on the different aspects.

Deliverables on 28.05.21

• 3x filled Digital Innovation Board: Create for 3 different ideas
  
• Comprehension prototype

Diploma Exhibition Built-Up

Help building up the Diploma Exhibition 2021 💫
Create teams of two, where 4 teams (8 students) help in the morning and 4 teams in the afternoon.

Mentorings including Christoph Bauer

Fill out the doodle!

We expect wireframes from the best idea with the corresponding storyboard. Additionally show us 3 different skins based on the most complex screen situation.

Mentorings

Fill out the doodle!

We expect the incorporation of the critique from the last mentoring and the continuation of the skins for the wireframes.

---

Input User-Testing

Testing Appearance Prototype

Using Thinking Aloud Method

Atelier Visits

Mentor shoulder view. Students show where they current standpoint. They have the opportunity to ask questions that have arisen.

Basic GUI Final Presentation

Each group presents 15 minutes. This is followed by a maximum of 15 minutes of feedback. Make sure that not only one person from the group presents, but that everyone in the team talks for the same amount of time.

Feedback Session

Each group gets a 30 minutes timeslot for mentor feedback to their project.

Deliverables on filer

Upload the following deliverables on the server until 14.06.21, 09:00.

• Filled Digital Innovation Board: Evaluation
• PDF Documentation'  (to be stored in a file labelled “Documentation”)
  
• Mockup & screencast of interaction with the mockup. A short video (~2min) of the project (to be stored in a file labelled “Video”)
  
• Text file including the project title, a short description, and a project description (in a file to be labeled “Texts”)
  
• Approx. 10 representative images of the project (to be stored in a file labeled “Images”)
  
• Click-Dummy

UI Prototyping Tools