Brief

Spoverlay is a public OBS plugin that lets streamers display their currently playing Spotify track directly on-stream using a browser source. The client approached me to redesign their existing AI-generated overlay, which had major limitations in both visual clarity and customization.

The goals were to:

• Clean up visual hierarchy and sizing issues

• Remove the Spotify logo to avoid platform issues

• Create a clean, modern design that was both aesthetically pleasing and practical for live use

• Offer multiple layout variations for different use cases
  
  

Process

1. Audit & Exploration

I reviewed the AI-generated design and pinpointed its weaknesses: poor text sizing, inconsistent padding, limited scalability, and unclear branding. After discussing the client's needs, I focused on reworking the overlay with user-first clarity and streamer flexibility in mind.

2. Ideation & Direction

I sketched three layout concepts in Figma:

• A cleaned-up version of the original

• A compact, minimal pill-style layout

• A large, immersive layout for music-focused streams

I also introduced a light design system with scalable sizing, modular layouts, and dynamic color rules based on album art.

3. Visual Iteration

I explored:

• Custom color themes that auto-adapt to album art

• A frosted glass effect for overlays placed directly on live gameplay

• Use of symbolic separators (like a four-pointed star) to speak to younger, design-aware audiences

• Readability improvements through refined typography and padding
  
  

Final Designs

Their old design

My Designs

#1 - Original Design Recreated

First, I recreated their original design in a scalable format with better text sizing for enhanced readability. I increased the album art size to create more symmetry in the design and allow the art to stand out more. I also improved the visual hierarchy by adapting the spacing, type size, and color usage.

#2 - Pill Design

Next up, I wanted to create a design that better fits the use case of the product. I realized that, as this is a stream overlay element, the stream should remain the main focus, so I wanted to create a smaller design that would support that.

I used a new color scheme (users are able to customize these colors as they wish, and the color adapts to the album art by default) to match the album art, and make a fade-out effect between the album art and the text elements to make it look cleaner. I also used the four-pointed star symbol as a separator, which is popular with the younger demographic that would use a product like this, and makes it stand out as more creative and unique.

I also created a frosted-glass effect version of this, where the background will adapt and blur based on the image behind it.

Without BG

With BG

#3 - Large View

Finally, I made a larger variation for cases where the person streaming would want the overlay to remain one of the key pieces of the stream. For example, if the streamer is listening to an album live on stream and doing a reaction/review of it. This one also features a frosted glass effect, and has its type color adapted based on the album art.

Without BG

With BG

End result

The client loved the final results and plans to implement all three overlays as user-selectable styles within Spoverlay.

Here's what they said about my work:
"Connor delivered exactly what we needed for our music overlay integration. He designed an intuitive and responsive interface that integrated perfectly with our product, significantly enhancing the user experience. His UI/UX design skills are excellent, and he was friendly and reliable throughout our work together. I would definitely work with him again for future design projects."