Cisco Headsets Mobile App

iOS and Android

Background

What is the business?

Cisco’s headset business is B2B, we sell headsets to companies in bulk and they distribute them to their users.

What is the product?

This is a headset companion app that lets users customize their headset, update it, receive support from IT, and troubleshoot/learn about the headset. It’s one of a suite of apps that let the user manage the headset. They can also use a web app, Webex app, or our desktop app. The mobile app was the first app we built as part of the PM’s mobile first strategy.

What is the goal?

  1. Assist the user in managing their headset 
  2. Provide the user self troubleshooting and educational information on the go
  3. Reduce the number of headsets that users are dissatisfied with
    1. Interestingly, negative reviews for headset apps are almost always about the headset and not about the design of the app
  4. Provide a way to manage the headset for IT departments or users without Cisco software

Who is the user?

  • Cisco headset users were generally given their headset from the IT department- they may have gotten a choice in style (over the ear, on ear, wired, or Bluetooth).
  • For this specific app, it only supports the headsets that have Bluetooth- and those are higher end products. That implies that this user is more of a knowledge worker or executive rather than a contact center worker like some of our wired headsets.
  • Our users for this app generally have multiple endpoints that they are connecting to their headset – 1 or more mobile phones, laptop, iPad, and 1 or more video or phone endpoints.
  • They use Cisco products for general work, but also 3rd party apps as part of their everyday work.
  • They are of “working age” and are both male and female.
  • They are also a global population.

What are the user’s goals?

  1. Change settings (annoyed/curious)
  2. Report a problem/get help (frustrated)
  3. Bluetooth connection issue 

Our goal as designers is to help the user to get the info they need and help them fix the problem they came to the app to solve

Home

Headset name – This is the “friendly name” and it’s what you look for in the Bluetooth menu when you’re going to pair. We let users change this during the first time setup. This is important because in an office where everyone has the same headset, you want to easily be able to find yours. The default is the model number and the last 3 digits of the serial number. 

Headset image – This is a branding element- meant to increase feelings of ownership, customization, and premium product. At a glance users can see what headset they are managing.

Battery life – The icon changes depending on how much battery is left. At very close to 0 it turns red and the text changes to “Recharge now”. We chose to use the format “hours left” rather than a percent for a few reasons:

  • hours left is what the user really needs to know
  • seeing a percentage requires the user to do math to figure out how long they can keep using the headset
  • battery level can fluctuate

*Note: Hours left actually represents talk time – calculated assuming the user is using the headset at full capacity. The actual time could be longer if the user is only listening to music and not using the mics.

Another reason to choose “hours left” instead of “hours remaining” is that -ing words are difficult for translation. This app was localized into over 15 languages!

Equalizer – This is a quick way to both show the current equalizer mode and to change it. There are animations that play when you move the slider.

We chose to put this on the home screen because we wanted to differentiate from other business headsets by having a more “premium audio” offering.

We chose to have just 3 presets as a balance between users who would prefer ultimate control and users who are more casual. Having presets also allows a user to change the EQ directly on some of our headsets by pressing a button to cycle through presets. We thought that users who were really picky about the sound would use the controls in Spotify or Apple Music etc. to fine tune their audio experience. We wouldn’t be able to satisfy those users with our app without alienating our more casual users. So since there was another, better way to tweak the sound for audiophiles, we went with this simpler design.

Bluetooth – We felt that this was one of the most important pieces of information to have on the home screen because one of the main reasons you might be using this app is to figure out what your headset is connected to and fix which devices you are connected to. Our users typically have multiple sources – laptop, cellphone, and desk phone or video endpoint. Since the headset can only connect to two at once (and connects to the first two it finds) it’s important to have a way for the user to 1. find out what’s connected and 2. do something about it.

We put it towards the bottom because that’s where people’s thumbs are and the card is an actionable button that takes you to the Bluetooth management page. There is another way to get to the Bluetooth page from the settings for users that don’t discover the shortcut. 

Navigation tabs – There are a lot of mobile patterns for navigation like hamburger menu, more menu, etc for navigating to different sections of the app. We chose to go with the bottom tabs for a few reasons:

  1. We didn’t really have any issues with vertical space on the page
  2. It’s easier for users who are not familiar with the app. We expect most users will only use the app once if at all so we should expect that they won’t be familiar with hidden or complex navigation. That’s also why we had both icons and text on our nav bar.
  3. The nav bar stays there for all screens so it is easy to get out of deep menus and go back to the home screen or move to another part of the app.

Home screen pre-connection

Users can actually go to the help tab and read about the headset even if the headset itself isn’t connected. The information is downloaded from our help site and stored in the app. This also lets us update the help information without pushing an app update. If users are having issues connecting, they can read in the troubleshooting how to rectify the issue.

Update available

Generally this is a home screen and we aren’t trying to push the user in any particular direction. However, when there is an update available, we do try to guide the user to update with this banner. 

We use a few tricks to achieve this:

  1. Placement at the top of the screen. Most of our users read top -> down, left -> right. So this position is one of the first things they will see. 
  2. Color. Our app is really sparse in color so using this larger color block draws attention.
  3. Animation. The banner animates in, which catches the eye. 

Headset EQ

The guy that tuned the headset EQs was a real audiophile and had a hard time making 3 different EQs because he said the original was perfect and why would anyone want to deviate from that. He felt that skewing the EQ enough for an average user to be able to tell the difference was ruining the audio. So all 3 EQ settings sounded really similar and users couldn’t tell the difference. We were asked to “fix” this issue in the UI and we made these animations to go with changing the EQ so users would feel like there was more of a difference in the EQs.

We also had comments from users saying they didn’t understand when they should use each EQ. We spent a long time debating on what to call each EQ setting. We ended naming them with a label that indicated when they should be used. I think the one that is most misunderstood is “Voice”.

The headset actually automatically uses the Voice EQ when a user is in a call, otherwise I would change it to be called “Podcast”. I think users would be confused if they were on a call and the EQ was labeled Podcast. 

This was a choice that I’m still not 100% sure about, but my perspective as a designer is that at some point you need to make a decision and go with it. Text can be easily changed later if it turns out that there is an issue and it’s more important to make deadlines and hand specs over to engineering instead of becoming a blocker. In some decisions, the design team just doesn’t have enough info or time to make a perfect call. 

Information Architecture

I provided the information architecture for this app. The app can manage several different Bluetooth headsets. Each headset has a different set of settings and features. I kept this organized in a file with the values and defaults for each setting.

How-to

To improve accessibility, we included images and text with our how-to guide. The guide is available offline so users can read it even if they are on a plane or can’t get their headset connected and need help.

B&O Cisco 980 App

B&O App

I consulted with the B&O team to adapt their app to support the co-branded Cisco headset. This included changing the sound modes for the workplace, adding support menus, and revamping the product guide with the updated headset interactions and images.