Steve LaFrance's Portfolio

Hypothesis:
The waveform display area is the most important part of the user interface. Regardless of the function being accessed, the waveform should remain visible at all times to ensure users can continuously monitor signals while interacting with other features.

Prototype Application:
To test this hypothesis, all on-screen menus were designed to be partially transparent, allowing the waveform display to remain visible even when interacting with the menus.

Test Results:
Internal testing revealed that the partially transparent menus made it difficult to read and interact with the content. The underlying waveforms created a distracting visual noise that slowed users down and hindered their ability to quickly and accurately comprehend the menu options.

Ideation:
In response to the testing feedback, the level of transparency was reduced, but not completely eliminated. This approach aimed to balance the original hypothesis of maintaining visibility of the waveform with improving the readability and usability of the menus.

Test Results (Revised):
Further user testing revealed that over 90% of users still found even the reduced transparency difficult to work with and unappealing. When shown alternative mock-ups with varying levels of transparency, users expressed a strong preference for completely opaque menus. Based on this feedback, all menus were updated to be fully opaque, ensuring clear, legible content without distraction from the waveform display.

Initial menu transparency approach

Initial menu transparency approach

Second iteration menu transparency

Final menu transparency

Hypothesis:
Users are most familiar with UI controls placed at the top of the application. Based on current design paradigms, all buttons and menu controls should be positioned in a control bar at the top of the screen.

Prototype Application:
In the prototype, all UI controls were placed in a “control bar” at the top of the application. To accommodate touch interaction, this control bar was designed to expand vertically, providing more space for interaction.

Test Results:
User feedback revealed frustration with the large, dominant “control bar” at the top of the screen. Testing showed that users felt it was too prominent and often distracted from the main task at hand. This issue was especially noticeable when menus were only partially populated, leaving large blank spaces that contributed to a cluttered and inefficient layout.

Ideate and Test Results:
In response, the menus were condensed, and the multi-tab design was eliminated. However, further testing revealed that this adjustment did not fully address users’ dissatisfaction with the layout. Despite the reduction in size, the control bar remained a visual distraction.

Ideation and Test Results (Revised):
A more significant redesign was implemented in conjunction with additional rounds of testing. The menus were completely restructured and relocated to a “control bar” on the right-hand side of the screen, freeing up space at the top. Floating menus were introduced to further streamline the interface. Additionally, the entire control area was reskinned with a darker color palette, aligning better with the physical product’s design aesthetic. This update improved the overall user experience, reducing visual clutter and increasing usability by focusing attention where it was needed most.

Hypothesis:
UI control areas should be color-linked to the exterior color of the physical product to create strong contrast with the waveform display area (which is presented in black), enhancing focus and usability.

Prototype Application:
In the initial prototype, all UI control areas were presented in a light gray tone, reflecting the light gray color of the physical product.

Test Results:
Internal testing revealed that users disliked the strong contrast between the light gray UI controls and the black waveform display. The high contrast resulted in eye strain and distracted users from the critical information presented in the waveform area.

Ideation and Testing:
To address this, multiple color combinations were tested for the UI control areas. Three distinct “tone” sets were chosen for further testing. The design team initially hypothesized that the slightly darker tone would be the most popular, as it would offer a compromise between contrast and comfort, while still supporting the original idea of linking the UI color to the physical product.

Test Results (Revised):
User testing revealed a surprising preference: nearly 80% of participants selected the darkest “tone” for the UI controls, contrary to the team’s expectations. Only 7% of users preferred the middle “tone” that the design team had anticipated to be the most popular. Further investigation uncovered that the darker tone better anchored the UI within the overall product design. The large black glass area separating the UI from the physical product made the darker UI color feel more cohesive and integrated with the product, reducing the sense of visual separation and enhancing the overall user experience.

Selected color scheme in product

Initial control area color scheme

First alternate control area color scheme

User selected control area color scheme