Vybe Pro Max Details

Vybe Pro Max

Vybe Pro Max Earbud

"I designed the Vybe Pro Max earbuds and a responsive website to create a cohesive product and brand identity. The earbuds, crafted with a focus on ergonomics, minimalism, and functionality, are paired with a website featuring a 3D model viewer, sliding X-ray images, AJAX scroll animations, and a JavaScript-powered color selection tool. Together, they target young, tech-savvy users seeking a sleek, modern audio experience."

Team

Kyuri Park

Year

2024

What I did

Front-End Development (HTML, CSS, JS): Built responsive web pages, styled layouts, and added interactivity.

Logo Design: Designed a brand logo reflecting the target audience and identity.

Web Design: Developed a cohesive design system and user-friendly interface.

Label Design: Created product labels with branding elements and essential details.

3D Modeling: Created product labels with branding elements and essential details.

Research

Needs & Goals

The goal was to design the Vybe Pro Max, wireless earphones that combine a trendy, modern aesthetic with advanced functionality for young adults. Additionally, a promotional website was created to effectively showcase its features and enhance brand presence.

Target Audience

Age Range: 18-30

Gender: All

Location: Urban areas, tech-savvy consumers

Occupation/Industry: Students, young professionals, creatives

Education Level: All

Psychographics: Trend-conscious, values style & functionality

Age Range: 18-30

Gender: All

Location: Urban areas, tech-savvy consumers

Occupation/Industry: Students, young professionals, creatives

Education Level: All

Psychographics: Trend-conscious, values style & functionality

Branding

Design Principal

Ergonomics

The earbuds and website are designed for effortless comfort and intuitive usability, ensuring a seamless experience.

Minimalism

Both the earbuds and website embody simplicity, with clean lines and a focus on essential elements.

Functionality

From the earbuds' features to the website's navigation, every detail is crafted to enhance practicality and ease of use.

Sketches

Website

Wireframing

UX UI - Key Features

🎥 3D Model Integration

Embedded .gltf models provide an immersive 3D viewing experience.
Real-time controls for rotating, zooming, and interacting with the model.

📍 Interactive Hotspots

Hotspots highlight key features of the earbuds

🎢 GSAP Scroll Animation

Smooth scrolling effects and scroll-triggered animations are implemented using GSAP (GreenSock Animation Platform).
Smooth Transitions: Sections animate as you browse for a seamless flow.
Scroll Animation: Earbuds break apart on scroll to reveal inner parts.

🎨 Customization Options

Choose a color: Blue, Black, White, or Pink to see the earbuds in that style.

Devices

Creating designs optimized for various devices, including mobile phones, tablets, and web platforms.

Web - Recap

Building Vybe Pro Max's Digital and Product Identity

In this project, the focus was on establishing a seamless connection between the Vybe Pro Max earbuds and their digital presence. Guided by the principles of ergonomics, minimalism, and functionality, both the earbuds and website were meticulously designed. The website incorporates advanced features, including a 3D model viewer, sliding X-ray image functionality, AJAX-based scroll animations, and a JavaScript-powered color selection tool. These elements work together to enhance interactivity and effectively showcase the product's innovative design and features.

Kyuri Park Portfolio