Willkommen auf unserem Seminar-Blog

Immer auf dem aktuellen Stand bleiben

Dieser Seminar-Blog befindet sich noch im Aufbau und wird in den kommenden Tagen entsprechend verfeinert.

Member Login

Lost your password?

Registration is closed

Sorry, you are not allowed to register by yourself on this site!

You must either be invited by one of our team member or request an invitation by email at viad.info {at} zhdk {dot} ch.

Gruppe 4 (Dominik, Fabian, Rafael)

Gruppe 4

Studierende: Dominik Stucky, Rafael Schneider, Fabian Scheiwiller

Schritt 1: Systemanalyse & Kontextrecherche

[Zeige Bilder-Liste]
Wir analysierten das Front- und Backend des Leihs 2.9 und notierten uns, was nicht funktioniert oder unklar gelöst ist. Später untersuchten wird bereits bestehende Systeme (Digitec, BOL, Amazone etc) bei denen wir einige gute Ideen erkannten und in unseren Prototyp einfliessen lassen konnten. Das gesamelte Material befestigten wir an einem Stück Schulzimmerwand. So liess sich das Gesammelte übersichtlich und auf Augenhöhe anbringen.

Schritt 2: Interviews & Beobachtung

[Zeige Bilder-Liste]

Die Beobachtung und Interviews haben wir zuerst in der AVZ-Ausleihe durchgeführt und Pius bei der Arbeit beobachtet und befragt. Hier war uns wichtig die Verbesserungsvorschläge von Administratoren zu sammeln und ihnen bei der Ausleihe, Rücknahme und Bestätigung der Bestellung über die Schultern zu schauen. In einem weiteren Schritt haben wir zwei User-Tests durchgeführt mit Screen Capturing, um weitere Daten und Inputs über das bestehende Frontend und deren Flaschenhälse zu erhalten. Die beiden Befragungen dauerten jeweils ca. 1 Stunde und waren äusserst aufschlussreich, was an gemeinsamen Ansichten, aber auch an persönlichen Präferenzen betraf.

Schritt 3: Ideengenierung, Sketching, Konzeption

[Zeige Bilder-Liste]
Für das Sketching benutzten wir grosses Papier, das als Basis diente. Darauf klebten wir A4 Blätter und Post-Its.

Schritt 4: Paper Prototyping & Wireframing

Basierend auf den Konzeptideen haben wir aus verschiedenen Papier-Prototypen eine finale Version erstellt, welche wir als Basis für die Entwicklung des HTML-Prototypen verwendeten. Den Gesamtablauf auf Papier haben wir diverse Male revidiert und verfeinert.
Verschieden Versionen und Ideen des Prototyps skizzierten wir auf Papiere. Diese brachten wir anschliessend an den Zimmerwänden an. Als wir mit unserer Seite konkreter wurden, zeichneten wir ein Wireframe auf Papier und ordneten es in einer logischen Abfolge an.
[Zeige Bilder-Liste]

Schritt 5: Entwicklung

[Zeige Bilder-Liste]
Aus Handskizzen wurden Photoshop Entwürfe angefertigt, die erste Darstellung eines künftigen Prototypen ermöglichten. Es wurden an Themen zur Farbpalette, Font, Anordnung etc. gearbeitet. Im letzten und intensivsten Schritt wurde das Konzept mittels HTML/CSS/JavaScript übertragen, um ein funktionierendes Frontend für Leihs 3.0 zu gestalten. An einer Übersicht für das Backend 3.0 wurde ebenfalls gearbeitet. Die Ideen wurden in HTML übertragen, sodass schlussendlich eine Art Oberflächenskin kreiert wurde.

Schritt 6: Evaluation

[Zeige Bilder-Liste]
In verschiedenen Evaluationsphasen haben wir die Funktionalität verfeinert und das Design überarbeitet. Was am Anfang der Entwicklung visuell noch ziemlich lose zusammenhing, wurde durch die Überarbeitung konsistenter und folgte einem einheitlichen Design. Im Zusammenhang damit haben wir den Farbcode verfeinert und besser in Relation zu den Funktionalitäten gebracht. Auch bei der Benutzerführung sind wir noch einige Verfeinerungsschritte weitergegangen.

Schritt 7: Resultat

Screencast Redesign leihs Ausleihsystem . Download Präsentation: Redesign leihs Ausleihsystem (PDF) Download HTML: Prototype leihs Ausleihsystem (ZIP) Dokumentation:  Leihs 3.0 Dokumentation Online-Demo: digitales-handwerk.ch/leihs/