Duetti

Goal

Craft a visually rich, insight-driven report

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.

Brand Style

Duetti-Inspired Visual Direction

I pulled inspiration from Duetti social media graphics to create a look that's vibrant, energetic, and modern that strikes 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 Sans 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

Bringing content to life with colors and layout

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 our design to life.

Mid-Fidelity

First iteration with graphs and colors in place

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.

Here's a look at our first iteration with graphs and colors in place. I set up the font and color system to keep things consistent across data visuals and screens. We also tweaked the mobile text to cut down on the need for the 'More' button, so key info is easier to catch at a glance. Along the way, we mocked up a new menu button to make navigation smoother. My lead Product Designer jumped in to bring screens to life with artist photos and illustrations.

This is a closer look at one of the graphs I designed to show how streaming preferences vary by genre. This version felt too cluttered and hard to read against the yellow background and green frame, making it tough to distinguish elements. We ended up cutting out this slide due to content changes, but it was something to keep in mind for future iterations.

This design was bold and attention-grabbing, but overall felt tight and the high-contrast pink and lime green colors were too distracting where it overpowered texts 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 feel more in tune with the slide.

Final Design

Adding polish to make this report sing

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 moved forward with the developer handoff.

We fine-tuned our fonts and colors to make the 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. Our lead designer 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.

I created a color library and font guide to simplify our workflow. Duetti's dark forest green (#003C18) and lime green (#CEE44A) form the foundation, with vibrant purple, yellow, pink, and red for data visualization. Fonts: Maax Unicase for headers, Nunito Sans for body text.

Introspective

Next Steps

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.

Learnings

Working in a fast-paced environment meant adapting quickly, understanding the business side, 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.