Summer at Shure.

≈ 7-min read

A screenshot of Shure's Design System

DISCLAIMER: This case study is intentionally vague to comply with an NDA and protect confidential information.

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

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.

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.

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:

Segmented controls competitive analysis

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.

2 options are not ambiguous.

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:

Apple TV - 2 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.

    User interviews

    Audio-specific components were more complex.

    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.

    Main insights

    Visual inconsistency, and lack of customization.

    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.

      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 do we increase visual consistency, and minimize the need to detach 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.

      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.

      final version of segmented control

      Audio-specific components needed more variation.

      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.

      scales and their properties

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

      Final designs

      15 published components.

      by the end of the internship, I created over 15 components, which were approved for publishing.

      15 published Prism 3 components

      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 on February 2024.

      Designer 6 screenshot (source)

        Main takeaways & challenges

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

        PROJECT 2

        BEGINNER WORKFLOWS

        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.

        SOLUTION

        Create beginner workflows.

        Add a beginner workflow to Shure's software, simplifying otherwise complex tasks 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 Interview Screenshot (blurred for privacy)

          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.

          ideation

          I looked at existing wireframes.

          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:

          Initial Beginner Flow Wireframe with notes (simplified for confidentiality)

            Think like a beginner.

            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.

              Opportunity

              How do we increase visual consistency, and minimize the need to detach instances?

              A downward arrow