PX Headphones App —

iOS & Android

In October 2017 Bowers & Wilkins launched its first noise canceling headphones alongside a mobile app for iOS & Android.

YEAR

Designed at Bowers & Wilkins in 2017

ROLE

Design, Direction, Product

TOOLS

Sketch, Zeplin, inVision, Principle, Illustrator, Photoshop

px_hero_flora_med
Overview

When I joined this project, the early design phase had already started. Since the general concept and features were already in place, my role was to take the wireframe designs further and iterate. My first task was to build the interface and visual direction for the iOS app, and continued my work to flesh out the interface details, prototype flows, and refine the visual designs.

My role & contributions
  • User interface
  • Iconography
  • Visual design language
  • Design system
  • Interactive prototyping
  • iOS and Android design
  • App & Play Store production
px_android

 

px_iOS

 

The Challenge

My first task was to come up with a visual direction for the app. The problem was that Bowers & Wilkins had no style guide & formal brand guidelines, so I did research to discover existing visual designs.

I started my research with the discovery phase and inspirations, moodboards, understanding the stakeholders, the users, and the market as well as asking questions to understand the problems we are trying to solve with this app. After my findings, I decided to stick with the basics of classic Bowers & Wilkins brand, while trying to give a refresh and modern feel to attract new customers.

px_first_explorations

Early explorations on general layout and visual directions

px_dashboad_explorations

Early explorations on dashboard designs

Early protoype for Home and Dashboard

I love bringing ideas to life through prototyping. I created rough prototypes early on so I can interact with my designs and share with other people to test out the flow. This is how I learn to improve my designs, whether it's the user interface or the interaction — it's a key part of my process.

Design iterations

We started with three items tab bar navigation to break down the pages into Home, Help, and Account, then added the fourth feature for Personal EQ. I explored different iconographies for the nav bar.

px_navbar1

Tab bar: to label or not to label questions.

navbar_ic_explorations

Headphones icon study

px_navbar2

Iterations on tab-bar navigation icons — also tested in actual phone to evaluate contrast, visibility, readability.

Supporting multiple languages

Since our product is global and available in many countries, it's important to think about how other languages affect the user interface and layout. There are a few guidelines I follow while designing for internationalization such as not using text in images and to leave room for translations.

design_internationalization

Screenshots in French, Japanese and Russian from the App Store screens.

localization_wip

Even though we use dynamic text in the code to support different languages, I still like to design in other languages to see how it affect the UI and to uncover and address problems early.

The Launch

We shipped our products in October 2017 and the app is available on the App Store and Play Store in 8 languages.

 

px_oob_colorful

 

px_flight_ios_and

"You can fine-tune the noise-canceling experience to match your surroundings via a sleek mobile app." 

Stefan Vazharov read about it here.

px and app

More Projects

Imgur Accolades • Celebrating the bestProduct Design, Web, Apps, Illustrations, UX Research

Imgur Emerald • A new subscription productProduct Design, Web, Apps, Branding, UX Research

Melee • Designing for gaming communityProduct Design, iOS, Android

Bowers & Wilkins Home • Creating a seamless setup experienceProduct Design, iOS, Android, Animation, Illustration

Bowers & Wilkins PXProduct Design, iOS, Android, Iconography

Flickr iPadMobile App Design, iPad

Flickr iPhone RedesignMobile App Design, iPhone

Snapshots • Design snippetsVisual, Interaction, Animation

LinkedIn —

Copyright © 2025 Gabriele Angeline. All Rights Reserved.