Mobile User Interface 2019

MORI Building DIGITAL ART MUSEUM: teamLab Borderless

Enrich the Experience – Navigation App for Digital Art Zurich

In spring 2020, the Digital Art Zurich is happening for the first time. In Zurich West, exhibitions, talks and parties will be taking place in galleries and museums as well as in clubs and public spaces. Visitors can enjoy the work of world-renowned artists and upcoming stars from the scene.

The mobile app you will be designing should provide visitors with information about the works and artists, guide them to the locations and let them participate in voting for the audience award. Besides the design guidelines from DA Z, there are no limitations to what you can do. Please depart from tradition, explore the possibilities of a mobile phone with all its features and sensors and show how to make a great navigation experience through a festival for digital art today.

Time Period

17th of September – 18th of October 2019
Calendar | download as ical

Lecturers

Jürgen Späth | juergen.spaeth@zhdk.ch
Martin Dušek | martin.dusek@zhdk.ch

Material

• DA Z presentation (PDF)
• DA Z design guide (PDF)

Recommended Software

Visual Design

• Sketch
• Figma
• Invision Studio
• Framer X

Mockup, Animations & Transitions

• Principle
• (Invision Studio, Framer X, Figma, Sketch)

see a more comprehensive list of UI Prototyping tools

Week 1 (CW38) – Requirements Gathering & Design Concept

Introduction to Alfred Escher and his life. This introduction will be made through different events. On the first day there are two kick-off events. The first will be held internally by IAD and the second will be together with trends & identity. In the afternoon, Escher biographer Prof. Joseph Jung giving a lecture on Alfred Escher. Then there is a short introduction to the BUXX app. On the second day, an individual city walk with the BUXX app will take place followed by an introductory event. On the third and last day of the first week, there is a tour of important places by Alfred Escher. In the afternoon, an exchange with trends & identity students takes place in groups. 

The first week is fully focused on getting more involved in the topic and gathering requirements.

Deliverables Week 1

To have some fantastic ideas for an implementation in mind.

Week 2 (CW39) – Requirements Gathering & Design Concept

The third week starts with a concept presentation by Trends&Identity. This is a good opportunity to look for possible collaborations or inspirations for your independent concept. The collaboration with Trends&Identity is optional, even though we strongly encourage collaborative projects. We ask you to develop three concepts and present them in the form of sketches, simple enough so someone new to the topic can understand your idea.

Input Slides – Native Apps vs. Progressive Web Apps – Download

Deliverables Week 3

Three Concepts in the form of sketches

Week 3 (CW40) – Design Concept and Wireframe & Testing

The fourth week starts with an input event on the theme of UI-sketching, wireframing and testing. You will pick one of your concepts in order to refine it.

Download

Deliverables Week 4

A digitally worked out concept with sketches. 

Week 4 (CW41) – Application of Designlanguage & Microinteractions

In the fifth week, there will be an input on the topic design language before we start the phase where this gained knowledge will be applied.

Download

Deliverables Week 5 

Elaborated and tested wireframe.

Week 5 (CW42) – Design Documentation & Communication

In the last week, the application is refined and documented. On Thursday afternoon a final presentation will take place.

Final deliverables

Complete your high-fidelity prototype to reflect your complete user journey. Document your design decisions in the styleguide and prepare a project presentation.

• Design documentation / Style guide (PDF)
• Final presentation (Keynote)
• Mockup & screencast of interaction with the mockup
• 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”)

Schedule

Below you'll find the schedule of this module. For the bold appointments, we'll all meet together, while the underlined appointments are 
individual meetings. The brightly marked fields represent the focus of these days.

JS: Jürgen Späth, MD: Martin Dušek