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

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

  • Upload
    namics

  • View
    1.213

  • Download
    4

Embed Size (px)

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.

Citation preview

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