IKEA Sleep Assistant

Rolle

UI/UX Design, Motion Design

Role

UI/UX Design, Motion Design

Werkzeuge

Adobe Creative Cloud, Sketch, Bodymovin

Tools

Adobe Creative Cloud, Sketch, Bodymovin

Team

Florian Gläser, Gion Tummers, Anna Wirnsperger, Lennart Hehlgans, Valentin Scheiner

Team

Florian Gläser, Gion Tummers, Anna Wirnsperger, Lennart Hehlgans, Valentin Scheiner

Beschreibung

Abstract

Während meiner Zeit bei demodern entwickelten wir gemeinsam im Team für IKEA Deutschland ihren ersten interaktiven Conversational Service Assistant, der dem Nutzer dabei hilft auf eine einfache Weise die richtige Matratze zu finden. Das dialog-basierte Empfehlungstool unterstützt den User darin, die richtigen Produkte zu entdecken und verbessert das gesamte Kundenerlebnis. Wir ersetzten die traditionelle Produktsuche durch eine geleitete Konversation. Hierdurch wird die Produktexpertise und das Vertrauen des Kunden darin, eine positive Kaufentscheidung zu treffen, gestärkt.

During my time at demodern we developed together for IKEA Germany their first interactive service assistant to help people find the right mattress without losing sleep over it. The dialog-based recommendation tool greatly improves product discoverability while at the same time offering an enhanced customer experience. By replacing traditional search with a guided conversation, we demonstrate a new level of product expertise to radically boost consumer confidence.

Mobile First

Mobile First

Mit dem Fokus auf eine Mobile-First Strategie gaben wir der Anwendung ein App-Gefühl direkt im Browser. Mit seinem eigenen Device und ohne den Aufwand, eine neue App herunterzuladen, ruft der Nutzer den Berater auf – von zuhause oder unterwegs. Im IKEA-Einrichtungshaus ergänzen die ausgebildeten IKEA Mitarbeiter den Mobile Assistant und können ihn als visuelle Grundlage für ihre Beratung nutzen.

Focussing on a mobile first strategy we gave the application an app-like feel. Using their own devices and without the hassle of downloading a new app, users access the intuitive tool from the comfort of their own home or on the go. At the IKEA store, the IKEA staff perfectly complements the mobile assistant, which can also serve as a visual foundation for their consultation.

Reduziertes, modulares Design

Wir entwickelten eine überzeugende visuelle Experience mit prägnanten Visuals und Animationen. Unser Team aus Art Direction, Illustratoren und Motion Designern erarbeiteten ein variables Design für den Assistenten, das aus dem visuellen Kern der IKEA-Marke hergeleitet ist. Wir nahmen die Markensprache in den Conversational Services Assistant auf, wodurch die bekannte visuelle Welt von IKEA gestärkt und erweitert wird. Der Look des Beraters ist reduziert und modular. Aussagekräftige Animationen unterstützen die Inhalte und den Charakter, um ihn physisch erscheinen zu lassen. Inspiriert von etablierten Chat-Merkmalen, wird das Designkonzept durch ein intuitives Interface- und Interaction Design vervollständigt.

Reduced and modular visual design

We created a compelling visual experience with eye-catching visuals and animations. Our team of art direction, illustrators and motion designers developed a variable design for the assistant persona that derives from the visual core of the IKEA-brand. In that sense, we distilled the brands voice into a conversational service assistant, while also strengthening and broadening the well-known visual world of IKEA. It is defined by a reduced and modular look, conveyed through meaningful animations, which foster the physical feel of the character. Inspired by well-established chat features, the design concept is completed by a very intuitive user interface and interaction design.

Flüssige und dynamische Animationen

Das Animationskonzept unterstützt den gesamten Beratungsprozess. Komplexe Produktmerkmale werden den Usern zugänglich gemacht, während der Character des Assistenten eine spielerische Note erhält. Um höchstmögliche Qualität und Performance zu gewährleisten, arbeiteten wir mit einem eigenen Framework und Bodymovin: eine Erweiterung, die es uns ermöglicht Animationen flüssig, interaktiv, skalierbar und responsive in die Applikation zu integrieren.

Ensuring smooth and dynamic animations

The animation concept supports the overall consultation process. It makes complex product features more easily accessible to users while also adding a playful note to the assistants character. In order to provide the highest quality and performance we worked with Bodymovin: an extension that allows us to render smooth, dynamic and scalable animations. In addition to that we embedded them into a custom-build framework, which helped make the transitions between the different animations seamless. Using this method, we ensured a frictionless and responsive implementation into the application and enabled the design team to focus on their craft.


Jahr

Anfang 2018

Year

Early 2018

Sourced by

Demodern Digital Agency – 2018

Sourced by

Demodern Digital Agency – 2018