Mobile Website der Stadt Zürich - Blick hinter die Kulissen

55
Stadt Zürich. Spass. Mobile Website. Prototyping. Namics. Christina Stücheli. Informationsbeauftragte des Stadtrates. Raphael Stump. Senior Interaction Designer. 28. März 2012.

description

Ein Blick in den Enstehungsprozess des mobilen Webangebotes der Stadt Zürich: http://m.stadt-zuerich.ch und http://m.ewz.ch. Das Vorgehen für die Konzeption war stark auf die Arbeit mit Prototypen abgestützt. In sehr kurzen Iterationen -- teilweise gab es mehrere Prototypen pro Tag -- wurde das neue Angebot gemeinsam entwickelt und sofort in einem realen Umfeld getestet. Zusätzlich wurde einer grossen Gruppe von interessierten Personen über das Instrument des "Walk-In Labs" frühzeitig Zugang zum Arbeitsstand gegeben und wertvolles Feedback eingeholt. Willkommen in der typographischen Tradition der Stadt Zürich.

Transcript of Mobile Website der Stadt Zürich - Blick hinter die Kulissen

Page 1: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

Stadt Zürich. Spass.Mobile Website. Prototyping. Namics.

Christina Stücheli. Informationsbeauftragte des Stadtrates.Raphael Stump. Senior Interaction Designer.

28. März 2012.

Page 2: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

2 Fachtagung. Börse. Mobile. Namics.

Agenda. Aufgabenstellung.Antwort. Vorgehen.Vorschau.

Page 3: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

Aufgabenstellung.

VISION.

Page 4: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

4 Fachtagung. Börse. Mobile. Namics.

Partner.Stadt Zürich.

Page 5: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

5 Fachtagung. Börse. Mobile. Namics.

Hintergrund. Zürich wird positioniert als starker internationaler Standort für IT-Dienstleistungen und IT-Infrastruktur.

Page 6: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

6 Fachtagung. Börse. Mobile. Namics.

Massnahmen. Informationskonzept für mobile Endgeräte auf- und ausbauen.

Page 7: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

7 Fachtagung. Börse. Mobile. Namics.

Aufgabenstellung. Mobile Strategie.Mobile Website Stadt Zürich.Architektur und Content.

Page 8: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

8 Fachtagung. Börse. Mobile. Namics.

Aufgabenstellung. Mobile Strategie.Mobile Website Stadt Zürich.Architektur und Content.

Page 9: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

9

Heute.

Page 10: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

10 Fachtagung. Börse. Mobile. Namics.

Herausforderungen.

Page 11: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

11 Fachtagung. Börse. Mobile. Namics.

Vision.Strukturdenken.Nutzerzentriert.Beispielhaft.Innovativ.

Page 12: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

Antwort.

GRAPHICDESIGN.

Page 13: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

13 Fachtagung. Börse. Mobile. Namics.

Voilà.

Page 14: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

14 Fachtagung. Börse. Mobile. Namics.

Typisch Zürich.

Page 15: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

15 Fachtagung. Börse. Mobile. Namics.

Steueramt.

Page 16: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

16 Fachtagung. Börse. Mobile. Namics.

Parkieren.

Page 17: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

17 Fachtagung. Börse. Mobile. Namics.

Seitwärts parkieren.

Page 18: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

18 Fachtagung. Börse. Mobile. Namics.

ÖV.

Page 19: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

19 Fachtagung. Börse. Mobile. Namics.

ÖV.

Page 20: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

20 Fachtagung. Börse. Mobile. Namics.

Page 21: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

21 Fachtagung. Börse. Mobile. Namics.

Bookmarking.

Abfall /Entsorgung

StadtZürich

Freizeit

Page 22: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

22 Fachtagung. Börse. Mobile. Namics.

Bookmark City.

Page 23: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

23 Fachtagung. Börse. Mobile. Namics.

Graphic Design.Typisch Zürich.Konsequent.Einzigartig.Stilsicher.Mobile.

Page 24: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

Vorgehen.

PROTOTYPING.

Page 25: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

25 Fachtagung. Börse. Mobile. Namics.

Ideation.

Page 26: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

26 Fachtagung. Börse. Mobile. Namics.

Listen. Fertig.

Page 27: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

27 Fachtagung. Börse. Mobile. Namics.

Tastatur ist doof.

Page 28: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

28 Fachtagung. Börse. Mobile. Namics.

Ich bin ein Telefon.

Page 29: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

29 Fachtagung. Börse. Mobile. Namics.

Ideation.

Page 30: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

30 Fachtagung. Börse. Mobile. Namics.

Züritütsch.

Page 31: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

Bookmarks.

Page 32: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

32 Fachtagung. Börse. Mobile. Namics.

Alles Abgedeckt.

Page 33: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

33 Fachtagung. Börse. Mobile. Namics.

Alles Abgedeckt.

Frustration.

Page 34: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

34 Fachtagung. Börse. Mobile. Namics.

...

Page 35: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

35 Fachtagung. Börse. Mobile. Namics.

Inspiration.

Page 36: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

36 Fachtagung. Börse. Mobile. Namics.

Grosse Klappe.

Page 37: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

37 Fachtagung. Börse. Mobile. Namics.

Aha!

Page 38: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

38 Fachtagung. Börse. Mobile. Namics.

Accessibility + Style

Page 39: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

39 Fachtagung. Börse. Mobile. Namics.

= Spass.

Page 40: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

40 Fachtagung. Börse. Mobile. Namics.

Schulterblick.

Page 41: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

41 Fachtagung. Börse. Mobile. Namics.

Walkin Lab.

Page 42: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

42 Fachtagung. Börse. Mobile. Namics.

Prozess.

Page 43: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

43 Fachtagung. Börse. Mobile. Namics.

Prototype 33.

Page 44: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

44 Fachtagung. Börse. Mobile. Namics.

Abfall / Entsorgung.

Page 45: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

45 Fachtagung. Börse. Mobile. Namics.

Page 46: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

46 Fachtagung. Börse. Mobile. Namics.

Moods.

Page 47: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

47

Vorgabe.

Page 48: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

48 Fachtagung. Börse. Mobile. Namics.

Inspiration.

Page 49: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

49 Fachtagung. Börse. Mobile. Namics.

Reduktion.

Page 50: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

50 Fachtagung. Börse. Mobile. Namics.

Übersetzung.

Page 51: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

51 Fachtagung. Börse. Mobile. Namics.

Finales Design.

Page 52: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

52 Fachtagung. Börse. Mobile. Namics.

Prototyping.Zuhören.Beobachten.Ausprobieren.Scheitern.Loslassen.Spielen.

Page 53: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

Vorschau.

HTML.

Page 54: Mobile Website der Stadt Zürich - Blick hinter die Kulissen

Vielen Dank ans Stadt Zürich & Namics Team.

[email protected]@namics.com

© Namics / Stadt Zürich

Page 55: Mobile Website der Stadt Zürich - Blick hinter die Kulissen