ReelWorld Jingle Packages Redesign

Jingle Package Design System

Role: Project Lead & UI Designer

Software: Figma

Objective: Redesign ReelWorld’s jingle package page template and create a design system.

ReelWorld jingle packages are project showcases that spotlight new sonic brands created for radio stations worldwide. Along with showcasing the new sonic brands, these pages also serve as a sales tool to sell these packages to other radio stations. This redesign showcases all new components, starting with a new page layout, a music player, a new package recommendation section, an icon set to highlight the package features, and the addition of a secondary typeface.

I was responsible for creating the low-fidelity wireframes, high-fidelity wireframes, the design system patterns, the implementation of the new template to all current jingle packages, and the handoff to the development team.

View a live page to see the template in use.

New page layout

Comparing the new vs the old layout

One of the driving changes to update the jingle package template was to create a more modern/refreshed-looking page layout. Starting with the top section you can see how the headline text and demo player are more prevalent vs the old layout. The old layout felt flat and stuck in the past. Using dynamic SVG sections, the user’s eyes are led down the page.

Another key component of the new page layout is making the client quote visible higher up on the page. Besides the top-quality audio, hearing from the client how happy they were with the product ensures better sales for that package.

The biggest hurdle for this layout was creating the new mixout player. I wanted to design something that was much more concise but easy to navigate. The CCO wanted to keep the list view from the old page layout so we settled on having two views for the mixout player: the tile view and the list view.

Another section I felt that needed more prominence was the package features section. I decided that creating an icon set for each package feature allows the user to understand what they are getting versus a wall of text.

Lastly, the team decided to add similar packages at the bottom of the page so potential clients could easily navigate the format they were in without having to go back to a page to select another package.

Creating a new mixout player

A key part to the user experience on these pages is the mixout player. One of the biggest challenges I had to solve on this project was how do I create a new mixout player to sample the package audio. The previous mixout player fell off the visible area of the screen and the user had no easy way to pause, scrub through the audio, or go to the next track.

Below is a small sample size of some low-fidelity wireframes to try and solve this problem.

In this early phase of exploration, I was focusing on showing as much information as possible but not overwhelming the user. The tile direction was a favorite initially, but I wasn’t limiting myself to exploring what was possible.

The final UI design for desktop and mobile

When creating this new template for my team, I wanted to ensure I created components that made designing these pages as smooth as possible. I wanted my team to focus on the page's design rather than building components each time. This mixout player component is an example of a “flexible component” that allows my team to change states, the number of tiles, the view, and the color scheme.