Basic GUI 2019

The module Basic GUI includes two courses. One course is "Web Technologies" and the other is "Basic GUI" project course. 

Link to course overview: "Web Technologies"

Lecturers

• Prof. Jürgen Späth
• Martin Dusek
• Jonas Scheiwiller

Students

01 Sophie Anderhub, 02 Adrienn Bador-Pek, 03 Damaris Büchner, 04 Andreas Bütler, 05 Roman Engler, 06 Fabian Frey, 07 Tim Fuchs, 08 Andreas Fürer, 09 Andy Kirk, 10 Yao Liu, 11 Sonjoi Nielsen, 12 Shafira Maharani Nabilia Nugroho, 13 Paméla Schmidinger, 14 Yangzom Sharlhey, 15 Danuka Ana Tomas, 16 Tamara Trabucco, 17 Zoë Urand

Groups

3 x 3 Students, 2 x 4 Students

Gruppe 01: Sophie Anderhub, Yao Liu, Shafira Nugroho
Gruppe 02: Roman Engler, Tamara Trabucco, Paméla Schmidinger
Gruppe 03: Zoe Urand, Fabian Frey, Damaris Büchner, Yangzom Sharlhey
Gruppe 04: Andreas Fürer, Danuka Tomas, Andy Kirk
Gruppe 05: Andreas Bütler, Sonjoi Nielsen, Adrienn Bador-Pek, Tim Fuchs

Period

12th of April – 7th of June

Attendence

In the contact hours a minimum attendance of 80% is required to pass the module. Contact hours: classes, kick-off, input session, mentoring, presentation 

Module valuation key

Web Technologies: 25%
Basic GUI project: 75%

Basic GUI project

Over the course of five weeks, students will redesign the interface of the ITZ Leihs system. Leihs is an open source equipment booking and inventory management system. 

Cooperation Partner

ZHdK Informationstechnologie-Zentrum (ITZ)

• Nadja Weisskopf – Product Owner Leihs
• Barbara Berger – Leitung ITZ

Institutions use Leihs

• ZHdK Zürcher Hochschule der Künste
• HKB Hochschule der Künste Bern
• ZHAW Zürcher Hochschule für Angewandte Wissenschaften
• F+F Schule für Kunst und Design
• Universität Basel
• Hochschule Luzern – Design & Kunst
• HTW Hochschule für Technik und Wirtschaft Chur
• PHZH Pädagogische Hochschule Zürich
• HEIG-VD School of Business and Engineering Vaud – Yverdon-les-Bains
• Ringier
• Staatliche Hochschule Für Musik Trossingen
• FH Vorarlberg
• University of Applied Sciences Europe – Berlin
• KONSTFACK University of Arts, Crafts and Design – Stockholm
• University of Brighton
• University of Worcester
• Middle Tennessee State University

Institutions plan to use Leihs

• ETH Zürich – end of 2019
• Schule für Gestaltung Bern und Biel – end of 2019
• Willem de Kooning Academy 
Rotterdam University of Applied Sciences – end of 2019
• Stadtpolizei Zürich – end of 2019

Phases

Explore 

The explore phase helps us to get to know the user and to grasp his needs, preferences and decision-making principles. Only when we know our user well and have really understood his problems, we can develop an idea and later a product that convinces and excites him.

• Desk Research, Field research, Interviews, extremely users interviews 
  
  

Create

• Brainstorming, Mind Mapping, Sketching, etc.
  Take one or more of the above methods to rethink the scenario. Be "wild" and come back with innovative and striking solutions of which you hadn't thought of before.
  
  
• Wireframe Screen Flow Diagram, Mood board
  Draw individual screen wireframes that are connected with each other to show the flow in your application. Traditionally, the mood board is a big collage consisting of photos, apps, texts, illustrations and other materials that show the look and feel. The mood board shows links between the things and supports the imagination of new ways.
  
  
• Design GUI
  Using the mood board, a skin for the application is developed. Software: Photoshop, Illustrator, Sketch, Adobe XD, etc.
  
  
• Click-Dummy
  A clickable mockup of the final UI. Software: Flinto, Framer, Origami, Invision, Principle, Flinto, Adobe XD, etc.
  
  

Evaluate

• User-test
  The Click-Dummy is tested with three test users that solve a typical exercise. They are filmed and asked to think aloud while using the app.

Deliverables

See the IAD documentation guidelines for the standard material.

• Documentation; format: PDF
• Video / Screencast; add the IAD intro and closing credits to your videos
• Video / User-test
• Images (Screenshots & Usage Scenarios); approx. 10 representative images of the project
• Text (project title, short description, project description)
• Click-Dummy

All deliverables have to be uploaded to the filer until Monday 10.06.2019 at 9 am.

Grading

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

Final presentation: 20%

Final work (Concept, GUI, Click-dummy): 50%

Deliverables: 30%

Downloads & Links

Slides Kick-Off

Digital Innovation Playbook

Schedule

This schedule is not final. Changes reserved.

JSP: Jürgen Späth, MDU: Martin Dusek, JSC: Jonas Scheiwiller