Challenge

After acquiring Swaven, we faced the challenge of adopting their platform as the base for the new MikMak platform. Our goal was to rebrand it with MikMak's identity and improve it for our customers, ensuring a smooth transition. We needed to complete the first phase in a short timeframe, avoid major migration issues, and also ensure retention for customers of both companies.

Solution

We tackled the platform consolidation and rebranding step by step. By carefully analyzing both platforms and making changes gradually, we ensured everything went smoothly. We created detailed documentation and functional prototypes to combine the best features of both platforms. This process involved close collaboration with the other team, sharing knowledge, and working together to meet our goals.

Component database demonstrating the systematic mapping of platform features and dependencies
Research documentation showing real-world implementations of Swaven platform features
Brand implementation analysis documenting Garnier's use of platform features
Shopper experience audit results and evaluation framework documentation
Component Documentation Strategy: Established a comprehensive Notion database to track and document component relationships across both platforms. This system integrated Vuetify documentation, mapped feature dependencies, and created clear implementation guidelines, enabling seamless collaboration between design and engineering teams during the consolidation process.
Implementation Research: Developed an extensive catalog of real-world implementations to analyze how enterprise customers utilized platform features. By studying usage patterns across different industries and use cases, we identified critical workflows and functionality that needed to be preserved or enhanced during the platform migration.
Brand Implementation Analysis: Conducted in-depth analysis of major brand implementations, focusing on customization patterns and template usage. This research revealed common adaptation points and potential migration challenges, helping us develop a robust feature parity roadmap that addressed enterprise customer needs.
UX Evaluation Framework: Created a systematic evaluation process using Nielsen Norman Group's heuristics to assess platform usability. This structured approach enabled us to identify quick wins, prioritize improvements, and establish shared UX standards between teams while maintaining consistency during the migration.
Quality Assurance System: Developed a proactive warning system within design files to identify potential issues early in development. This visual flagging method helped teams anticipate technical constraints, accessibility requirements, and edge cases, significantly reducing implementation delays and rework.

Research and Gap Analysis: Conducted platform analysis with product managers to identify capabilities, strengths, and areas for improvement during integration.

Chart editing interface showcasing improved data visualization controls
Chart editing interface showcasing improved data visualization controls
Visual quality assurance example demonstrating contrast and accessibility improvements
Integration strategy documentation showing platform feature mapping and workflow analysis
Data Visualization Evolution: Reimagined the chart editing experience to balance sophistication with usability. The redesigned system introduced consistent color treatments and interaction patterns while ensuring WCAG compliance, resulting in a more intuitive interface that maintained visual appeal across different chart types and use cases.
Quality Control Process: Implemented a comprehensive visual quality assurance workflow using customized Notion templates. This system streamlined the review of complex data visualizations, improved cross-team communication about accessibility standards, and established clear validation criteria for design implementation.
Platform Integration Strategy: Executed thorough analysis of data visualization capabilities across both platforms, examining chart formatting, navigation patterns, and color systems. This evaluation guided our integration decisions and revealed opportunities to enhance functionality in the merged platform.
Color accessibility analysis showing failing contrast combinations
Color accessibility improvements showing WCAG-compliant color combinations
Initial Color Accessibility: Examples of color combinations that failed accessibility standards during rebranding.
Improved Color Accessibility: Updated color combinations that meet WCAG compliance while maintaining MikMak's brand identity.
Color system documentation showing variable mapping between platforms
Color palette consolidation demonstrating unified brand system implementation
Color Palette Consolidation: Mapped Swaven's color variables to MikMak's styleguide for consistent implementation across the platform.
Color Consolidation: Simplified Swaven's color palette to align with existing MikMak styleguide for a cohesive platform experience.
Platform terminology glossary showing standardized naming conventions

Building a Unified Glossary Created a comprehensive glossary in Notion to standardize terminology between both companies, improving communication and reducing confusion during the integration process.

Component overview showing atomic design system hierarchy
Component patterns organized by complexity and reusability
Vuetify component integration guidelines and specifications
Example of Vuetify expansion panel implementation with custom styling
Component System Overview: Created a visual documentation system that maps relationships between components, user flows, and platform features. This comprehensive overview helped teams understand dependencies, identify reusable patterns, and maintain consistency during the platform consolidation process.
Pattern Architecture: Developed a structured approach to organizing interface components based on atomic design principles. This hierarchical system improved team efficiency by clarifying how basic elements combine to create complex features, while ensuring consistent implementation across the platform.
Framework Integration: Established clear guidelines for integrating Vuetify components within our design system. This documentation streamlined development by providing detailed specifications for component usage, customization options, and implementation best practices.
Interactive Components: Implemented expandable panels and other interactive elements to enhance information display. This approach improved content organization and user experience while maintaining consistent behavior patterns across the platform.
Platform integration strategy and workflow analysis
Unified platform architecture and feature consolidation
Pre-Integration Platform: Initial analysis of the Swaven platform's core features, interface patterns, and technical architecture that would serve as the foundation for MikMak 3.0.
Post-Integration Platform: The unified MikMak 3.0 platform incorporating the best features from both systems while maintaining a cohesive brand identity and improved user experience.

Results

The successful launch of MikMak 3.0 represented a major milestone in global commerce enablement. We unified two leading platforms while expanding capabilities in retail media, brand.com integrations, and analytics. The new architecture supported high-volume traffic across multiple regions and languages, with direct integrations to major third-party visualization and PIM platforms.

  • Market Leadership: Established MikMak as the leading global commerce marketing platform with a $120B TAM
  • Record-Breaking Integration: Completed platform consolidation in 4 months vs industry average of 6-12 months
  • Global Scale: Integrated 3,000+ retail partners across NA, EMEA, LATAM and APAC regions

Learnings & Next Steps

This rapid integration demonstrated how systematic design thinking enables efficient global collaboration. By establishing robust documentation and processes early, we enabled seamless coordination across time zones and languages. Our next phase focuses on expanding retail media capabilities, enhancing brand.com solutions, and developing new analytics features based on our expanded global dataset.

Up Next

How I Applied Responsive Design in Collaboration with Developers

B2B SoftwareResponsive WebInteractive PrototypingInformation ArchitectureFront-End Development+1
Preview of How I Applied Responsive Design in Collaboration with Developers