Explore the Sub-Kelvin World

Die vollautomatische Kühllösung zur Erzeugung von extrem niedrigen Temperaturen

Kiutra

Corporate Interaction Design für Kryostate

Für kiutra wurde das minimalistische Corporate Design ins digitale überführt und mittels einem Designsystem für zukünftige Entwicklungen im Unternehmen dokumentiert. Das Design soll die technologische Marktführerschaft klar und präzise kommunizieren. Ein state-of-the-art Designsystem für state-of-the-art Kryostate.

Kunde:
kiutra
Jahr:
2020 - 2021
Domäne:
Industrie 4.0
Automation
Leistungen:
Persona & Conversion Workshop
Wireframes
UX (User Experience)
UI (User Interface)
Designsystem
Branding
Deliverables:
Website
Styleguide
Webinar / Video
Ikonografie
Unsere Aufgabe

Kiutra zeichnet aus, dass sie ihren Kunden aus Forschung und Industrie einfach zu bedienende, “schlüsselfertige” Kryostate bereitstellen, die ihnen die Zeit geben, sich auf ihre Arbeit, statt auf ihre Kryostate zu konzentrieren. Sie möchten die Entwicklung, das Testen und die Vorcharakterisierung von Quantenhardware und zugehöriger Elektronik durch schnell abkühlende Kryostate und innovative Probenaustauschmechanismen beschleunigen.

Die Kühlplattformen bieten eine kontinuierliche Kühlung im Sub-Kelvin-Bereich unabhängig von flüssigen Kühlmedien, insbesondere unabhängig von seltenem und teurem Helium-3. Dies ist unerlässlich, um auf einfache, kompakte und kostengünstige Weise kryogene Temperaturen bereitzustellen und eine Voraussetzung für eine skalierbare Anwendung der Quantenelektronik.

Mit Methoden des User Experience Designs zum Erfolg

In vier Phasen wurde das Projekt geplant und mit individuell orchestrierten Methoden gestaltet und umgesetzt.

Discover

Kickoff Workshop

Im gemeinsamen Kickoff Workshop wurden die funktionalen und nichtfunktionalen Anforderungen gesammelt und priorisiert. Mit einem Deep Dive ins Thema Kryostate und deren Nutzergruppen wurde ein gemeinsames Verständnis sichergestellt.


Zielgruppenanalyse

Mit Hilfe von Personas wurde eine erste Hypothese zu den Nutzern erstellt, die nötigen Seitentypen identifiziert und ein User Flow definiert.

Define

Story Line & Informationsarchitektur

Um die Inhalte auf die Nutzer und deren Erwartungshaltung zu optimieren wurde für jeden Seitentyp eine Story Line (Statement, Erklärung, Beispiel) entwickelt. Anhand der Personas wurde die Informationsarchitektur überprüft und die Story Line manifestiert.


Customer Journey

Durch die Analyse der unterschiedlichen Einstiegs- und Kontaktpunkte wurde versucht den schnellstmöglichen Weg zur Konvertierung der Nutzer zu finden und definieren.

Design

Wireframes & User Interface Design

Um das zuvor entwickelte Konzept zu visualisieren wurden zuerst Wireframes zur Visualisierung der Navigationsstruktur und Story Line entwickelt. Nach einer Iteration anhand des Kundenfeedbacks wurde das bestehende Corporate Design ins digitale Übertragen, erweitert und auf die entwickelten Wireframes angewendet.


Prototypen Entwicklung & Designsystem

Um das erarbeite Design und deren Animationen erfahrbar zu machen wurden Prototypen erstellt und durch den Kunden validiert. Das erarbeite Design wurde anhand eines komponentenbasierten Designsystems in Figma dokumentiert und übergeben.

Develop & Deliver

Umsetzung des Designs

Als Content Management System wurde Wordpress ausgewählt. Hierfür entwickelten wir ein individuelles Template, welches wir mit eigens geschriebenen Gutenberg Komponenten umsetzten. So wurde das Designsystem in die Entwicklung anhand von Codeblöcken übertragen, die nun vom Kunden für zukünftige Erweiterungen out of the box eingesetzt werden können.


Bereitstellung auf den Servern von kiutra.com

Nach ausgiebigen Tests auf allen Zielgräten haben wir die Installation auf den Servern von kiutra vorgenommen. Zusätzlich wurde eine Schulung der zukünftigen Administratoren auf das neue System und deren Einstellungsmöglichkeiten durchgeführt.

Die Umsetzung im Überblick

Das Ziel der Umsetzung war, die komplexen Zusammenhänge eines Expertenprodukts durch eine gute Nutzerführung und eine einheitliche visuelle Sprache klar verständlich zu machen.

Key Visuals

Reduzierte Infografiken mit technischem Charme zeichnen sich durch klare Linien, minimalistische Gestaltung und eine präzise, sachliche Darstellung aus. Sie vermitteln Informationen effizient und ästhetisch, ohne überflüssige visuelle Elemente.

Das User Experience Design & didaktische Kommunikation

Ein durchdachtes UX- und Navigationskonzept sorgt für eine intuitive, effiziente und nutzerfreundliche Interaktion mit der Anwendung.

Navigation
Navigationskonzept

Durch die definierte User Journey wurden die unterschiedlichen Einstiegspunkte der Nutzer deutlich. Daraufhin wurde das Navigationskonzept so optimiert, dass die Nutzer:innen aus jedem Einstieg intuitiv zum definierten Zielpunkt geführt werden.

Infokrafik
Einfach und Verständlich

Durch animierte Infografiken werden komplexe Zusammenhänge deutlich gemacht und vermitteln dabei ein Gefühl für die Funktionsweise des Produkts.

Das Webinar

Die zuvor erstellten Inhalte wurden in Form einer Präsentation aufbereitet und mit erklärenden Animationen ergänzt. Mit einem Voiceover hinterlegt, sowie durch in einzelne Sinnabschnitte zerlegte Folien, können auch Einsteiger zum Thema Kryostate hingeführt werden.

Kuitra Webinar - Untersuchung von Sub-Kelvin-Messungen mit kryogenfreien kontinuierlichen ADR-Kryostaten.