LCP LCP LCP
Fallbeispiel

Cyclomedia

Header-image-cyclomedia

Entwerfen einer neuen Oberfläche für das spezialisierte Streetsmart-Anzeige-Tool.

01

Der Kunde

Cyclomedia bietet groß angelegte systematische Visualisierungen physischer Umgebungen unter Verwendung spezieller Technologie, um sphärische 360°-Bilder von einem sich bewegenden Fahrzeug zu sammeln.

Sie bieten Kunden in vielen Sektoren umsetzbare Erkenntnisse: lokale und zentrale Regierungen, Versorgungsunternehmen und Unternehmen, die von Telekommunikation über Versicherungen bis hin zu Immobilien reichen.

Das Unternehmen hat seinen Hauptsitz in den Niederlanden und Niederlassungen in den USA und Deutschland.

02

Die Herausforderung

Cyclomedia bat uns um Unterstützung bei der Konvertierung des Globetrotter 360-Grad-Ansichtstools von Adobe Flash auf HTML5. Dieses Tool ermöglicht Kunden den Zugriff auf Bilddaten und LIDAR-Punktwolken.

Das Briefing bestand darin, das Konzept zu überprüfen und eine neue Benutzeroberfläche zu entwerfen, die einfach zu implementieren ist, sich zeitgemäß anfühlt, neue Funktionen unterstützt und einige Usability-Probleme löst.

03

Unsere Lösung

Ein agiler Design- und Implementierungspfad, an dem Entwickler, Stakeholder und Benutzer beteiligt sind. Wir haben einen 1-10-100-Ansatz mit 3 Iterationen verwendet, um tief in die Lösung für die Benutzeroberfläche einzutauchen.

Das Ergebnis waren detaillierte Entwürfe für mehrere Bildschirme.

Cyclomedia - example 1

Viele Details für spezifische Benutzeraufgaben

Prozess

Agil und iterativ

Wir verwendeten einen 1-10-100-Ansatz mit 3 Iterationen, in denen wir tiefer in die Lösung für die Benutzeroberfläche eintauchten. In der ersten Iteration luden wir Stakeholder in der Organisation zu einer Designsitzung ein, um uns ihren Input zu geben. Anschließend haben wir ihre Anforderungen in mehrere Skizzen für die Schlüsselbildschirme übersetzt.

In der Phase „10“ haben wir Benutzer des Systems befragt, um zwei Ziele zu erreichen: die Anforderungen der Stakeholder zu validieren und sie mit Benutzeranforderungen anzureichern. Diese Iteration führte zu einem detaillierteren anklickbaren Prototyp (Wireframes) der wichtigsten Flows, der das neue Konzept veranschaulichte, das wir im Sinn hatten. In der ‚10‘-Phase haben wir auch den visuellen Stil bestimmt.

Die 100-Phase ist ein agiler Implementierungspfad, in dem das Produkt tatsächlich hergestellt wurde. In dieser agilen Entwicklungsphase nahmen engagierte Designer an mehreren Sprints teil und erstellten das Detaildesign für mehrere Bildschirme. Das Produkt wurde dann unter seinem neuen Namen StreetSmart eingeführt.

RABO-tekst-image
RABO-tekst-image2

Ergebnisse

Aktivitäten

  • Anforderungen zusammentragen
  • Interaktionsdesign
  • Visuelle Gestaltung
  • Frontend-Entwicklung

Leistungen

  • Wireframes
  • Styleboards
  • Visuelles Design/Styleguide
  • HTML/CSS

 

Verwendete Expertise

tools-used-slider-icon-white-1
Product Mapping

UX-concept-tangerine
UX Konzept

UX Architecture white
UX Architektur

Style determination white
Stilfestlegung

UI-design-icon-tangerine
UI Design

User testing white
Nutzertests

Headshot of Iwan Cuijpers CEO of Keen Design
Stehen Sie vor einer ähnlichen Herausforderung?

Lassen Sie uns gemeinsam eine Lösung finden!

Iwan Cuijpers