top of page
Slide 16_9 - 5.jpg

JBL Fit Checker

JBL Fit Checker

Involvement

UX Design, Sound Design, Animation Design

Credits

Sam Liu, Yifan Deng, Andy Ye, Daniel Guo

JBL Fit Checker is a web-based application that helps users select the right headphones by scanning their ears and using cutting-edge technology to determine the compatibility with three types of JBL headphones: beam, buds, and flex. It ensures safety and convenience by eliminating cross-infection risks in stores and allowing users to find the best fit without leaving home.

Try Fit
Checker

CES2024
Reviews

Design
Process

Scroll
down
to read

JBL Fit Checker

Involvement

UX Design, Sound Design, Animation Design

Credits

Sam Liu, Yifan Deng, Andy Ye, Daniel Guo

JBL Fit Checker is a web-based application that helps users select the right headphones by scanning their ears and using cutting-edge technology to determine the compatibility with three types of JBL headphones: beam, buds, and flex. It ensures safety and convenience by eliminating cross-infection risks in stores and allowing users to find the best fit without leaving home.

Involvement

UX Design, Sound Design, Animation Design

Team

Sam Liu, Yifan Deng, Andy Ye, Daniel Guo

Overview

JBL Fit Checker is a web-based application that helps users select the right headphones by scanning their ears and using cutting-edge technology to determine the compatibility with three types of JBL headphones: beam, buds, and flex. It ensures safety and convenience by eliminating cross-infection risks in stores and allowing users to find the best fit without leaving home.

JBL-Fit-Checker-iPhone-SE-Live-Buds-3-ha

Highlights

Ear Scanning Flow

scanprocess.png

We benchmarked ear scanning on iOS, Sony Headphone app, Super X-Fi and QQ Music to better design a more intuitive ear scanning process.

Animation I designed by Adobe After Effects. The animation indicators would be played to show if the camera successfully detected the user's face. An unsatisfying capture of image would lead to the failure of the calculation of results.

Our algorithm needs 5-8 photos of the ear captured during the scanning process. Here, I designed the ring animation to help indicate the user about the scanning status.

EULA

Proposal

slide_16_9_7.webp

Final Implementation

group_1000005289.webp

Result Page Algorithm

resultalg.png
result_card.webp

Prototype

Accessbility

group_1000005312.webp

Sound Indications

A situational 'visual disability' might happen, when the users' eyes are tilted away from the screen while doing the scan.

Here we explore auditory ways to notify them about the status.

Responsive Layout

截屏2024-10-09 16.45.08.png
截屏2024-10-09 16.44.51.png
截屏2024-10-09 16.44.39.png

Fit Checker In Use

IMG_7745.jpeg
ces_thumb.webp

Graphics

Color Palatte

color3.png

Icons

icons.png

Font family

font.png
bottom of page