Custom Earbuds Site
Project Overview
This project involved designing and developing a promotional website for a custom earbud concept inspired by Brooklyn Nine-Nine. The goal was to create an engaging, modern product experience similar to real-world tech brands while combining 3D modeling, branding, and front-end development. The final result is a fully responsive, mobile-first website that showcases the earbuds through interactive elements, strong visuals, and a cohesive theme.
Technologies Used
- Trello
- Figma
- Cinema 4D
- Photoshop
- HTML 5
- CSS 3
Roles
- Project Manager
- 3D Designer
- Graphic Designer
- Front-End Developer
My Role
- Front-end Developer (HTML, CSS, JavaScript)
- UI/UX Designer (wireframing and high-fidelity design)
- 3D Artist (modeled earbuds in Cinema 4D)
- Visual Designer (created promotional ads in Photoshop)
Challenges Faced
- Tight deadlines while balancing multiple assignments
- Limited time to research and finalize design decisions
- Managing personal responsibilities alongside academic work
- Prioritizing key features based on project requirements and rubric
- Maintaining quality while working under time constraints
My Process
- Researched Brooklyn Nine-Nine to understand its visual style and theme
- Explored real earbud designs and internal components for accuracy
- Analyzed product websites (like AirPods) to understand layout and user experience patterns
- Sketched initial wireframes based on research insights
- Designed high-fidelity wireframes in Figma
- Modeled the earbuds in Cinema 4D
- Rendered still images for use in marketing and website visuals
- Created promotional ad designs in Photoshop
- Developed a responsive, mobile-first website using HTML, CSS, and JavaScript
- Integrated a 3D plugin to display the earbuds interactively
- Used Sass to organize and optimize CSS
The Outcome
- Delivered a fully functional, responsive product website
- Created a cohesive and engaging brand concept
- Demonstrated skills in design, development, and 3D modeling
- Successfully followed a structured plan and timeline
- Achieved a strong final grade while meeting all project expectations
