Challenge
Brands faced a fragmented eCommerce landscape. Luxury brands needed sophisticated presentations, while mass-market brands prioritized immediate sales. Social media demanded instant gratification, whereas brand websites required deeper engagement. These diverse needs, coupled with technical constraints and limited mobile screen real estate, posed a significant challenge.
The core challenge was not just to create a solution for one scenario, but to develop a versatile system capable of supporting thousands of unique implementations. This system had to be manageable for our engineering team and intuitive for our brand partners, ensuring scalability and ease of use.
Solution
Our approach centered on progressive enhancement. We established core mobile experiences focused on essential conversion elements: prominent retailer buttons, streamlined product displays, and optimized image handling. This ensured consistent performance across all implementations, regardless of context.
We then expanded thoughtfully to larger screens, introducing enhanced features such as advanced store locators and rich media galleries. Instead of simply scaling up the mobile view, we reimagined how the additional space could best serve each brand's unique objectives, creating more immersive and engaging experiences.
The key to scalability was embedding intelligent flexibility within the platform. We developed configurable options that allowed brands to customize their presentation while our underlying system maintained performance and consistency. This enabled rapid deployment of new brand experiences without the need for custom development, streamlining the onboarding process.
Responsive Commerce Template Demo This video demonstrates the responsive commerce template in action, showcasing its adaptability across different devices.
Comprehensive Breakpoint Matrix This image illustrates the extensive range of breakpoints and scenarios we accounted for in our design system. Each breakpoint was carefully considered to ensure optimal user experiences across a multitude of devices and screen sizes.
Figma Preview: Adaptability Across All Screen Sizes Our robust Figma system enabled comprehensive testing and previewing of content across various screen sizes and scenarios. This ensured that designs were not only visually appealing but also functionally effective on any device.
Engineering Specifications: Container and Breakpoint Details Clear communication with engineering regarding breakpoints and container sizes was paramount. This documentation clarifies the max-width for engineers and specifies column percentages, ensuring a consistent layout and design across diverse screen sizes and maintaining design integrity.
Mobile and Tablet Breakpoints: Optimizing Retailer Button Visibility This demonstrates the template's functionality across various sizes for brand websites, including online and in-store tabs. The visibility of retailer buttons on smaller mobile sizes was a key consideration, ensuring seamless conversion opportunities.
MyMochi Brand.com Prototype: Real-World Implementation The initial phase of this project focused on progressive enhancement and establishing an improved layout optimized for both desktop and mobile platforms. This demo showcases the MyMochi Brand.com prototype, highlighting the adaptability of our template system.
Retailer Button Layout Optimization: Top-Down vs. Bottom-Up Alignment A critical aspect of our template system was optimizing retailer button placement. We compared two approaches: bottom-up alignment for creative-focused templates and top-down alignment for discovery-focused layouts. Testing revealed that while bottom-up alignment worked well with rich media backgrounds on mobile, it needed refinement for larger screens to maintain both visual impact and conversion effectiveness.
Figma Interactive Prototype: Top-Down Responsiveness Animation This video showcases various scenarios being tested, with a feature list on the left. By updating content in one central location, we could instantly preview the impact across different devices, streamlining the testing process and ensuring consistency.
Hero Image Adaptation: Optimizing for Conversion and Branding Previewing video and animations across different screen sizes posed a unique challenge. Our innovative solution involved creating an automated animation using Figma's smart animate feature with a time delay trigger for looping. This allowed real-time visualization of content behavior across various devices without manual browser adjustments.
Figma System Configuration: Device and Settings Demonstration This video demonstrates the system's configurability, showcasing how different devices and settings can be adjusted within Figma. This flexibility allowed us to tailor the user experience to specific contexts and requirements, ensuring optimal performance and visual appeal across a wide range of scenarios.
Streamlining Design: Efficient Device Duplication and Content Management To streamline the repetitive task of copying and pasting content across different form factors, we nested the single product image, allowing it to be sized once and then duplicated across devices. This, along with similar techniques for text, enabled rapid testing of numerous combinations of brand and product assets, significantly accelerating the design process.
Rapid Scenario Testing: Automated Multi-Scenario Demos Addressing the limitations of previewing animations and videos in Figma, we initially used Google Slides to create a grid of examples showcasing various brand assets and scenarios. This included variations in background images, colors, retailer button counts, and screen sizes, providing a comprehensive overview in a single slide.
Mobile Responsiveness: Figma Animation Demo This video demonstrates the responsiveness animation on mobile devices within Figma, showcasing the dynamic adaptation of content to smaller screen sizes and highlighting the mobile-first approach of our design system.
Edge-to-Edge Images: Implementation and Social Media Optimization In response to a popular feature request, we implemented edge-to-edge images at 100% width. This enhancement required careful consideration to ensure ease of setup, scalability, and high image quality. Research into common social media image treatments led us to adopt a 1:1 aspect ratio, with options to either fill the screen or maintain padding at smaller sizes, providing flexibility for different content types.
Enhanced Search Functionality: Improving User Navigation Building upon our responsive design system, we introduced search enhancements to improve user navigation and content discovery. These enhancements were designed to seamlessly integrate with the existing template system, providing a consistent and intuitive user experience across all devices.
Testing Various Scenarios With Real Customer Assets
Results
The progressive enhancement approach proved transformative, touching every aspect of our platform's performance and usability. Our systematic design approach dramatically simplified the brand onboarding process, allowing teams to launch new products in a fraction of the previous time while maintaining consistently high quality across implementations.
The technical architecture successfully scaled to support thousands of brands and millions of daily views, with the modular design system significantly reducing inconsistencies across implementations. The standardized yet flexible approach meant brands could maintain their unique identity while benefiting from proven patterns and optimizations.
Case Study: Ricola's Success
A perfect example of our system's effectiveness was Ricola's influencer marketing campaign. Using our template system, they quickly launched shoppable media experiences across multiple platforms for their cold and flu season push. The results were impressive:
- 2.8x higher purchase intent rate on TikTok compared to the health category average
- 1.6x higher purchase intent rate from top-performing influencers
- 55% of consumers interacting with Ricola influencers showed preference for a specific retailer
This implementation demonstrated how our flexible system could rapidly adapt to specific brand needs while maintaining performance at scale. View Ricola case study (PDF)
Most importantly, the enhanced user experience delivered meaningful improvements across all touchpoints. The careful attention to mobile-first design ensured core conversion elements remained prominent, while progressive enhancement provided richer experiences on larger screens. The optimized store location features and improved accessibility made the platform more useful to a broader audience.
Learnings & Next Steps
This project reinforced that successful product design isn't just about creating beautiful interfaces - it's about solving complex problems through clear communication and systematic thinking. The role of a product designer is to bridge the gap between diverse stakeholders - from product managers and engineers to business leaders and customers - ensuring everyone understands both the challenges and solutions clearly.
