Applicationdesign
Redesign

Neugestaltung einer Online-Druckerei Website

Wir optimieren die Website „Wir machen Druck” und setzen dabei den Fokus auf Struktur und Design. Unser Ziel ist es, die Benutzerfreundlichkeit zu optimieren.
Kontext

3. Semester

Application Design 1

Team

Anja Gutmann

Benedict Holland

Supervisor

Sandra Raab

Motivation

Unser Ziel ist es, ein optimales Erlebnis für jeden Benutzer zu schaffen.

Freundliche und geordnete Gestaltung
Vereinfachung des Bestellprozesses
Zufriedener Endkunde

Verbesserung der Effizienz der Navigation für eine schnelle Suche.

Megamenü für schnellen Zugriff auf alle Produkte
Branchen und Themenbereich
Filtermöglichkeiten für eine relevante Suche

Wie können wir es den Nutzern ermöglichen, Druckprodukte einfach zu finden, anzupassen und zu bestellen?

Prozess
Wir haben den UX-Research-Prozess gestartet, um die Website zu redesignen. Dazu haben wir zunächst den aktuellen Screenflow analysiert. Die Wettbewerbs- und Zielgruppenanalyse lieferte uns die entscheidenden Erkenntnisse für die Integration neuer Funktionen und Nutzervorteile.

Kanomodell

Wir haben neue Features und bestehende Funktionen in verschiedene Kategorien eingeteilt. Basic – essentielle Funktionen, Satisfier – Funktionen, die die Leistung verbessern, Delighters – Funktionen, die begeistern, Danger – Funktionen, die möglicherweise abgelehnt werden, und Userless. Im nächsten Schritt wurden die Funktionen in einem Kano-Modell klassifiziert.

Navigationsstruktur

Die Informationsarchitektur wurde definiert und die Navigation optimiert, um eine intuitive Benutzerführung zu gewährleisten. Außerdem haben wir die Wege zum gewünschten Printprodukt verkürzt, um die Benutzererfahrung zu verbessern.

Design

Farbenauswahl

Als Akzentfarbe wurde ein warmes Orange gewählt, um Energie und Wärme zu vermitteln und eine lebendige Atmosphäre zu schaffen. Die Kombination mit verschiedenen Grautönen erzeugt eine neutrale und freundliche Stimmung, die auf eine breite Zielgruppe ansprechend wirkt.

Schriftauswahl

Für die Schriftart unserer Website haben wir uns für "SF Compact Display" entschieden, eine moderne, gut lesbare Schriftart, die speziell für digitale Bildschirme optimiert wurde. Sie wurde von Apple als Teil der Schriftfamilie "San Francisco" entwickelt und bietet eine professionelle Ästhetik sowie eine verbesserte Lesbarkeit und Benutzerfreundlichkeit.

Illustrationen und Icons

Um ein einheitliches und ansprechendes Design zu gewährleisten, wurden Illustrationen im One-Line-Stil zur klaren Kommunikation von Kategorien und Produkten verwendet. Icons im gleichen Stil ergänzen die Bestseller-Produkte sowie Menüpunkte, Schaltflächen und Produktabbildungen und runden das Erscheinungsbild der Website ab.

Mockups

Um unseren Gestaltungsstil auch in den Produktbildern beizubehalten, haben wir entsprechende Mockups erstellt und gemäß unserem Styleguide angepasst. Die Auswahlkriterien für die Mockups entsprachen dem definierten Stil und der Ästhetik, wobei klare und moderne Darstellungen bevorzugt wurden.

Logo

Das aktuelle Logo von »Wir machen Druck« wirkt farbenfroh und verspielt, weshalb wir eine Neugestaltung anstrebten, um es in das neue Design zu integrieren.

Video
Funktionen
Die Neugestaltung umfasste die gesamte Website. Wir haben zahlreiche Funktionen und Prozesse komplett überarbeitet. Wir haben das Megamenü hinzugefügt, um die störende Leiste am linken Bildschirmrand zu vermeiden und eine schnelle Suche zu ermöglichen. Der Bestellvorgang wurde geändert, ebenso das Profil mit der Ansicht der bisherigen Bestellungen. Mehr dazu weiter unten.

Produktfilter

Wir haben einen Produktfilter auf der Kategorieseite implementiert, der es den Nutzern ermöglicht, gezielt nach den gewünschten Produkten zu suchen. So können sie sich nicht von der Vielfalt überfordert fühlen. Die schlicht gestalteten Mockups geben dem Nutzer eine klare Vorstellung davon, wie das Druckprodukt aussehen wird. Zusätzlich werden unter den Produktdetails relevante und passende Produkte angezeigt, um dem Nutzer eine noch größere Auswahl zu bieten.

Produktkonfiguration

Wir haben die Produktseite verbessert und führen Nutzer nun Schritt für Schritt durch die Auswahl von Formaten und Papieren. Statt umfangreicher Dropdown-Menüs sehen Sie nun eine klare Übersicht des Prozesses und können Ihren Fortschritt rechts in einer Liste verfolgen.
Die Auswahl der Auflage ist ein Highlight. Nutzer geben die gewünschte Menge ein und erhalten automatisch die nächsthöhere oder -niedrigere Option, falls diese nicht verfügbar ist. Die neue Produktseite bietet drei Services, die Sie sich nicht entgehen lassen sollten: Wir checken Ihre Druckdaten, gestalten Ihre Drucksachen online und halten Sie an die Richtlinien für Druckdaten.

Online Gestalten Tool

Die Auswahl der Auflage ist ein Highlight. Nutzer geben die gewünschte Menge ein und erhalten automatisch die nächsthöhere oder -niedrigere Option, falls diese nicht verfügbar ist. Die neue Produktseite bietet drei Services, die Sie sich nicht entgehen lassen sollten: Wir checken Ihre Druckdaten, gestalten Ihre Drucksachen online und halten Sie an die Richtlinien für Druckdaten.
Nächstes Projekt