Lecturers

• Prof. Jürgen Späth

Teaching Assistant

• Marcial Koch
  

External Inputs

• Florian Wille - Figma Advanced
  

Students

Guan Arobei, Sandro Beti, Nicola Bischof, Eleonora Bonorva, Micaela Brazerol, Elena de Carlo, Tim Fuchs, Dzhuliia Kolodko, Bin Martig, Johannes Reck, Thore Reigber, Réjane Schrago, Miguel Seabra, Svenja Steurer Jene, Janosch Tillich, Daniel Treystman, Silvan Weber, Nadia Westermann, Fabrizio Willi

• Durchblick 
  4 Students – Eleonora Bonorva, Daniel Treystman, Nadia Westermann, Johannes Reck

• PeARs 
  5 Students – Réjane Schrago, Micaela Brazerol, Nicola Bischof, Guan Arobei, Tim Fuchs

• Pirates of the ARibbean 
  5 Students – Silvan Weber, Bin Martig, Elena de Carlo, Thore Reigber, Janosch Tillich

• ARmageddon 
  5 Students – Dzhuliia Kolodko, Fabrizio Willi, Miguel Seabra, Svenja Steurer Jene, Sandro Beti

Collaboration Partner

• Sebastian Beetschen, CEO
• Lukas Franciszkiewicz, Designer

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% Process and Outcomes (Concept, MUI, Micro Interactions, Prototype)
• 30% Deliverables

Peer Group Deliverables

• 23.09.22, 17:00 - 3 Boards analizing of exisiting field
• 30.09.22, 17:00 - User Journey Maps with 1 persona of each peer + 3 Personas of each peer

Final Deliverables

All deliverables have to be uploaded to the filer until Monday 25.10.2022 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:

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.

Mentoring Peer Group: This format is organised by the students themselves. Each student presents his or her work to a peer group to which he or she does not belong. 5 minutes presentation and 5 minutes feedback.

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

Collaboration

In this module we will collaborate with the Swiss startup Almer Technologies.

About our collaboration partner

Almer Technologies is developing Augmented Vision products and software services to help connect experts and front line technicians in industries worldwide. Fueled by the growing demand for sustainable alternatives to business travel and remote assistance solutions in industry, Almer’s mission is to revolutionize customer support applications by offering an easy-to-use Augmented Reality (AR) platform. Almer is innovating the professional AR market with its patented optical system which offers outstanding image performance integrated in an incredible lightweight and compact AR headset.
In the event of a production problem such as a defective robot, the remote expert sees exactly what the local technician sees and is able to give instructions and virtually overlay relevant information (e.g. technical drawings, 3D models, animation and videos). Almer Solution is a simple all-in-one plan that enables companies to introduce, maintain and scale remote assistance services effortlessly. AR applications have the potential to fundamentally change the way companies can provide customer support. Almer’s aim is to overcome the serious limitations of currently available AR products and software applications.

Aim

Development of concepts and prototypes for remote assistance interfaces based on the AR glasses from Almer Technologies.

During this module, students create individual projects. Each student develops a concept and the corresponding prototypes. In order to exploit the creative potential, students join together in peer groups. Some submissions are made with the peer groups. The final deliverables are made individually.

Questions

• How could a remote assistance process work with AR glasses?
• How should a user interface for AR glasses be designed to ensure intuitiveness?
• Which interactions are possible with AR glasses and how could they work?

Vision

Remote Assistance aims to eliminate industrial interruptions more quickly. Each day of interruption costs the company concerned a lot of money, so that large ecological losses are accepted, for example by flying entire crews including equipment across the world. The elimination of the problem via remote maintenance using AR glasses could revolutionize this area and thus lead to a more positive ecological balance. In many cases, the problem could also be solved more rapidly. A win-win situation.

Kick Off

• Introduction into the module "Mobile User Interface"
  
• Introduction into the collaboration by Lukas Franciszkiewicz

Peer Group Mentorings

Have a look on the google calendar for your timeslot.

We expect some first insights into the analyzation of the existing field.

Qualitativ Interviews

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

22.09.22, 20:00-21:00 - Peer Group 01
Andreas Görner - Former head of troubleshooting @Skan AG

23.09.22, 13:00-14:00 - Peer Group 02
Nicolas Bignani - Field Engineer @Skan AG

23.09.22, 16:00-17:00 - Pirates of the ARibbean
Jordi Otto - Field Engineer @Skan AG

25.09.22, 13:00-14:00 - Peer Group 04
Antonius Tran - Qualification Engineer @Skan AG

Peer Group Deliverables on 23.09.22, 17:00

Analyzation of existing field: Create with your peer group 3 boards with reference projects and inspirations. Try out, be critical and analyze them. Take screen shots of the applications and mark/comment things. Write a short text of each project, which could answer following questions.

• What makes the application intuitive, what not?
• How was the experience while using it?
• What aspects could be implemented in your project and why?

Submit one PDF with 3 boards/pages directly on Pau below.

Source: Digital Innovation Playbook

Download Session: Interviews

Each peer group has 15 minutes to tell the others about their findings out of the interviews.

External Input: How to communicate your ideas & designs to developers with Florian Wille 

Room: Viaduktraum 2.A05
Time: Tuesday 27th of September | 13:00 – 15:30

In this short workshop, we will try to answer questions like:

• How can I communicate my design to developers?
• How can I specify the underlying ideas of my concepts, so my team and all stakeholders understand them?
• How do auto-layouts, interactive components, and all the other stuff work again?

Event Tipps

• Monday, October 3rd 2022
  «SUPERFRIENDS – THE POWER OF THE PRODUCT MANAGEMENT AND USER EXPERIENCE»
  Admission is free | registration is required
• November 16th 2022
  «Schema by Figma» is a virtual conference dedicated to design systems.
  Register for the virtual event.

The Figma Figma file we will be working in.

Peer Group Mentorings

Have a look on the google calendar for your timeslot.

We expect ideas from brainwriting and brainstorming translated into first sketches of wireframes. Furthermore we would like to see the current status of the user journey map.

Peer Group Deliverables on 30.09.22, 17:00

User journey map(s) with 1 persona of each peer: Think through the different scenarios together and show them on big board as a journey map. Try to make the different aspects of each persona path understandable.

Submit one PDF with user journey map(s) for 1 selected persona per peer directly on Pau below.
Further submit one PDF with 3 personas created by each student.

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

Mentorings on request

Write us an email to juergen.spaeth@zhdk.ch & marcial.koch@zhdk.ch 1 day in advance.

Mid Presentations

Each student has 5 minutes to present their project. Additional we have 4 minutes each for questions and short feedback.

We recommend to work with slides. Of course, if you find a better way to present your project, you are free to do so.

Expectation:

• creates a presentation in e.g. keynote
• briefly outline the most important points of the process in order to be able to understand the decision
• The main focus of the presentation is the conception of the wireframe
• The further processed skin designs 

External Input: Augment-it with Reto Grob 

Room: Kleiner Hörsaal 5.T09
Time: Wednesday 5th of October | 17:15 – 18:15

In a 40 minute presentation Reto Grob from the company Augment-It will give us a current insight into the field of Augmented Reality (AR) in business. In particular, he will address the following topics:

• Interaction Design in AR
• AR design processes based on own projects
• two- and three-dimensional design of user interfaces for AR
• tools, tips and tricks for designing in AR
  

This will be followed by 20 minutes of Q/A. Please visit the website of augment-it, browse through their projects and write down questions in advance.

Mentorings

Have a look on the google calendar for your timeslot.

We expect advanced wireframes and first mockups.

Mentorings

Have a look on the google calendar for your timeslot.

We expect advanced mockups incl. designskins, partly clickable.

Final Presentation

Each student has 7 minutes to present their project. Additional we have 2 minutes each for questions and short feedback.

Final Deliverables on 25.10.22, 09:00

Each student upload the following deliverables on the server

• 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

Feedback Session

Each student gets a 10 minutes timeslot for mentor feedback to their project.

AR related Ressources

For inspiration

• Create augmented reality work instructions that everyone understands in minutes with our GIRI app.
  
• Augmented Reality interactive inspection
• BBC – Civilisations AR
• Big Bang AR
• Clean AIR
• ARCube
• Training of chainsaw through VR
• 
  
• How AR can make us feel more connected to the world
  
• 
  

General

• Intuitive Interaction in Mixed Reality - Microsoft
• Start Designing and Prototyping - Microsoft
• Blog: Designing for HoloLens
• Augmented Reality Interaction - Mark Billinghurst (focus after slide 57)

Videos

• XR Design Guidelines - Ultraleap
• Mixed Reality Toolkit 2 - Microsoft

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