Webdesign

Design Guide - Online Druckerei

In diesem studentischen Projekt ging es um die Erarbeitung und Gestaltung eines Redesigns für eine Online-Druckerei. In diesem Kontext habe ich durch User-Research und Nutzertests herausgefunden, wo Probleme der bestehenden Website liegen und konnte so einen Design-Guide erarbeiten.

Meine Rolle

Das Projekt ist während des sechsten Semesters an der Hochschule in einem Kurs entstanden, der den Schwerpunkt Screen- und Interaction-Design hatte.

User research
Interaction Design
User Experience Design
Web design
Prototyping

Über das Projekt

In diesem Projekt bestand meine Aufgabe darin, eine Website neu zu gestalten und aufzuwerten. Ich wählte dafür die Website einer Online-Druckerei, um sie in Hinblick auf visuelle und funktionale Probleme zu analysieren. Zusätzlich ließ ich während des Gestaltungsprozesses, Benutzer diese Webseite testen und recherchierte welche Probleme sich bei der Nutzung der Website ergaben um genau für diese Probleme in meinem Redesign eine Lösung zu finden. Anschließend erstellte ich User Journeys, Personas, Szenarien und Wireframes, um herauszufinden, welche Bereiche verbesserungswürdig waren und um mein Redesign auf einem soliden Grundkonzept aufzubauen. Zum Schluss entwickelte ich auf dieser Grundlage einen übersichtlichen ‚Step-by-Step Design-Guide‘, mit dem Nutzer:innen intuitiv ein Print-Produkt erstellen können.

Ziel, Problem, Lösung

Mein Ziel war die Gestaltung einer Website, die verschiedene Arten von Erlebnissen gleichzeitig vereint. Die meisten User, die die ursprüngliche Website getestet haben, taten sich mit der Navigation und dem Erstellen eines idealen Produkts schwer. Deshalb habe ich einen step-by-step Guide gestaltet, durch den ein richtungsweisendes Erlebnis entsteht, das Nutzer:innen durch den Bestell- und Gestaltungsprozess leitet.

Persona und Szenario

Die perfekte Nutzerin

Strategie

Mission, Vision

Wireframing

Lo-fi and Mid-fi Wireframes

Style guide

Farben und Typografie

Logo design

Concept and visual design

Grafisch ist das Logo dem Aussehen eines Papiers nachempfunden.
Das Wort "Logo" wirkt ausgeschnitten und unterstreicht den analogen und haptischen Charakter der Produkte des Unternehmens.
So verbindet sie traditionelle Werte der Druckerei mit modernem Design und dem Gesamtbild der Website.
Auch das Web-Design ist modern und minimalistisch. Der schlichte Papierhintergrund und die Ui-Elemente im Stil einer Visitenkarte (siehe nächster Abschnitt) verbinden auch hier Modernität und Tradition.