Deutschlands größtes Verbraucherportal bekommt einen Relaunch

Case Study

Skills: Design Thinking Prozess
Empathy, Define, Ideate, Prototype‍, Test

UX-Methodiken
Market & User Research, User Interviews, Thematic Analysis, Quantitative & Qualitative Data, Data Visualisation, Affinity Mapping, User Personas, Problem Framing, Competitive Analysis, Brainstorming, MVP & Feature Prioritisation, Sketching & Wireframing, Branding & Visual Identity, Information Architecture, User Flows, Design System, LoFi Mockups, Prototyping, HiFi Mockups, User Interface Design, Interaction Design, Usability Testing

Tools: Sketch, Illustrator, Photoshop, InDesign, Zeplin.io, Slack, Jira und Confluence

Über Testberichte

Testberichte ist ein Verbraucherportal auf dem Menschen Produktentscheidungen treffen. Es gibt dem Käufer durch professionelle Bewertungen und Kommentare anderer Nutzer Orientierung bei der Kaufentscheidung.

Produktentwicklung:

1 x Head of Product
2 x Konzept
1 x UX/UI Design 
1 x Icon Design
2 x Research
1 x Projektmanagment
1 x A/B-Test
———————————–
+ Redakteure, Programmierer und Analysten

UX Challenge
Das alte Portal für die unterschiedlichen Endgeräte wie Tablets und Smartphones optimieren und bestehende Funktionen und Bannerplätze auf das neue Design anpassen.

UX Ziel
Eine Webseite erschaffen, die verschiedenen Zielgruppen auf verschiedenen Endgeräten Freude bei der Produktsuche bereitet und zur Anlaufstelle Nummer 1 wird, wenn es um Produktentscheidungen geht.

Die Herausforderungen
• Heranführung der Inhaber an eine moderne Produktentwicklung
• Entwicklung und Umsetzung eines MVP
• Vereinbarung von Stakeholder und Produktanforderungen

Die größte Herausforderung war es, die vielen Bannerplätze in die neue Seite zu integrieren. Danach folgten neue Funktionen, die wir in Form von Design Sprints in die Plattform integrierten. Des Weiteren war ich für das neue Corporate Design verantwortlich. Die alte Farbe Orange wurde durch die Farbe „Petrol“ ersetzt. Testberichte bekam ein neues Logo und eine neue Schrift.

Die Vision
Testberichte ist das vertrauenswürdigste, deutschsprachige Verbraucherportal für professionelle Testergebnisse im Internet. Vor jedem Produktkauf informieren sich die Menschen zuerst auf Testberichte.de über dessen Stärken & Schwächen.

Der Design Prozess

1. Research Phase

  • Wettbewerbsanalyse, SWOT-Analyse, Sinus-Milieus, Persona & Moodboard

2. Analyse Phase

  • MVP Projekt, um erstes Insights zu gewinnen, „Landingpage entwickeln“
  • SEA-Kampagne für die Landingpage (echte Nutzung, keine Tester über Google-Anzeigen akquiriert)
  • Remote-Tests (Interviews mit Nutzern: Screensharing, Aufgaben gesteuert)

3. Design Phase

  • Neues Corporate Design entwickeln (Logo, Farben, Schriften, Icons…)
  • Styleguide entwickeln
  • UX- und UI-Konzept für die Plattform entwickeln

4. Ideation Phase: Design Sprints

  • Problem verstehen und analysieren (Interviews mit Nutzern und Stakeholdern)
  • Ideen entwicklen (Wireframes) und Ideen auswählen
  • Prototypen bauen und testen

5. Umsetzungsphase

  • Verschiedene Konzepte entwickeln für A/B-Tests
  • Programmierung der unterschiedlichen Versionen

6. Analyse und Test Phase

  • A/B-Testing, Datenauswertung und weitere Nutzertests

UX/UI Design: Responsives Design
(Flexbox)

Neues Corporate Design:
Aus Orange wurde Petrol

Wortbildmarke
Bei der Bildmarke entschied ich mich für einen Kringel. Ich analysierte das menschliche Verhalten von Nutzern wie sie sich Produkte merken. Relativ schnell war klar, dass Nutzer gerne Sachen einkringeln.

Mockups & Wireframes

In unzähligen Iterationen haben wie die Produktkacheln neu gestaltet, getestet, gemessen und optimiert.

UX Design in Sketch

Kollaboration zwischen Design und Entwicklung in Zeplin.io

Social Media Kanäle und Newsletter

Guerilla-Research in Berlin

Fotos: Guerilla Research im Alexa in Berlin zum Thema „Laufschuhe“.
Durchgeführt von Mariana und Franzi. 

Die alte und die neue Welt

Ideation Projekte

Parallel zur regelmäßigen Analyse und Optimierung der Plattform durch das BI-Team kümmerte sich die Produktentwicklung und um neue innovative Ideen. In Design Sprints und Ideationformaten analysierten wir die unterschiedlichsten Kaufentscheidungsprozesse.

Live Version: Mai bis Dezember 2017

Der Sichtbarkeitsindex nahm bei Testberichte und seinen Wettbewerbern (idealo.de und notebookcheck.com) deutlich ab. Grund dafür war das Google Panda-Update der den Suchalgorithmus von Google beeinflusst. Contentportale profitierten von den Google Update, Websiten mit minderer Qualität oder wenig Inhalten wurden hingegen abgestraft.

Da Testberichte zu dem Zeitpunkt zum größten Teil aggregierte, wurde die Plattform abgestraft und nicht mehr wie vorher in den Suchergebnissen optimal gewertet und heruntergestuft.
Der Grund: Zu wenig eigener Content, eine Mischung Funktionen der alten und neuen Online-Welt auf der Plattform, veraltete Produkte sowie Produkte ohne ausreichende Beschreibungen. Der Traffic von Google brach so stark ein, dass eine wirtschaftliche Entscheidung getroffen werden musste. Die alte orange Version musste zurückgebaut werden.

Zurück zur alten Testberichte Welt

Testing und Analysen
Nachdem die alte Testberichte-Seite wieder zurückgebaut wurde, optimierten wir per A/B-Tests die unterschiedlichen Seitentypen. Wir arbeiteten in Design Sprints interdisziplinär und testeten neue Content-Elemente per A/B-Tests.

Design Sprint und Straßentest in Berlin

Beispiel A/B-Test: Produktliste

„In nur 12 Monaten haben wir einen Relaunch mit neuem Design realisiert.
Eine aufregende Zeit mit unfassbar vielen Lernkurven. Vielen Dank an alle die beteiligt waren.“ 

Franziska Gronwald, Mai 2018 

Kunde: Testberichte
Link: www.testberichte.de

Auftrag: Portal Relaunch (Responsive Umsetzung) + Corporate Design
Jahr: 05/2016 – 06/2018

Meine Rolle: Senior UX/UI Designer