DISCLAIMER: This case study is intentionally vague to comply with an NDA and protect confidential information.
June 2023 - September 2023 (2.5 months)
User Experience Design Intern
Shure Design Team
After working at two startups, I grew increasingly curious about larger companies' approaches to design. I joined Shure as a user experience design intern on their general design team, which was responsible for everything from design system maintenance to curation of complex product-specific flows. As an avid user of Shure's microphones and a musician, I was immediately fascinated by Shure's "niche" domain, which includes everything audio.
Throughout my internship, my supervisors, Mike, Kevin, and Anna, were incredibly supportive, allowing me to go beyond the scope of my assigned project and explore my areas of interest. I got to work on various smaller projects, some of which benefitted from my experience as a recording artist. I also got to "learn their ways," and hear about the variety of cool projects Shure has in store. Looking back at my internship, this was a fantastic introduction to audio-specific UX design, allowing me to find the intersection between two of my biggest passions: design & music.
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.
Working in collaboration with Christina, a talented designer, I added 15 new components to Prism 3, which were approved for publishing. The components were based on the designers' needs, and included augmented levels of customization thorough variants and instance swaps.
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:
According to my findings, most segmented controls had 2-5 options, and mostly utilized hover, selected, and focus states. The options' shape was different from standard buttons, and they were often visually connected.
Prism 2 recommended segmented controls to have 3-5 options, due to potential selection ambiguity. According to my research, two options were not necessarily ambiguous as long as the selection state was clear. Below is an example of how Apple TV utilized a two-option segmented control:
The option's selected state makes it known that 'TV Shows' is selected, however the gray color might lead to some ambiguity, since it is often associated with disabled states. Thus, for my segmented control, I chose Shure's signature green as the selected state.
When it came to creating components like audio meters and gain faders, I needed more background to understand details such as peak-indicator animation, proper decibel scale, and more. Thus, I ended up interviewing various designers, who worked on relevant software, to understand their use of the components.
It seemed like the main concern was that some components needed manual adjustment due to spacing constraints/unique use cases. This contributed to visual inconsistencies across different products, and disrupted 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.
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.
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.
While some manual adjustment might still be needed, the new components should provide as much customization as possible. For example, I utilized instance swaps to make scales for faders and meters as customizable as possible, so that designers do not have to detach instances.
Since the most common use cases for faders were vertical and horizontal input channels, we decided on two variants. The properties were quite detailed, allowing designers to hide/show right/left scales and numbers, and switch between scales (decibel/log) and component types (meter/fader).
by the end of the internship, I created over 15 components, which were approved for publishing.
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 on February 2024.
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 also helped me understand how to utilize design systems in my designs correctly moving forward.
The main challenge throughout this project was the learning curve when it came to Shure's current organization of Prism 2, as well my inexperience with component-related functionalities in Figma. I owe a huge thank you to Christina and Anna, who were the supervisors of this project, and were always around 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.
Add a beginner workflow to Shure's software, simplifying otherwise complex tasks through abstraction of information.
To learn about the issue users have with the software, I watched 5 user interviews, which included product walkthroughs.
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.
Shure had existing wireframes of desktop beginner 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:
Based on the interviews, 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.