Ventana is designed to allow the presentation of any kind of information. It could be used to present fashion, jewelery or even a restaurants menu. Ventana can be installed in any shop window.
For our purposes Ventana is showing two products thematizing the US city New York. By the mere presence in front of the window a user can navigate and interactively experience the digital space.
Through the use of inexpensive technology it is affordable for a wide varaity of shops. It can be used for very small interaction with the shop windows content up to very complex games and e-commerce solutions.

Ventana is my bachelor project from my studies in the Interaction Design program at the university of the arts in Zurich. (iad.zhdk.ch)

Menthors
- Max Rheiner
- Karmen Franinovic

Processblog
http://ba.michaelfretz.com

Download
Download the bachelor thesis here

Color Browse is an iPhone application that allows you to easily discover the huge archive of the poster collection of the University of the Arts Zürich. As the average user is rarely familiar with the exact artist names or other search criteria, I decided to pursue an approach that let’s the user sample a color to discover posters containing mainly that sampled color. This approach makes it possible to surf endlessly through the posters and discover new posters and artists at the same time. If a user is interested in a poster he then can retrieve more information about it. Using the iPhones touch screen the user can move his finger over the surface of a displayed poster and a display shows the color currently below the finger. When the user removes the finger the color is selected and a new poster is loaded that has an average color value of the selected color.

Design
The user interface design concept is very minimal. Intentionally I only used little color to not distract from the posters. Additionally it was very important to me to design a usability and interaction model that is self-explanatory. Hence the user interface is very reduced and very simplistic, kept in bright colors to put the posters in the foreground.

Coding
For the implementation of the iPhone application, I used the iPhone SDK using Objective-C and the Cocoa Touch Framework. Diving into a new programming language, being a beginner again, is always hard. But soon I was able to apply the already familiar object oriented concepts and was able to get around the language fairly quickly. I will definitely implement more projects in it in the future using Cocoa Touch.

Further steps
The goal is to release the app in the iTunes AppStore. For that a couple of hurdles have to be mastered. One would be to clarify intellectual ownership legalities with the department of the university. Another one would be to optimize the server side application for better performance to make sure the server won’t go down should there be high volume traffic. Also on the application I have to do an optimization pass to make sure the memory is managed properly and remove any further bugs. And of course a thorough testing needs to be conducted on all current iOS devices.

Conclusion
Developing iPhone app is a very interesting subject and has big potential for interaction designers. With the Color Browse app i managed to create a different way of navigating a vast library of posters of the museum for design and I hope that its exploratory nature was and will be a lot of fun for the users.

Screencast

Documentatiom
Read a more detailed documentation of the project. (German only)

Together with my company Cubera Solutions GmbH I published a new client website. It was our first project together with our new graphic designer and friend Michèle Gnos. Building this website with her was a good and successful experience.
The website is about Ayurveda therapy in Indonesia, a special therapy for many different problems.

Wile building the design we tried to bring in the different “Doshas”:

• Vata(Air, Wind) and Pitta (Water), this part should be demonstrated with the blue areas in the design. Furthermore we added a zodiac sign. The sign of Libra which stands for balance and stability.
• Kapha is demonstrated with the use of the different brown colors.

We used plants in the design because its an important part of the Ayurveda therapy.

Another aspect of building the design was the simplicity. We focused on a easy to use layout and tried to make it a clean and fast loading design.

Behind the website we used the Cubera CMS, a content management system build by our company. This way we can provide a easy cms for our client without making the maintain for the client to complicated. The website is build in French and English.

Thanks to Michèle Gnos for this great Design and Dominik Brumm for his support with the CMS.

Visit the website here: www.sridhanwantari.com

About WUZU10

WUZU is a long-term collaborative program between the Jiangnan University and the Industrial Design department of the Zurich University of the Arts (ZHDK). Alternating every year, one university hosts a joint international summer school. Since its inception in 2004, the WUZU program has stated an example of successful collaboration between Chinese and European universities.
This years WUZU 2010 program was organised by the School of Design at the Jiangnan University in China.

The Subject was “YOU•WU”. The program started in June 2010, when 11 students and 2 professors from the ZHDK had the opportunity to fly to China and meet their educational partners; 20 students and 4 professors from the Jiangnan University. Together they conceived and designed a product that will be exhibited in September in the pavilion “Basel Geneva Zurich” at the Expo in Shanghai.
What does YOU•WU stand for
The topic YOU•WU is from Tao, a concept found in Taoism (http://en.wikipedia.org/wiki/Tao). It has two modalities, YOU and WU which you can also call “origin” and “effect”. In the Chinese culture this means the non-existence and existence. The goal was to create a product that incorporates YOU•WU.

The Project
We started our project with different expeditions, prospects  and ideas. While I was more concerned about building something with educational values and that makes people think, my Chinese friends Candy and Claire chose an approach that would be based on a more literal implementation of the topic.

On one of our many trips to the beautiful small towns in China we observed students buy cheap jewelery. I immediately thought that this jewelery is probably being worn once, maybe twice before it disappears somewhere in a box or even a trash can. What a contribution to our daily waste production. So many resources carelessly wasted for a trend or a brief moment. This experience made us focus on an idea to build a product that is environmentally friendly and at the same time allows for a critical statement over our waste society.

Together we developed a product made of ice. It’s jewelery completely made from frozen water. When worn, it slowly dissolves on it’s own without causing any impact on the environment. Consider a hot day at the beach. Jewelry made from ice is fashionable body cooling that is fun to wear and completely guilt free. It can be produced everywhere and does not require sophisticated production methods.

The state transformation from frozen to liquid symbolizes the phenomena of disappearing fish populations that is caused by our destructive behaviour. Our fast living and careless disconnection from mother nature may lead to a irreversible ecological catastrophe. Just like a piece of art made from ice needs care to not melt away, we need to finally take care to possible avoid what currently seems inevitable.

Our ice jewelry comes in three flavors: °fish | °rubbish | °fun

°fish is to make people aware of the fact that many sea animals are dying out. This can be because of overfishing or pollution. Either way, we need to somehow find the balance with our environment again otherwise we will destroy all sea life. Hence, °fish comes in the shape of sea-animals to remind people that we need to take care of our oceans and its animals before it’s to late.

°rubbish should let people understand that they have to keep rubbish away from the sea and the beaches. Today there are already huge patches of trash floating in the ocean, some bigger than the US state Texas (http://en.wikipedia.org/wiki/Great_Pacific_Garbage_Patch). This should not have happened and filling trash into our oceans can no longer be tolerated. The °rubbish line shall remind people that it is our responsibility to keep the sea and our environment clean from trash.

°fun is to simply enjoy the beach life. It’s decorative and fun to wear. It is to remind us all that, being environmentally responsible is still a lot of fun.

How did we work?
From start to completion the project could last a maximum of 5 days. Naturally, we were working long ours and it made us work hard. In collaborative and individual short brainstorming sessions we developed a bunch of ideas. When we had all our ideas written down, we discussed each one of them in detail and we chose our favorites. The selected ideas we then presented to our teachers. Which does not always yield a clearer result ;-)
With the chosen product idea we started a few rounds of experiments to find out how the cold material would behave, how to form it, etc. We built many shapes used many different materials to create wearable jewelry. To demonstrate the final product and the topic of the pollution, we produced a short stop motion video:

Looking back to this project.
It was a great experience to work hand in hand with Chinese Students. My team member Candy and Claire were both very open minded and fun to work with. We had a good time and we learned a lot about our cultural differences. Personally I gained a lot of value out of the intercultural collaboration and thus the project was a great success.

Video of the final product

Thanks for Matt from Yatah for helping me finding the words ;-)

What is “Who is Muh”?
“Who is Muh” is an interactive platform for the Migros brand Terra Suisse. This interactive site shows different animals from the Terra Suisse program and explains what each animal does and how the animals are being treated and raised by their farmers.

Terra Suisse Animals and there Language
In the section animals and their language each animal explains briefly how they are being treated and what they do all day long. Each animal explains some things about its live and the environment it grows up in.

Muh Mix
The Muh Mix is a game like part of the site. Per drag and drop users can place animals into a play-list and arrange the order of the animal voices. If a user is happy with his choice he can play the song he created, share it on Facebook or send it through an email to his friends. If a user thinks the song he just made is great he can download it as an mp3 or m4r (iPhone Ring-tone format).

iPhone App
In addition to this site there is an iPhone app, available on the iTunes Store. Install it and enjoy cute animals on your phone.

Coding Base
The hole application is build in Object Oriented AS3. I was able to apply some design patterns in this app, for example I applied the singelton pattern on the objects that store the data in the application. This enabled me easy access to all my data from anywhere in the application.. Everything language related is saved in XML and dynamicaly loaded by the migros website. The platform runs on a FreeBSD server managed by my own Company Cubera Solutions GmbH. For generating the mp3 and m4r we created a php script which concatted the different small animal sound fragments to one mp3 file and for the secondary download option as m4r we used ffmpeg to convert.

Looking back
After finishing this project I’m very happy with it. All requested functionality could be built even-though we didn’t know if it is possible in the first place. The site works quite good and its cute and fun to play with it.
Many thanks to Claude Ebersold from Jung von Matt for providing all the cute graphics and for pushing me to work all day and night. Also thanks to Nadja Holdener for helping us where-ever help was needed, for creating many of the animations, and especially for learning and handling SVN so quickly. A special thank goes to Matthias Adolf for leading the project and letting me be part of it. Thank you all!

Try it
You can try this application here (german)

I designed and developed the CD. The project is a Flash 8 project and includes Video, pictures and text information. I was responsible for the Master CD and the graphic design as well as the coding (AS2) :-) part.

For more information about NOMA visit and donate to http://www.noma-hilfe.ch

The content of this CD-ROM can be found here.

Last summer I had the change to be part of an international project at the university of the arts with Chinese students. In the project WUZU 2009 we worked in mixed groups of Chinese and Swiss students on Industrial Design projects. The topic was “Food and Drink”.

For our project about food or drink we came up with many different ideas. We thought about four main subjects. Times & Food, Eating on our way, Games & Food and Shapes of our Food. For the subject: “Shapes of our Food” we came up the idea of making a redesign of TOBLERONE. We thought it would be interesting to redesign the triangle and make it more interesting while it still has its original shape. The main goal would be to replace the blank triangle through an icon of some place of interests. The triangle will be still made with chocolate but may play with black and white chocolate or its structure. This could make a new TOBLERONE for special events or places of interest. The main target group will be tourists and event organiser.

After finding our idea we decided to build a prototype. First we designed the structure in Illustrator, afterwards we went to the workshop and used the laser cutter to bring our digital file to a real prototype. Afterwards we only had to paint the small pieces and we had our first prototype. Fortunately we could not eat it otherwise we would not have any pictures :-)

Set of possible triangles (btw: do you  see the bear in the Toblerone Logo)

The World Exhibition Shanghai triangle…

Annie, Michael, Epon, Connie, the EMAC team :-)

Overall it was a great experience. We had a lot of fun and ate plenty of TOBLERONE. I really enjoyed to work in my great team. This summer I will visit my friends in Shanghai again. This time my class will be the guests at the Chinese university and we will do some Industrial Design projects there.

Download PDF documentation

Das Spielfeld inkl. Tore:

Wir haben uns von einem klassischen Spielfeld abgelöst und suchten eine neue Idee. Wir haben uns an runde Grundformen gehalten und so unser Spiel konzipiert und umgesetzt. Das Fussballspielfeld ist Rund und auch die beiden Tore sind in dieser runden Form gehalten. Speziell an unseren Toren ist, dass man von beiden Seiten her punkten kann. Die Problematik an unseren Toren ist die Kommunikation mit der Anzeigetafel. Wenn ein Spieler (Avatar) ins Tor Läuft, giebt es auch ein Punkt. Dies konnten wir leider nicht anders lösen.

Die Spielstandanzeige:
Die Anzeige ist das Steuerungsinterface des ganzen Superball-Spiels. Man kann mit den Buttons der Anzeige ein neues Spiel starten und sich einen neuen Ball generieren lassen. Die Anzeigetafel wird von den beiden Toren benachrichtigt, wenn ein Ball ins Tor geschossen wurde. Darauf wird der Spielstand aktualisiert und angezeigt. So sieht man stets, wie das aktuelle Spiel steht.

Der Ball:
Der Ball ist ein physikalisches Objekt. Er reagiert auf die Distanz zu den Spielern. Wenn diese in den Umkreis von einem Meter kommen aktiviert er sich. Drückt man nun $ + Enter oder $$ + Enter oder $$$ + Enter fliegt der Ball davon. Die Flugbahn wird aus der Aktivierungspostion des Avatars und der Position des Balles berechnet. Dies kann zu lustigen Szenen führen wenn dann plötzlich der rollende Ball in eine völlig unerwartete Position fliegt. Das Ziel des Balls ist nicht eine völlig realistische Funktion sondern viel mehr ein möglichst grosser Spassfaktor mit der Unberechenbarkeit.

Die Hauptnavigation befindet sich diskret am unteren Bildschirmrand. Das Konzept sieht ausserdem als wichtigen Punkt vor, dass bei jedem Schritt nur die Interaktionselemente sichtbar sind, welche gerade benutzt werden können oder sonst von Bedeutung sind, indem sie beispielsweise auf etwas hinweisen. So werden die Elemente im Bild auf ein Minimum reduziert und die Übersichtlichkeit und Bedienbarkeit auf ein Maximum angehoben.

Grafisch ist unser Design den von der Firma Nimbus vermittelten sinnlichen Erfahrungen angepasst. Die verschiedenen Elemente sind in ihrer milchglasig/metallischen Erscheinung der Konnotation der beiden meist genutzten Materialien von Nimbus angepasst.

Startscreen

Kartenübersicht

LichtOn Dokumentation (PDF 2.3MB)

SourceCode auf Google Code http://code.google.com/p/hs08-nimbus/

Konzept und Idee:
Ein Touchscreen für ex libris Filialen zur Vor-Ort-Bestellung von Produkten aus dem Internet: www.exlibris.ch
Fokus haben wir bei unserem Prototyp auf die Sparte Musik gelegt – natürlich wäre es auch denkbar das Touchscreen um andere Produktkategorien wie Bücher, Videospiele, usw. … zu erweitern.

Während des ganzen Entwicklungsprozesses haben wir regelmässig Testbenutzer in das Projekt einbezogen.

Zu Beginn haben wir einen Paper-Prototyp entwickelt.

Den Paperprototyp haben wir mit verschiedenen Testbenutzer getestet. Das Feedback haben wir ausgewertet und anschliessend einen Prototyp in PHP und XHTML entwickelt.

Prototyp Test

Prototyp Test

Printscreen der Touchscreen Applikation

Im Hintergrund unserer Applikation verwendeten wir das PHP Last.FM API von matto1990.com. Mit Hilfe dieser Applikation konnten wir die Daten von Last.FM abfragen und für unsere Anwendung aufbereiten. Mit Script Aculos
(http://script.aculo.us) verwendeten wir das Javascript Framework welches Hauptsächlich für das Anzeigen der Daten und die Animationen eingesetzt wurde. Auch mit Javascript haben wir eine Tastatur entwickelt, welche auf dem Touchpanel eingesetzt wurde. Da wir eine Art Template verwendet haben konnten in unserer Entwicklungsphase mehrere Designs gleichzeitig auf der Applikation verwenden und diese mit einem JumpMenu einfach
umschalten.
URL zur Demo: http://ucd.michaelfretz.com

Download Dokumentation :Dokumentation (PDF 2.7MB)

Download: Keynote Präsentation (ZIP 2MB)

Team: Christoph Brandin, Liliane Krauss, Michael Fretz

Zusammen mit Nino Cometti und Philippe Meier habe ich am Ende des zweiten Semesters einen MP3 Player gestaltet. Der ganze Player soll aus einem elastischen Display bestehen, Lyrics anzeigen und einfach zu bedienen sein.

Plakat als PDF (1.8MB)

Präsentation als PDF (5.8MB)

Projekt Webseite: http://cede.michaelfretz.ch

KONZEPT
Sinn und Ziel eines web-basierten Auftrages für eine verlängerte Raumbelegung ist es, das alte, (Gelbe-) Papierzettel-System an der ZHdK abzulösen. Der momentan vorhandene Zettel soll durch ein ähnlich aufgebautes Web-Formular ersetzt werden. Dies vor allem aus dem Grund, dass es oft zeitlich nicht möglich ist eine Raumverlängerung einzugeben. Auch der Weg um Raumverlängerungen zu beantragen kann gespart werden da die Räume ortsunabhängig eingegeben werden können.
Momentane Situation
Um eine Raumbelegungsanzeige ausfüllen zu können, muss sich ein Student im Hauptgebäude momentan ins Erdgeschoss begeben, um bis 17.00 Uhr ein solches Papierformular auszufüllen, was oft aus Zeitmangel ein Problem darstellt.
Da viele andere Dienste wie z. B. Bücherbestellungen auch bereits in eine digitale Form überführt wurden, erscheint es nur logisch, diese Dienstleistung ebenfalls zu digitalisieren. Die Vorteile für Nutzer währen vielfältig: es kann ein Raum bei Bedarf (auch ohne den Unterricht vor 17.00 Uhr zu verlassen) verlängert werden, und dies auch, wenn sich der Student nicht in demselben Gebäude befindet, in welchem er ein Zimmer verlängern möchte. Durch die eindeutige Identifikation mittels ITZ-Login kann exakt ermittelt werden, wer genau den Raum reserviert hat. Die für Raumreservationen zuständige Person muss sich nicht mit diversen “Zetteln“ herumschlagen, sondern erhält auf digitalem Weg eine geordnete Liste aller zur reservierenden Zimmer, welche ohne grossen Aufwand an weitere Personen wie z. B. Securitas weitergeleitet werden kann. Zudem wären Listen aller in ZHdK-Gebäuden reservierten Räume in digitaler (per Email versendbarer Form) bereits von Beginn des Prozesses an verfügbar.

Webseite für die Verlängerung der Räume mit geöffneter Hilfe.

FAZIT
Abschliessend könnte man sagen, dass wir mit unserem Projekt sehr zufrieden sind. Anfängliche Schwierigkeiten mit WordPress wurden relativ schnell behoben. Wir haben alle viel gelernt, wie man beispielsweise seine eigenen Ideen im Team besprechen und argumentieren kann. Technisch haben wir uns weiter entwickelt und WordPress als etwas grösseres als nur ein Blogsystem kennen gelernt.
Falls das Projekt weiter entwickelt werden darf, müssten wir noch ein paar Dinge anpassen. Zum einen würden wir das Raumerfassungsscript selber programmieren und nicht auf das TDO Mini Form zurück greifen. Dies hätte den Vorteil, dass wir die Daten in einer eigenen Tabelle in der Datenbank speichern können, welche besser auf unsere Bedürfnisse angepasst ist. Weiter würden wir eine Möglichkeit einbauen, um Raumreservationen nach Datum anzuzeigen. Eine Druckansicht für den Hausdienst wäre auch noch in Planung.

Webseite zum selber ausprobieren: rum.Pirat

rum.Pirat Dokumentation (PDF 2.3MB)

Screencast:

Web Interfaces / Information Architecture
Dozent: Dipl. Des. Stefano Vannotti
Studenten: Michael Fretz | Raphael Habbegger | Tobias Koller | Philippe Meier

GUI des Adressbuchs
Das Adressbuch basiert auf einer Art Laufrad und einer Schnellwahl über Buchstaben auf der oberen Seite des Mobiltelefons. Das Laufrad kann mittels eines verschiebens der Schaltflächen mit dem Finger bewegt werden. Je nachdem wie schnell die Bewegung ist läuft das Laufrad schneller oder weniger schnell und rastet jeweils ein wenn das Laufrad kurz vor dem Stillstand und eine Schaltfläche im Vordergrund liegt.
Der Übergang zum SMS wird dann über ein Überblend Effekt gelöst.
Von Laufrad aus kann jeweils der Kontakt im Vordergrund angerufen beziehungsweise eine SMS gesendet werden.
Mit der „zurück“ Taste kommt man wieder eine Ebene zurück.

GUI der SMS Eingabe
Die SMS Eingabe erfolgt über eine QWERTZ Tastatur. Wird ein Buchstabe gedrückt wird der Button grösser und der Buchstabe wird auf dem Textbereich dargestellt.
Neben den Buchstaben werden noch alle Zahlen angezeigt.
Die Buttongrösse der einzelnen Tasten habe ich auf einem iPod Touch getestet. Die einzelnen Tasten sind zwar relativ klein, ich bin aber der Meinung das diese dennoch von der Grösse her funktionieren. Für das HTC Handy auf welchem der Prototyp läuft sind die Tasten relativ klein.

Die Space Taste ist die grösste Taste da diese relativ oft verwendet wird.
Farblich habe ich das ganze GUI dunkel gehalten. Dies mit dem Gedanken das viele Portable Geräte über einen Akku mit Strom versorgt werden und dieser dadurch weniger belastet wird.

Film über die Funktionsweise

PS: Falls noch jemand ein Smartphone gratis abzugeben hat auf dem ich zukünftige Systeme testen kann, würde ich mich sehr darüber freuen.. :-)

Die Arbeit, die eigentlich in einer 4er Gruppe gelöst werden musste, haben Mario von Rickenbach (Webseite) und ich alleine durchgeführt. Die Zusammenarbeit hat sehr gut funktioniert und wir sind mit dem Resultat der Arbeit zu frieden.

Hier noch die einzelnen Seiten.

Am zweiten Tag des Kurses galt es auf einen Würfel mit Zylindern zu zeichnen.

Auch eine Legofigur hat den Weg auf ein Blatt von mir gefunden. Mit den grössen Verhältnissen bin ich aber nicht sehr zufrieden.

Mein USB Stick welcher ich für die Übung mit den verschiedenen Obferlächen benutzt habe.

Ein Farbstiftspizer in einer Explosionszeichnung welche die verschiedenen Teile aufzeigen soll.

Ein weiterer USB Stick mit einer glänzigen Oberfläche und Schatten.

Als kleine Photoshopübung habe ich im Modul “Medien und Illustration” für den Text “Wenn fliegen schleichen” eine kleine Illustration erstellt. Der Text handelt über die unterschiedliche Zeitauffassung in unterschiedlichem Alter oder Gesundheitszustand. Mit meinem Bild wollte ich aufzeigen wie unterschiedlich doch die Zeit vergehen kann. Manchmal rast sie an uns vorbei und dennoch gibt es Tage da will Sie nicht umgehen.

Quelle der verwendeten Bilder: pixelio.de

3D – Farbwürfel welcher ich in Adobe Illustrator erstellt habe

Foto und Transformation welche ich für den 3D Würfel verwendet habe.

Farbwürfel mit kalten und warmen Farben.

Farbtiefenanalyse
Download Farbmethodik PDF (3.6MB)

Ich empfand das Modul als sehr interessant. Leider konnte ich nicht immer die gewünschte Zeit aufbringen um jedes Arbeit so zu gestalten wie ich es mir eigentlich vorgestellt habe. Wie Jan Schibli in seinem halbjährlichen Kolumne in der Zeitschrift Schiblianer immer so schön schreibt:”Die Freuden und Leiden eines Jungunternehmers…”

Ich möchte euch hier einen kleinen Auszug aus meiner Dokumentation zeigen.

Selbstverständlich könnt Ihr auch das ganze PDF herunterladen.

Link (6.6MB)

Selbstverständlich will ich euch diese Arbeiten nicht vorenthalten.
Die beiden Bücher habe ich jeweils während eines Kurses an der HGKZ bzw. ZHdK erstellt.

Ich danke Samuel Marty für die Unterstützung während des Peru Buchs und Daniel Volkart für seine Inputs während des Florida Buchs.

Zum Downloaden einfach auf den jeweiligen Namen klicken

Peru (noch nicht online)

Florida (PDF 2.5MB)