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 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
Wir lernen die zukünftigen Nutzer kennen und analysieren ihr Verhalten.
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.
Define
Aus den Erkentnissen wird eine Strategie für die Zielgeräte entwickelt.
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
Iterativer Designprozess und Prototypen Entwicklung.
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 der Webseite und Bereitstellung auf den Servern von kiutra.com
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.
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.
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.
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.
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.
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.
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.
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
Farblehre
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.