Die Kraft der Innovation: Wie die Symbiose aus Hawa’s neuem Design System und die optimierte User Experience neue Maßstäbe für Konfiguratoren setzt.
Seit über 50 Jahren steht Hawa Sliding Solutions als weltweit anerkannter Schweizer Anbieter von Schiebetürsystemen an der Spitze der Branche. Die Erfolgsgeschichte dieses Unternehmens zeichnet sich durch kontinuierliche Innovation und die Bereitstellung hochwertiger Lösungen aus. Mit einem tiefgreifenden Verständnis für die Bedürfnisse seiner Kund:innen hat Hawa eine beeindruckende Erfolgsbilanz aufgebaut und einen erstklassigen Ruf für seine Produkte und Dienstleistungen errungen.
50
Jahre Erfahrung
350
Patente
240
Mitarbeiter:innen
Die gemeinsame Challenge
Gemeinsam mit Hawa standen wir vor der anspruchsvollen Aufgabe, ein Design System zu entwickeln, das auf dem bewährten Carbon Design System von IBM aufbaut. Unser Ziel war es, den Grundstein für eine konsistente User Experience über alle Touchpoints hinweg zu legen. Als Pilotprojekt für die Implementierung des Design Systems wurde der Produktkonfigurator des Hawa Concepta III entschieden.
Unsere Design-Initiative hatte zwei Hauptziele. Zuerst sollte das UI des neuen Design Systems dezent modernisiert werden, um die Ästhetik und die Benutzerfreundlichkeit zu steigern. Zweitens sollte der neue Konfigurator als Blaupause dienen, um künftige Konfiguratoren nahtlos in die Website zu integrieren. Dabei legten wir besonderen Wert darauf, den User Flow zu optimieren und die Usability auf verschiedenen Viewports, von Desktop bis Mobile, signifikant zu verbessern.
Der Startschuss: Einblick in die Welt Hawa’s und das Design System
Bei unserem ersten Treffen vor Ort bei Hawa, tauchten wir tief in die Welt des Unternehmens ein. In diesem 2-tägigen Workshop erhielten wir Einblicke in die umfangreiche Produktwelt, das Gebäude und die Produktion vor Ort, sowie wertvolle Insights über die Zielgruppen, Personas und User Journeys.
Während des ersten Tags haben wir Einblicke in den aktuellen Stand der vorhandenen Konfiguratoren erhalten und analysiert und erste strategische Überlegungen für den neuen Konfigurator angestellt. Ziel war es sicherzustellen, dass der zukünftige Konfigurator den vielfältigen Anforderungen der User:innen gerecht wird. Tag 2 legte den Grundstein für das Design System: dieser beinhaltete die Einrichtung des Figma Space, sowie das Scoping der Roadmap.
Effiziente Integration: Das Design System auf Basis des Carbon Design System
Wir starteten den Prozess mit der Angleichung der grundlegenden Elemente wie Farben und Schriftstyles, um eine einheitliche Basis zu schaffen. Diese Anpassung rollten wir anschließend konsequent auf die vorhandenen Components aus, wobei wir besonderes Augenmerk auf die Bedürfnisse des Produktkonfigurators legten. Components für die es noch keinen Use Case gab wurden entsprechend markiert und vorerst außen vor gelassen.
Gleichzeitig führten wir neue, speziell auf den Konfigurator zugeschnittene Components ein. Um die Übersichtlichkeit zu gewährleisten und universelle Components von touchpointspezifischen zu trennen, setzten wir eine neue Library auf. Diese Maßnahme sorgte dafür, dass unser Design System flexibel und skalierbar blieb, während es gleichzeitig die individuellen Anforderungen des Konfigurators perfekt erfüllte.
Ein Konfigurator, der Maßstäbe setzt: Von der Idee zum funktionierenden Prototyp.
In enger Zusammenarbeit mit dem Hawa-Team haben wir den Grundstein für einen Produktkonfigurator gelegt, der mit einer überarbeiteten User Experience überzeugt. Unser erster Schritt war die Erarbeitung eines detaillierten User Flows, der sicherstellte, dass die unterschiedlichen Herangehensweisen der verschiedenen Zielgruppen in den Fokus gerückt wurden. Außerdem wurden auch zukünftige Features wie die Projektverwaltung in die Planung berücksichtigt.
Parallel dazu starteten wir die Erstellung des Look & Feels für den Konfigurator. Dabei nutzten wir diesen, um die Komponenten des Design-Systems iterativ mit dem Kunden abzustimmen. Dieser Ansatz gewährleistete, dass das entstehende System sowohl flexibel als auch skalierbar ist und den sich stetig verändernden Bedürfnissen gerecht wird.
Zusätzlich dazu haben wir ein adaptierbares System geschaffen, das es zukünftigen Konfiguratoren ermöglicht, nahtlos auf die erarbeitete User Experience aufzubauen. Dies ermöglicht eine effiziente Entwicklung und Implementierung von weiteren Konfiguratoren und gewährleistet, dass diese konsistent in ihrer Usability und in ihrem visuellen Auftreten sind.
Optimale Usability auf jedem Gerät
Die Anforderung des Kunden war klar: Der Konfigurator muss auf allen Geräten reibungslos funktionieren. Wir schufen ein großzügig dimensioniertes Eingabe-Panel, das es den User:innen gleichzeitig ermöglicht, aufgrund der Aufteilung, ihre Anpassungen in Echtzeit am Konfigurationsbild zu überprüfen. Diese Flexibilität und Benutzerfreundlichkeit gewährleistet, dass der Konfigurator auf jedem Gerät überzeugt und die Erwartungen der User:innen erfüllt.
Der Prototyp als Basis für direktes User Testing
Als Höhepunkt dieses Projektes steht die Entwicklung eines funktionierenden Prototypen, der im nächsten Schritt gemeinsam mit echten Hawa-Kund:innen getestet wird. Die Erkenntnisse und das Feedback aus diesen Testings werden in weiterer Folge konsequent in das Design integriert. Durch das User Testing erhoffen wir uns wertvolle Insights zur Bedienung, Wünsche und weiteren Features zu bekommen. Damit setzen wir den Fokus auf eine weiterhin herausragende User Experience, die den Ansprüchen von Hawas anspruchsvollen Kund:innen gerecht wird.
Der Ausblick
Die nächsten Schritte in dieser spannenden Reise umfassen die Implementierung der Projektverwaltung und die Ergänzung weiterer Produkte im Konfigurator, bei dem wir die Insights des User Testings berücksichtigen. Das Design System wird weiterhin als solides Fundament dienen, um die User Experience auf Hawas Plattformen zu harmonisieren und die Marke noch stärker hervorzuheben.
Dieses Projekt für Hawa Sliding Solutions hat uns nicht nur die Möglichkeit geboten, unsere Expertise in UX/UI-Design und die Erstellung von Design-Systemen unter Beweis zu stellen, sondern auch, gemeinsam mit einem erstklassigen Partner an innovativen Lösungen zu arbeiten. Wir freuen uns auf die bevorstehenden Schritte und die weitere Zusammenarbeit mit Hawa, um ihre Vision zu verwirklichen.
Die Erfolge im Überblick
Im Projektverlauf konnten wir so eine Fülle von quantitativen und qualitativen Ergebnissen erzielen:
🚀
Aufbau des Design Systems
Erfolgreiche Integration des Design Systems auf Basis von Carbon Design.
⚙️
Optimierung des Konfigurators
Ein benutzerfreundliches, inklusives Design, das auf allen Geräten funktioniert.
💻
Erstellung eines funktionsfähigen Prototypen
Erstellung eines Prototyps für den Produktkonfigurator "Hawa Concepta III", der bereits realen User:innen zur Verfügung steht.
Sie wollen mehr über dieses Projekt erfahren?