At Bose I led the engineering effort and the UX/UI design of prototypes that compare different products to use on focus groups. I received support from product and visual design to integrate assets and make sure my designs and prototypes met their goals.
React.js • Miro • InVision • AdobeXD
Problem: Create a prototype to compare the OpenEar and Traditional headphones and show how you hear the music in the world against a control.
Design Decisions
Compare side by side:
Using multiple visual representations of the product lets the user know which one they are testing, there is emphasis placed on the selected product.
Audio controls:
Audio controls are clear and large, utilizing white space, contrast and clean alignment so the user understands where to click and what they are hearing.
Coloring Contrast:
The color contrast gives the user a better feel for when they are using noise cancellation features vs not. It also helps them understand the difference between the products from a visual perspective and enhances the overall experience and understanding of the products.
Sound design:
The sound design lets you hear the products using the same tracks that are coded to play starting where the last one ends so users can flip between the two products and hear the precise differences in sounds.
Problem: Create a prototype to compare multiple products and demonstrate how they sound different from each other in different scenarios. This would be used to test on focus groups to help them choose what product would work for their lifestyles as well as gather data on demographic and preferences
This interactive prototype is also a compare tool between various products that sound different in different scenes. It leverages successful decisions made in the first prototype and builds on it.
Design Decisions
Radio buttons:
The design problem of showing a lot of information about each product while maintaining a simple interface was solved by using radio buttons that change the information shown based on what you are clicking. The choice to add a visual of the product was used as an enhancement so that the user doesn’t only have to read what product they are using, but they can see it too.
Other visuals:
The background visuals were determined based on the scenario and give the user a better feeling for where they are supposed to be during the test, and what they would hear in the background (or not hear if they are using a noise cancelling product).
AudioVisual:
The audio is coded such that you can change the product you are using and it picks up where it left off on the track but with the differences in audio that each product presents. The audio control had to be large and was placed on the screen in line with the radio buttons to show the user exactly where they should be interacting with the prototype.
Problem: Using interfaces that were the most successful in our research focus groups, create a map that compares the differences in products in a more creative and interactive way.
Design Decisions
The map:
The map was chosen to show multiple different scenarios where the user can be and really give them a holistic view of potential experiences with various products. The pins are used to show different products and each have a hover-state that shows them a real person wearing the product. This was done to help the user feel more connected to the product and understand which one they are clicking when they hover over it.
Individual prototypes:
Each prototype was created based on extensive testing of multiple prototypes for each product. The users then provided feedback about which prototypes they liked best, why they liked them (or didn’t) and then the best combination of the features were put together for each product as a result of those user research sessions. Each prototype was meant to highlight a different aspect of the product so the users would be able to make a better choice of their favorite product, while testing the products against each other and within itself.
Consistent information display:
While each prototype varied based on the product, there were some pieces that we chose to keep consistent. For example, the top part always showed the best features of the product, which could be very different between the products. They were put there with little visuals to help the users understand the differences between each product and help them better choose their ideal product. The pictures are blown up versions of the little picture they got on the pins in the hover-state and help keep the overall design consistent.
This interactive prototype is for Bose Hearing Aids that can be found at https://www.bose.com/en_us/products/headphones/earbuds
The prototype is on the website to emulate the smartphone experience you will get with the new product.
React.js • Miro • AdobePS • AdobeXD
Design Decisions
Audio:
The steps were made such that there is a clear difference in each step and the audio was coded so that it doesn’t stop playing the track while the controls are being affected. This was done so the users can feel like they are changing the hearing aids in real time and get a full sense of how they would do it in a real-life situation.
Calibration:
The user can adjust their volume through matching the video, so the choice was made to add a video prior to the experience. This contributed to error prevention as well as gave users a way to recover from a human calibration error.
Multiple scenarios:
The user can hear the way the hearing aids act in multiple different scenes. The audio accompanied by the large still visual helps users understand where they are, what they are hearing, and how the hearing aids will affect their day to day life experiences.
Audio controls:
The audio controls had to be at the forefront of the design and had to stick throughout the experience so that the user would understand that the hearing aids can be changed in every scenario. The audio control had to be very intuitive and universal to the users. It had to be a familiar way of adjusting volume with clear labels that indicate what part of the volume they are adjusting.