DISCLAIMER:
Some details of this case study are intentionally redacted to honor an nda
June 2023 - September 2023 (2.5 months)
User Experience Design Intern
Shure Design Team
After working at two startups, my curiosity about larger companies' design approaches led me to join Shure as a UX design intern on their general design team, where I worked on everything from design system maintenance to product redesigns.
As a musician and an avid user of Shure's microphones, I was fascinated by Shure's focus on audio. I was lucky to have amazing supervisors, who allowed me to go beyond the scope of my assigned task and explore my areas of interest, in the form of various smaller projects. Overall, this internship was a perfect introduction to audio-specific UX design, blending my passions for design and music.
In this case study, I discuss two of the projects I worked on:
PRISM 3 COMPONENTS - cerated 15 new components for Shure's design system
BEGINNER WORKFLOW - simplified equipment error handling for beginners
Prism 2 (Shure's previous design system) lacked several audio-specific components, and needed a revamp. Designers had several requests for missing components, and had to create them on the go, losing valuable time.
I added 15 new components to Prism 3, tailored to designers' needs, with enhanced customization through variants and instance swaps. All were approved for publishing.
Some components required additional research regarding their use. For example, I explored the ways in which segmented controls were used, to create a new and improved component.
Segmented controls are a set of mutually exclusive options, presented horizontally. The examples I explored are below:
Segmented controls competitive analysis
My research revealed that most segmented controls had 2-5 options and commonly used hover, selected, and focus states. The options differed in shape from standard buttons and were often visually connected.
Prism 2 recommended 3-5 options for segmented controls to avoid selection ambiguity. However, my research showed that two options could be effective if the selection state was clear. Below is an example of Apple TV using a two-option segmented control, which might lead to selection ambiguity:
Apple TV - 2 option segmented control
While 'TV Shows' is clearly selected, the gray color might create ambiguity, as it's often linked with disabled states. To avoid this, I chose Shure's signature green for the selected state in my segmented control.
To design components like audio meters and gain faders, I needed a deeper understanding of details like peak-indicator animation and decibel scales. I interviewed designers who worked on relevant software to gain insights into their use of these components.
The primary concern was that some components required manual adjustments due to spacing constraints or unique use cases, leading to visual inconsistencies across different products and disrupting the design process.
I learned about the difference between logarithmic and decibel scales, as well as the behavior of peak-indicators. I also learned about some of the components' use cases, which included horizontal and vertical input channels. I kept all of these things in mind when creating the updated designs.
Even with lower-level components like segmented controls, we tried to stay inspired by other components. For example, the design is highly influenced by the default and disabled state of bright small buttons.
Default & disabled states of bright small buttons
I increased the padding by 4px to create a distinction between the two components, and connected the buttons. The selected option is bright green and rounded, making it obvious and efficient in the case of two-option segmented controls.
segmented controls old vs new iteration
After creating the first iteration, I ended up increasing the opacity of the default state font, to make sure that the contrast is sufficient. Below is the final, published version, as of September 2023.
segmented controls final
While some manual adjustments may still be necessary, the new components are designed to offer maximum customization. For instance, I used instance swaps to make fader and meter scales highly customizable, reducing the need for designers to detach instances.
Scales and their properties
Given the most common use cases for faders, vertical and horizontal input channels, I created two detailed variants. These variants allow designers to hide/show right/left scales and numbers, switch between scales (decibel/log), and toggle between component types (meter/fader).
by the end of the internship, I created over 15 components, which were approved for publishing.
15 published Prism 3 components
Many of the components I worked on, including the icon buttons, standard buttons, the layouts, the text inputs, the two-option segmented control I advocated for, and more, made it into Designer 6, released in February 2024.
Designer 6 screenshot (source)
I learned a lot about specific Figma functions and components, from instance swaps, to nested instances, and more. I also got to learn about the format and organization of design systems, especially in the context of larger companies. This helped me understand how to utilize design systems in my designs correctly moving forward.
The main challenge was navigating the learning curve of Shure's organization of Prism 2 and my initial inexperience with Figma's component functionalities. I owe a huge thank you to my supervisors, Christina and Anna, who were always available to answer my questions.
Many of Shure's customers do not have the necessary technical knowledge needed to use the software that comes with microphones. This creates an intense learning curve, especially when equipment is rented, and malfunctions.
Add a beginner workflow to Shure's software, simplifying error handling through abstraction of information.
To learn about the issue users have with the software, I watched 5 user interviews, which included product walkthroughs.
user testing video
Users had a hard time understanding where their equipment was visualized. They were also unfamiliar with microphone types, and were keen to simply follow the onboarding instructions on the screen, and make the microphones work.
DISCLAIMER: designs are intentionally blurred to comply with an NDA
Shure had existing wireframes of desktop beginner error handling flows created by the design team, which I was tasked with improving.
Imagine the following scenario: you just rented a few of microphones for an event, which for some reason, do not seem to work. You now have to fix them, so you open the software they come with and see the following:
initial home screen Wireframe with MY notes
Based on my evaluation, I identified various usability issues with the wireframes, which included excess information, a confusing layout, as well as distracting visuals. While designing the next iteration, I kept in mind that the user is probably extremely stressed out at that point, and simply wants the equipment to work.
I noticed that the device card error states in the original wireframe were quite vague, so I made sure to make them pop out more with a red border, and added the error type. I also replaced the red checkmark with an 'error' icon, since checkmarks are usually associated with success.
equipment error state iterations old vs new
Users simply needed to see the malfunctioning devices. Thus, I hid information such as location-based optimization, and the wireless spectrum forecast. I also moved the 'getting started' section down in the hierarchy, since it is not relevant when the user is in a crisis.
home screen iterations 1 & 2
In addition to bringing the malfunctioning devices to the center, I made sure to signify their amount, and add a section with the devices that are working, which is hidden by default.
Finally I added a "Fix Now" CTA at the top of the screen, along with a general error message. I also added a secondary CTA to each device card.
Another issue with the previous design was that each device card represented multiple malfunctioning devices referred to as "channels," categorized by device type. Since beginners might not know that a channel is in the context of the software, I decided to simply list all of the individual devices, making it easier to assess the severity of the error.
Bellow are the screens in order.
User segmentation screen
home screen showcasing an error
popup once the user clicks on a cta
This project taught me that simplicity wins, especially in stressful situations. The main thing that helped me with creating the home screen was taking the users' mental state into account, and prioritizing their main concern - identifying which devices are malfunctioning, and taking the first step to fix them.
The main challenge was leaving my own bias and knowledge regarding audio and microphones behind, and "pretending" to be a complete beginner when designing.
There are some small details missing from the wireframes, such as cancel/back buttons, which limit user control.
These wireframes only cover part of a the product's error state, with the next steps being completing the design of the guiding popups, and creating additional states. Then, the wireframes should be refined through user testing.
Despite interning remotely, I felt highly immersed in Shure's culture, which emphasized collaboration and innovation. While being part of the team, I was extremely inspired by my supervisors' visual design and research techniques. For example, while conducting user research for a brand new app, I learned how to avoid bringing your own bias into testing sessions.
Mike, my mentor, was a huge influence on how I currently design. His emphasis on making things as simple as possible has become a staple in my design philosophy, and has inspired me to take a step back and evaluate my designs from the perspective of intended users. In addition to enriching my design skills, I gained insight into the way audio equipment works. This has improved my recording process, and sparked my interest in audio mixing.
The most valuable lesson I learned was that everything is just a question away. By reaching out to fellow designers and offering to help, I was able to explore additional audio-focused mini projects, and thus leveraged my background as a musician, utilizing this opportunity to the fullest.
This was an amazing experience I won't forget! By the way, Chicago was beautiful.
a few photos from my orientation week
Thanks for reading :)
