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.