Sound Redefined: Exploring Teufel's Headphone App
The Teufel Bluetooth App is designed to enhance the user experience of Teufel audio products by providing seamless control and customization options via Bluetooth connectivity. Teufel, a renowned audio company, aims to deliver a user-friendly interface for managing and optimizing the performance of their Bluetooth-enabled speakers and headphones.
ServicesUI Design & Design Library
Wireframes & Prototyping
Day-to-day designer
Collaboration between in-house teams
Team (when we started)1x PO
2x UX Designer
2x Android Developer
2x iOS Developer
1x UX Research Designer
1x Lead
Sound Engineering Team
Marketing Team
Date2020-2021
(Still helping with maintanance every now and then)
Play store android
4.4 star 1.7k comment
App store apple
4.6 star 2.8k comment
My Role
In the Teufel Bluetooth Headphone app project, I played a significant role in the UI design process, focusing on creating a seamless and visually appealing user experience. My responsibilities included crafting wireframes to outline the app's structure and flow, enabling a clear understanding of the user journey. Through prototyping, I brought the design to life, allowing for interactive exploration and refinement. Additionally, I contributed to the establishment of a comprehensive design system, ensuring consistency across the app and facilitating efficient collaboration within the development team.
Understand, what we want to solve
GOAL
I was really excited to be part of a team workshop for UX design. Engineers, UX designers, and product managers all came together to create an amazing app. We used brainstorming, different viewpoints, and creativity to make it happen. Our inclusive approach made sure that everyone on the team felt valued and engaged. By working together, we laid the foundation for a successful and impactful product.
UX Workshop
Killer Features
Lost and found
Share Me
Touch Settings
Base Features
Equalizer
ANC Control
Contextual Help
Connectivity
Understand, what users want
ResearchThe UX research team wanted to understand what users want and need from a headphone app. To do this, they asked participants to keep field diaries.
Participants wrote detailed diaries about headphone usage, features, challenges, and impressions. Real-time entries provided a better understanding of user experiences. Diaries were collected at specific times or study end, allowing for written, photographic, and video input. Collected data was analyzed to identify patterns and themes, informing user behavior, needs, and pain points. The field diary insights guided the app design and development, influencing features, interface, and overall user experience. The iterative process used diary findings to make adjustments, validate changes, and improve the product. Field diaries captured rich, contextual data about how users adopt the app and their priorities.
Contextual User Diaries
Understand, what others did
The UX team analyzed competitor websites and apps to understand design and user behavior. This guided their unique product creation for their target audience. Valuable research lessons ensured standout design decisions in a crowded market, delivering an outstanding user experience.
Competition Analysis
ProcessWhat I did
Paper Wireframes
That's when my role came into play. I was provided with a set of well planned wireframes drawn on paper and laid out on a board. From there, I began translating and refining those wireframes into a digital format.
App Requirements & User Flow
I supported the team in shaping the app by defining its requirements and creating a seamless user flow. This involves mapping out the features we need and ensuring a smooth, intuitive journey for our users.
The most challenging aspect of this part of the project was navigating the connectivity flow.
New branding
The brand of Teufel was undergoing a major redesign, which influenced the UI of the new app significantly.
The Result:
Dashboard: Check battery level of compatible Teufel headphones anytime, Quick access to Active Noise Cancelling, to alter EQ settings and to start the share music feature.
Equalizer: Use Teufel presets or customize sound to suit your own preferences.
ShareMe: Listen to music from your phone with a friend by connecting two headphones wirelessly.
Connectivity: Get contextual help, when needed.
The app also provides a built-in tutorial for all features.
Settings: Access advanced settings like auto standby and smart pause.
Challenges & Learnings
Challenges
The major challenge we faced was that the brand redesign wasn't finalized when we began the UI design and implementation for the app.
Communication with all departments was ongoing during the redesign process.
Updating the designs was time-consuming
Simultaneous updates were required for both Android and iOS platforms.
It's worth noting that Sketch and Zeplin had their limitations in this context.
Learnings
Such a project requires more designers and a larger time frame before the technical implementation starts
User tests before things get serious are never a set back
Longer phase for design discovery recommended, especially because of the rebranding phase