≈ 8-min read

A screenshot of Shure's Design System
A downward arrow
≈ 8-MIN READ

Shure INC.

Components & Error Workflow

≈ 8-MIN READ
≈ 8-MIN READ

DISCLAIMER:
Some details of this case study are intentionally redacted to honor an nda

CONTEXT

|Internship

June 2023 - September 2023 (2.5 months)

|My Role

User Experience Design Intern

|Team

Shure Design Team

|Prologue

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.

|Challenges

  • Unfamiliarity with Shure's Design Language
  • Domain Knowledge Gap
  • Advanced Figma Components

|Impact

  • Over 15 components, currently published!
  • Internal product design website, developed this year!
  • Created audio-specific layouts, focusing on user segmentation
  • Participated in user research for a brand-new app

PROJECT 1

PRISM 3 COMPONENTS

PROBLEM

|Outdated components.

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.

SOLUTION

|Customizable components, based on designers' requests.

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.

Competitive analysis

|How did other products use these components?

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:

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.

|2 options are not necessarily ambiguous.

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:

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.

User interviews

|Audio-specific components were more complex.

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.

Main insights

|Visual inconsistency, and lack of customization.

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.

|Audio-specific components had unique requirements.

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.

Opportunity

|How can we improve visual consistency and reduce the need to detach component instances?

Iterations

|Components should reference each other.

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.

|Audio-specific components needed more variation.

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.

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).

impact

|I made it into Designer 6 :)

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.

lessons learned

|What I learned from this project.

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.

PROJECT 2

BEGINNER WORKFLOW

PROBLEM

|Products are too technical for beginners.

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.

SOLUTION

|Create beginner workflow.

Add a beginner workflow to Shure's software, simplifying error handling through abstraction of information.

USER INTERVIEW ANALYSIS

|I watched the users struggling.

To learn about the issue users have with the software, I watched 5 user interviews, which included product walkthroughs.

user testing video

Main insights

|Users just wanted to make it work.

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

Heuristic evaluation

|I looked at existing wireframes.

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:

|Think like a beginner.

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.

Opportunity

|How can I help beginners take the first step towards fixing the devices?

ITERATIONS

|Errors needed to be straightforward.

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.

|I removed unnecessary information.

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.

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.

|Show, don't tell.

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.

lessons learned

|Simplicity & empathy rule everything.

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.

next steps

|So what's next?

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.

reflection

Interning at Shure

|First time at a big company.

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 :)

Other projects

MOMENTS
(PASSION PROJECT)
Location-Based Music-Sharing.
Music Room Login Screen
MOMENTS
(STARTUP)
Location-Based Music-Sharing.
Music Room Login Screen
QR MENU
(INTERNSHIP)
Onboarding Process Redesign.
A screenshot of QR Menu onboarding
COMING SOON