Duetti

Enable artists get paid upfront for their music catalogs

TEAM

Product Designer (Me)

Lead Product Designer

General Manager

Engineer

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

PROJECT TIMELINE

December 2024 – January 2025

(2 months)

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

OUTCOMES

~7%+ artist traffic boost

~3% artist conversion rate

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

LINKS

Live now

https://report.duetti.co ↗

PR Newswire article ↗

appleworld.today article ↗

Music Ally Article ↗

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Overview

Duetti helps independent artists a new way to make money by selling their tracks upfront instead of relying on streaming royalties. The company promotes these tracks through playlists, YouTube, and marketing campaigns, giving artists more financial stability and control over their careers.

Goal

Our goal was to craft a visually rich, insight-driven economic report that simplifies the financial landscape for artists and clarifies catalog ownership. The report unpacks key streaming trends in the music industry, and my role was to design data visualizations for the desktop and web app, making these insights more tangible and accessible.

Concept

I pulled inspiration from Duetti social media graphics to create a look that’s vibrant, energetic, and modern—striking a balance between professionalism and boldness. Here are a few sample covers that capture our design direction.

The Duetti brand has a distinct and ownable look, using an incredibly punchy, almost neon green paired with a darker forest green in all of their designs. The typeface using Maax Unicase and Nunito Saans is also striking with quirky, heavy letterforms. Overall, the Duetti brand looks modern and trendy.

Here are some sample covers from Duetti’s past social media branding using bold, high-contrast style. The design brings in artist cover photos to connect with target audience, while combining other vibrant colors to make data feel dynamic and engaging. I extracted from their fonts, color styles, and overall design direction to shape the look of our report’s data visualization.

Wireframes

Most of the content was already written, so my job is to present the copy and visualize the data to be visually arresting and highly consumable.I brought the content to life with colors, visuals, and layout. Since this will be a slideshow-style experience, we’re focusing on clarity and readability for a smooth, scrollable transition.

This is a map of our early wireframes with title case and body copy. We tested a few data visuals to get a good look with what our design should look like for web and desktop, but I was responsible for bringing the design to life.

Mid-Fidelity

I explored different approaches and landed on this in our mid-fidelity stage, but it still felt flat, missing the nuanced and robust feel we were aiming for. While the team refined the copy, I fine-tuned the data visuals for accuracy and established our font and color system to create a more cohesive and efficient workflow.

This was our first iteration, with graphs and colors in place. I created the font and color system to keep everything consistent, while my lead Product Designer added artist photos and illustrations that brought more depth and character. It was a good starting point, but we needed to refine it further to make it feel more polished and aligned with Duetti’s brand.

This is a closer look at one of the graphs I designed to illustrate how streaming preferences vary by genre. This version felt too cluttered and difficult to read against the yellow background and lime green frame, making it hard to distinguish key elements. We ultimately cut this slide due to content changes, but it’s something to keep in mind for future iterations.

This design was bold and attention-grabbing, but it felt tight overall. The high-contrast pink and lime green were too distracting, overpowering the text and data points. We also swapped out the pill-shaped dropdown since it didn’t quite fit the aesthetic and needed a color adjustment to better align with the slide.

Final Designs

For the next review, we focused on the details and adding polish to make this report sing. We focused on adding texture through rich geometry and photography, and evoking a playful vibe with slightly off-kilter layouts. After refining the data visuals for clarity and accuracy, we got the green light and move forward with the developer handoff.

We fine-tuned our fonts and colors to make data visuals feel more balanced. Some colors weren’t reading well, so we adjusted the color styles for better clarity. I suggested a wine red for slide four to improve contrast with the lime green—it was approved and helped the design feel more polished and cohesive. Our lead PD added new illustrations and photos that really brought everything to life.

This is a closer look at one of the charts I designed, using bold neon orange and pink to highlight the contrast between Spotify's rising consumer prices and declining artist payouts. My lead PD created a geometric background that adds visual interest without overpowering the graph. I also replaced the pill-shaped dropdown with a green vibrant rectangular one for a more unified look. The result came out cleaner and more digestible without losing impact.

I designed this graph to highlight the rise in Discovery Mode adoption. The smooth curve and evenly spaced data points guide our eyes naturally, while gradients add slight depth without clutter. The bright yellow markers stand out against the dark green background, highlighting key data without distraction.

Documentation

I set up our font and color system to keep designs consistent and make the workflow more efficient. This helps act as a guide that helps the team stay consistent and organized on the project’s vision that'll provide a smooth handoff from design to development.

I created this color library to simplify our workflow. Duetti’s dark forest green and lime green form a bold yet balanced foundation for logos and typography. For data visualization, we used vibrant purple, yellow, pink, and red enhance to create contrast to guide slide transitions. Tertiary colors consist of orange, bright green, and lavender to represent music platforms with black and white for labeling.

I put together a font guide for desktop and web app using Duetti’s existing fonts—Maax Unicase for bold, standout headers and Nunito Sans for clean, easy-to-read body text, labels, and buttons. This pairing keeps things sharp and modern while staying true to Duetti’s style.

Retrospective

Once the design was approved, we handed it off to our developer, who brought it to life with animations, motion, and interactivity. The report went live soon after everything was finalized.

Working in a fast-paced environment meant adapting quickly, understanding the business model, and over-communicating with the team. It was a challenge I had to figure out on the spot, but it was a crucial growth edge for how quickly and thoughtfully I can work as a product designer.

Live at https://report.duetti.co/View

Duetti’s economic report ↗