One Of One Eyewear

Eyewear configurator and online shop

<b>14</b> user interviews

to A/B-test layouts and user flows with spectacle wearers.

<b>Comprehensive</b> UX strategy

combining mobile App, eCommerce and PoS-Retail-Displays.

<b>Advanced</b> face scan animation

that offers refined interface feedback with visuals and sound.

YOU MAWO GMBH

Visit website

INDUSTRY

Retail, eCommerce

Timeframe

6 weeks in 2021

TEAM

Product & UX Strategist
UX / UI Designers
Backoffice

About the project

One Of One uses 3D-printing technology to produce glasses that are 100% customized to a highly detailed face scan. The face-mapping technology customizes each frame to the individual anatomy of the customer, making each pair of glasses one of a kind. Boana supported the team in finding a product vision and developing the first features. We designed a consumer app that combines face-scanning technology with a virtual fitting room, where each frame can be tried on an interactive avatar. The final solution provides an immersive experience that can compete with an actual physical store visit.

<section class="padding-largest no-padding-bottom module-portolio-detail-headline"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Face mapping with your phone camera</span> <br class="not-on-s">for the perfect fit </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>Mapping face topography <br>to create <b>an interactive avatar</h3> <p>The app utilizes the smartphone camera. On the first visit, the user is asked to scan their face. The scan uses facial mapping technology and dynamically optimizes each frame to the individual's face topography. Our design takes advantage of audio and haptic cues to provide proper instructions while the user performs a complex scan process. This includes holding the phone, looking into the camera, and turning their head slowly, all without wearing glasses.</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> virtual try-on</h3> <p>The app is centered around the fitting room, where each frame can be viewed from all angles. An initial scan is used to create an interactive avatar. This allows users to see how each frame compliments their unique features and find the perfect match quicker. The avatar has a major advantage over augmented reality: it is mapped to the correct scale when placed on the user's face. It can be enlarged and rotated so that users can zoom in on the details they're most interested in.</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>The store —<br> browse collection</h3> <p>The app is centered around the fitting room, where each frame can be viewed from all angles. An initial scan is used to create an interactive avatar. This allows users to see how each frame compliments their unique features and find the perfect match quicker. All frames can be viewed separately from the avatar in a regular online store. A big part of the project was prototyping the collection and detail pages and testing various navigation types. That included showcasing product pictures, adding frames to favorites, sharing, etc.</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>Survey questions help<br> narrow down the choices</h3> <p>Before entering the fitting room, users have the option to complete a questionnaire. By providing answers about their habits and preferences, the app can narrow down options and create a personalized shopping experience.</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">The consumer app is accompanied</span> <br class="not-on-s"> by a PoS-iPad-app for optician stores </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/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>Managing Director</a> </div> <div class="flex-item-right"> <div class="text"> <div class="headline l-text"> <span class="color">Let’s talk about</span><br>your project. </div> <div class="teaser n-text text-grey-60"> We can help reduce complexity and identify quick wins upfront. </div> <div class="actions"> <a href="https://boanastudio.com/contact" class="button primary">Get free consultation</a> </div> </div> </div> </div> </div> </section>