Integrating a branded audio experience into Submarino’s e-commerce ecosystem
In 2019, when podcasts were first gaining momentum in Brazil, Submarino was positioned as a pop-culture authority with a dedicated fanbase. To deepen this connection, we launched "Que Que Tá Acontecendo?" (What’s Going On?)—a branded podcast tackling progressive themes like LGBTQIAPN+ rights, feminism, and racial justice through the lens of books and media.
Moving beyond traditional retail, we designed a native, full-featured podcast player integrated directly into the Submarino app and website. This allowed us to bridge the gap between cultural conversation and the shopping experience, turning high-value content into a core retention driver while maintaining a presence across all major audio platforms.
My role
Lead Designer & Concept Co-Creator
Foundational Strategy: I co-authored the initial concept, moving the project from a "marketing idea" to a functional product. I helped define how a branded podcast could actually drive retention and utility within our ecosystem.
End-to-End Design: I owned the entire design execution for iOS, Android, and Web. This meant taking the project from benchmarking and user flows to the final high-fidelity interface, ensuring a seamless experience across all platforms.
Content-to-Commerce Integration: I designed the logic and UI for contextual product tie-ins, allowing listeners to discover and buy items mentioned in episodes (like books or games) without interrupting their experience.
Cross-functional Collaboration: Serving as the sole Product Designer in the Branding unit, I worked closely with Copywriting to ensure the brand’s bold cultural voice was baked into the product’s usability.
Timeline
6 months
Translating cultural authority into a product experience.
Submarino had a rare advantage: a genuine, non-transactional bond with its audience. In a polarized 2019 Brazil, the brand wasn't afraid to take bold stances on social issues. The real challenge was figuring out how to transition from "selling products" to "hosting conversations" without losing that authenticity.
From a product perspective, we had to manage a delicate balance: launching a new media vertical that felt like a premium entertainment service rather than a marketing tool. If the experience felt like a long-form sales pitch, we would alienate our core fans. We needed to build a native player that prioritized cultural relevance first, ensuring the commerce features felt like a helpful shortcut rather than a commercial intrusion.
We treated this as the launch of a new product vertical, which required a deep dive into the established habits of podcast listeners. We didn't want to reinvent the wheel; we wanted to match the standards of the world’s best audio platforms.
Competitive Benchmarking: We dissected industry leaders like Spotify and Apple Podcasts. This helped us map out the "non-negotiable" UI patterns—things like precise scrubbing, playback speed controls, and intuitive skip-back buttons—that users expect as a baseline for any audio experience.
User Expectations: Through surveys and audience analysis, we realized that our "Sublovers" were tech-savvy and design-conscious. They wouldn't give us a "pass" just because we were a retail brand; in fact, their expectations were higher.
The Key Insight: We discovered that a "lite" or clunky web player would be a total dealbreaker. To earn a spot in our users' daily routine, the product had to feel like a dedicated podcast app. If the utility didn't match the quality of the content, the project wouldn't survive the first episode.
Our core strategy was to transform the podcast from a standalone marketing asset into a content-driven shopping ecosystem. We wanted to move beyond the traditional "interstitial ad" model and create a seamless bridge between a cultural conversation and the products that fuel it.
01
The "Anti-Ad" Philosophy: To maintain the brand’s authority in progressive spaces, we decided that the content must remain sacred. The strategy was to keep the audio purely editorial—no mid-roll "hard sells"—preserving the host’s credibility and the listener's trust.
02
Commerce as a Utility: We identified that the biggest friction in branded content is the "Listen-to-Buy" gap. Usually, if a listener likes a book mentioned in a podcast, they have to stop, open a browser, and search for it. Our approach was to treat commerce as a feature of the player itself—positioning curated products as helpful resources related to the episode’s theme.
03
A "Native-First" Ecosystem: While we distributed the show on all major platforms, the strategy was to offer the best version of the experience inside our own app. By offering native features like contextual product lists and one-click "add to cart," we gave users a functional reason to choose our platform over Spotify.
At the time, the lines between Branding and Product were blurred. Without a dedicated Product Manager or direct access to a UX team, I had to act as the primary architect of the experience, relying on a mix of research, benchmarking, and quick feedback loops.
Defining the MVP through Intuition: Recognizing that a "lite" player wouldn't cut it, I mapped out the essential requirements that branding projects typically overlook. I prioritized "commuter-first" features like offline downloads, background playback, and a "resume from where you left off" function—treating these as non-negotiable for a professional listening experience.
Visual Distinction for Immersion: I intentionally broke away from the app’s standard blue-and-white transactional UI. I introduced a vibrant palette of deep purples and lime greens specifically for the podcast section. This wasn't just an aesthetic choice; it served as a functional cue, signaling to the user that they had exited the "store" and entered a dedicated "entertainment space."
Iterative Interaction Design: A major challenge was the "Product Carousel." I spent significant time prototyping the interaction patterns to ensure users could browse books or games mentioned in the audio without interrupting the playback or losing their place.
The Feedback Loop: Since we didn't have a formal research lab, I operated in a lean, "scrappy" way. I would send concepts and sketches to an internal user base to gauge interest and usability. My coordinator acted as a bridge to the engineering team—I would iterate based on their technical constraints and user feedback, refining the UI until it felt right.
The result was a native podcast ecosystem that didn't feel like an "e-commerce feature," but rather a well-crafted media destination within the Submarino brand.
The Content Hub: We built a dedicated home for the podcast, organized by seasons with clear, scannable layouts. This hub focused on the personalities—featuring guest bios and social justice themes—giving the project an editorial weight that matched the brand’s cultural stance.
We ensured the experience was truly cross-platform. Whether a user started an episode on their desktop during work or picked it up on their smartphone during their commute, the "Resume Playback" feature ensured the narrative was never interrupted.
The "Commuter-Ready" Player: I designed a streamlined UI focused on the core features our users needed to integrate the podcast into their daily routines. The MVP centered on three essential utilities: background playback (allowing users to browse the store while listening), offline downloads for data-free commuting, and a "Save for Later" feature to bookmark favorite episodes.
The Contextual Carousel: This was our bridge between content and commerce. We designed a non-intrusive carousel that displayed books, games, or vinyl records mentioned by the hosts. Users could "Favorite" items for later or add them directly to their cart, as well as sharing, creating a friction-less path from inspiration to purchase.
Omnichannel Continuity: We ensured the experience was truly cross-platform. Whether a user started an episode on their desktop during work or picked it up on their smartphone during their commute, the "Resume Playback" feature ensured the narrative was never interrupted.
Podcast complete screen.
Episode screen.
At the time, the company’s UX maturity was still evolving, and the Branding team operated in a separate silo from Engineering. Without direct access to developers or participation in standard agile rituals, the risk of the design getting "lost in translation" was high.
High-Fidelity as Documentation: To mitigate the lack of direct communication, I focused on extreme precision. I delivered pixel-perfect mockups and detailed design specs that served as my "voice" in the room. This ensured that the specific purple-and-lime palette and the nuanced player behaviors were implemented exactly as intended.
The Coordinator as a Strategic Partner: I treated my coordinator as a bridge to the technical side. I provided him with a comprehensive walkthrough of the experience so he could champion the design’s integrity when meeting with the tech team, ensuring the technical constraints were addressed without compromising the user experience.
Scrappy Quality Control: Since there wasn't a formal QA process for branding projects, I handled the design audit myself, testing the builds on different devices and documenting bugs or visual inconsistencies to be fixed before the final launch.
While precise data tracking was still maturing at the time, the project’s success was evident through its longevity and its role as a strategic pioneer for the brand.
01
Longevity & Consistency: The podcast wasn't just a one-off campaign; it was successful enough to run for three full seasons. It only concluded when the 2020 pandemic shifted global priorities, proving that the content-to-commerce model had real staying power.
02
Positive Engagement Signals: Internal analysis at the time showed clear spikes in session time and higher-than-average conversion rates for the products featured in the player's carousel. It proved that users were willing to shop if the products were framed as part of a story they cared about.
03
Strategic Innovation: Long before "live shopping" and social commerce became industry standards in Brazil, this project established Submarino as a pioneer. It moved the brand beyond being a mere retailer and turned it into a destination for culture and discovery.
Looking back, this project was a masterclass in product-led branding. It taught me how to advocate for the user even when a formal UX structure isn't in place.
Design as a Bridge: I learned that in siloed organizations, high-fidelity design isn't just about looks—it’s a communication tool. Precision was the only way to ensure the product’s integrity survived the handoff to teams I didn't have direct access to.
The Power of Context: This project cemented my belief that commerce feels best when it's helpful, not intrusive. By designing the "Product Carousel" as a utility for the listener, we turned shopping into an extension of the entertainment experience.
What I’d do differently: If I were designing this today, I would push for a more robust tracking framework from day one. I’d also look for ways to integrate more direct user testing earlier in the process to validate the "Resume Playback" and "Offline" features before they hit development.
Keep reading
