Kiutra. Explore the Sub-Kelvin World

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

Teaser Video Kiutra
KIUTRA

User Experience Design & didaktische Kommunikation

Für kiutra wurde das minimalistische Corporate Design ins digitale überführt und anhand eines Designsystems umgesetzt. 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
Methoden:
Persona & Conversion Workshop
Wireframes
UX/UI Design
Designsystem
Branding
2D & 3D Animationen
Deliverables:
Website
Styleguide
Ikonografie
Webinar/Video
Kiutra Product Image
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.

Die Umsetzung im Überblick

Mit Methoden des User Experience Designs zum Erfolg

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

Discover
Discover
Wir lernen die zukünftigen Nutzer kennen und analysieren ihr Verhalten.
Discover Image

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

Mithilfe von Personas wurde eine erste Hypothese zu den Nutzern erstellt, die nötigen Seitentypen identifiziert und ein User Flow definiert.
Discover
Define
Aus den Erkentnissen wird eine Strategie für die Zielgeräte entwickelt.
Discover Image

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.
Discover
Design
Iterativer Designprozess und Prototypen Entwicklung.
Discover Image

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.
Discover
Develop & Deliver
Umsetzung der Webseite und Bereitstellung auf den Servern von kiutra.com
Discover Image

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.
Discover Image

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

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

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.
Discover Image

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.
Discover Image

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.
Mockups

Das User Experience Design & didaktische Kommunikation

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.

Navigation Website

Navigationskonzept

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

Einfach und Verständlich

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

Styleguide & Design System

Das auf ein Minimum reduzierte Corporate Design wurde von uns ins digitale Übertragen und ergänzt. Anhand eines bis zum Front-End Code verknüpften Designsystems kann kiutra künftig selbständig zusätzliche Inhalte generieren.

Headline
Lorem ipsum
Subheadline
Lorem ipsum dolor sit amet
Fliesstext
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo.
Primary button
Our technology
Ikonografie
Icon Icon Icon Icon Icon
Farblehre
Farbe Farbe

Didaktische Kommunikation durch Bewegtbild, das Webinar

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

Kuitra Webinar

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