Jingle Package Design System
Role: Project Lead & UI Designer
Software: Figma
Objective: Redesign the ReelWorld’s jingle package page template and create a design system
Jingle packages are project showcases that spotlight new sonic brands created for radio stations around the world. 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 a brand new page layout, a new music player, a new package recommendation section, and a new way to highlight the package features.
I was responsible for creating the low-fidelity wireframes, high-fidelity wireframes, the design system, 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
For the new page layout, I moved the headline text and demo player to be aligned side-by-side and visible above the fold. Secondly, I moved the client quote higher up the page to give it the prominence it deserved. After the client quote, there is a brand new mix-out player which allows the user to switch between themes seamlessly.
Following the mixout player, there is an updated design for the package features section with an icon for each unique package feature. Lastly, there is a new section ‘you may also like’ which allows the user to find similar-sounding packages without having to go back a page.
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.
Sample component sets
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.
UI components and styles
Below are example components and the respective states.
Early wireframes/design exploration