Designing Teufels MVP Version of the Bluetooth App (Now: Teufel Go 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.
Year2020-2021
ScopeUI Design & Design Library,
Wireframes & Prototyping, UI Transition & Motion Concept
Team (at the time)1x PO
2x UX Designer
2x Android Developer
2x iOS Developer
1x UX Research Designer
1x Lead
Sound Engineering Team
Marketing Team
Status Today15+ new BT products added since MVP Version
Play store4.4 star 1.7k comment
App Store4.8 star 8.3k comment
My Role
External UI & Graphic Designer
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 (Now Party Mode)
Touch Settings
Base Features
Equalizer
ANC Control
Contextual Help
Connectivity
Understand, what users want
Research
The 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.
New Branding Guidelines: Colors
New Branding Guidelines: imagery
New Branding Guidelines: Stage
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.
Reflection & Learnings
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.
Reflection
A project of this scale requires more lead time before technical implementation can begin: There was only a small time frame for the discovery phase.
Handling all stakeholders while the rebranding and design phase was challenging, but in the end we’ve found common ground
Doing user tests with a simple prototype hasn’t been done due to lack of time.