One Of One Eyewear

Digitaler Brillen-Konfigurator und Online‑Shop

<b>14</b> Nutzer-Interviews

um Layouts und Nutzerführung im A/B-Tests für Brillenträger zu optimieren.

<b>Umfassende</b> UX Strategie

welche mobile App, eCommerce und PoS-Retail-Displays kombiniert.

<b>Fortschrittliche</b> Face-Mapping-Technologie,

die ein verfeinertes Interface-Feedback mit Bild und Ton bietet.

YOU MAWO GMBH

Visit website

BRANCHE

Retail, eCommerce

Zeitraum

6 weeks in 2021

TEAM

Product & UX Strategist
UX / UI Designers
Backoffice

Produkt-Design Strategie Mobile

Über das Projekt

One Of One nutzt 3D-Drucktechnologie, um Brillen herzustellen, die zu 100 % an einen hochdetaillierten Gesichts-Scan angepasst sind. Die neuartige Face-Mapping-Technologie passt jedes Gestell an die individuelle Anatomie des Kunden an, so dass jede Brille ein Unikat ist.

Boana unterstützte den Kunden dabei, die Produktvision zu finden und eine erste Version der App zu entwickeln. Entstanden ist eine Verbraucher-App, die die Face-Mapping-Technologie mit einem virtuellen Anproberaum kombiniert, in dem jedes Brillenmodell an einem personalisierten interaktiven Avatar ausprobiert werden kann. Die umgesetzte Lösung bietet ein immersives Erlebnis, das mit einem tatsächlichen Besuch in einem Geschäft konkurrieren kann.

<section class="padding-largest no-padding-bottom module-portolio-detail-headline"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Face Mapping mit der Handykamera –</span> <br class="not-on-s"> für die perfekte Passform </h2> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo--mapping-face-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo--mapping-face-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo--mapping-face-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo--mapping-face-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Ein interaktiver Avatar –<br> basierend auf der individuellen Gesichtsform</h3> <p>Bei dem ersten Besuch wird der Nutzer gebeten, sein Gesicht mit der Smartphone-Kamera zu scannen. Durch die Face-Mapping-Technologie wird jedes Bild dynamisch optimiert, um die individuelle Gesichtsform des Nutzers nachzubilden. <br><br> Unser Design nutzt Audio- und haptische Hinweise, um dem Benutzer während des komplexen Scan-Vorgangs intuitiv zu leiten. Dazu gehören das richtige Halten des Telefons, der Blick in die Kamera und das langsame Drehen des Kopfes - bis der virtuelle Avatar bereit steht.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container"> <div class="flex-item-left"> <div class="vertical-middler"> <h3>100%<br> virtuelle Anprobe</h3> <p>Im Mittelpunkt der App steht der „Fitting-Room“, in der jeder Rahmen aus allen Blickwinkeln am eigenen interaktiven Avatar betrachtet werden kann. So können die Nutzer sehen, wie die einzelnen Fassungen zu ihrer einzigartigen Gesichtsform passen, und schneller die perfekte Fassung finden. <br><br> Der Avatar hat einen großen Vorteil gegenüber einer „Augmented Reality“ Darstellung: Die Brille wird immer im richtigen Maßstab abgebildet, wenn sie auf das Gesicht des Nutzers gemappt wird. Der Avatar kann vergrößert und gedreht werden, so dass die Nutzer in Details hereinzoomen können.</p> </div> </div> <div class="flex-item-right img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo-----survey-questions-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo-----survey-questions-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo-----survey-questions-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo-----survey-questions-1x.jpg"> </picture> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo---the-store-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo---the-store-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo---the-store-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo---the-store-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Der Online-Shop –<br> Kollektion erkunden</h3> <p>Alle Brillenmodelle können getrennt vom Avatar in einem normalen Online-Shop angeschaut werden. Ein großer Teil des Projekts war das Prototyping der Kollektions- und Detailseiten, sowie das Testen der verschiedener Navigationstypen. Dazu gehörten die Präsentation von Produktbildern, das Hinzufügen von Rahmen zu den Favoriten, das Teilen mit Freunden usw.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container"> <div class="flex-item-left"> <div class="vertical-middler"> <h3>Kurze Fragen<br> erleichtern die Auswahl</h3> <p>Bevor sie den virtuellen Fitting-Room betreten, können die Nutzer einen kurzen Fragebogen ausfüllen. Durch die Angaben zu ihren Gewohnheiten und Vorlieben kann die App die Auswahl eingrenzen und ein personalisiertes Einkaufserlebnis schaffen.</p> </div> </div> <div class="flex-item-right img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo-----customize-each-frame-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo-----customize-each-frame-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo-----customize-each-frame-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/02._tile-section/ooo-----customize-each-frame-1x.jpg"> </picture> </div> </div> </div> </section> <section class="padding-largest no-padding-bottom module-portolio-detail-headline bg-grey-05"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Die Verbraucher-App wird ergänzt</span> <br class="not-on-s"> durch einen Point-of-Sale Gerätemodus für Optikerfachgeschäfte </h2> </div> </section> <section class="section modular-portfolio-detail-list bg-grey-05"> <div class="headline-large-image"> <div class="item-wrapper"> <div class="item"> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/04._full-width-with-margin-image/ooo--ipad-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/04._full-width-with-margin-image/ooo--ipad-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/oneofone-eyewear-ecommerce/04._full-width-with-margin-image/ooo--ipad-1x.jpg}"> </picture> </div> </div> </div> </div> </section> <section id="cta-your-project" class="section padding-largest modular-call-contact "> <div class="wrapper"> <div class="flex-container"> <div class="flex-item-left"> <picture> <source media="(max-width: 767px)" srcset="/user/themes/boanastories/img/sales/s-profile-j2-mobile.jpg" /> <source srcset="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg 1x, /user/themes/boanastories/img/sales/s-profile-j2-2x.jpg 2x" /> <img src="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg" alt="Johannes Holl" /> </picture> <a href="https://boanastudio.com/de/team/johannes-holl" class="xs-text text-grey-60 image-caption"><b class="bold text-grey-40">Johannes Holl</b> <span class="not-on-s">• </span>Geschäftsführer</a> </div> <div class="flex-item-right"> <div class="text"> <div class="headline l-text"> <span class="color">Sprechen wir über</span><br>Ihr Projekt. </div> <div class="teaser n-text text-grey-60"> Teilen Sie Ihre Ideen mit uns, wir helfen gerne! </div> <div class="actions"> <a href="https://boanastudio.com/de/contact" class="button primary">Kostenlose Beratung</a> </div> </div> </div> </div> </div> </section>