IQOSPhere (Philip Morris)
Case
Localizing a Global Design System via Cross-Functional Governance
01. The Strategic Challenge
IQOSPHERE is the primary digital loyalty and engagement ecosystem for IQOS Japan. Following the release of a new Global Design System Guideline from PMI headquarters, the Japan market was tasked with completely auditing and transforming its platform to align with the new global standards ahead of a major product launch.
The primary hurdle was a classic localization conflict: global design templates favored minimalist, asset-light layouts, whereas the Japanese consumer demographic demands high data-density, explicit contextual clarity, and seamless integration with the LINE ecosystem. The challenge was to localize the global framework for the domestic web and LINE platforms without breaking core global architecture, while simultaneously aligning a highly siloed cross-functional stakeholder group on a unified product roadmap.
My Role: Lead Product Designer & Design Sprint Facilitator (UX/UI Localization, Cross-Functional Alignment, Design System Governance).
The Goal: Boost platform usability, drive long-term customer retention, and accelerate multi-department project velocity.
02. The Strategy: Cross-Functional Alignment Sprints
To break down organizational silos and align competing priorities across Marketing, Product, Consumer Programs, Legal, Content, and IT, I structured and facilitated a series of intensive, data-driven Design Sprints.
Key Strategic Interventions:
Data-Informed Journey Mapping: Instead of relying on assumptions, I analyzed historic NPS reports and user surveys to segment our user base into three distinct cohorts: Occasional, Regular, and Super Loyalty users. We mapped their distinct pain points to identify high-impact feature opportunities.
Co-Creating the Information Architecture: During the alignment workshops, I led stakeholders through collaborative sitemap and risk-assessment exercises. By bringing Legal and IT into the room during the early wireframing phases, we addressed compliance and system limitations early, preventing costly late-stage delivery bottlenecks.
The LINE Ecosystem Optimization: Recognizing that LINE is the primary digital touchpoint in Japan, I spearheaded the layout strategy for a dedicated LINE framework. This journey synchronized offline retail interactions smoothly with online web tier benefits, capturing users where they natively interact.
03. Interaction Architecture & Experience Framework
I translated our workshop findings into high-fidelity interaction models and subjected them to rapid usability testing loops to validate content density layouts.
[Global Minimal Guideline] ──► [Design Sprint Alignment] ──► [Localized Atomic System] ──► [High-Density LINE UI]
To support future scalability, I built a localized Atomic Design Framework. This design library served a dual purpose: it functioned as a plug-and-play toolkit for the marketing team to quickly generate campaign creative, and as a component blueprint for engineering to construct a highly reusable CMS utility library.
04. Business & Engineering Impact
The synchronized launch of the overhauled web experience and localized framework yielded immediate, measurable growth across customer engagement metrics.
Surge in Customer Retention: The UX/UI optimization strategy directly drove a 29.48% increase in returning users and a 61.40% spike in new user acquisition year-over-year, validating the effectiveness of our data-driven layouts.
Elevated Sentiment Metrics: Post-launch performance tracking confirmed a 3.25% improvement in our Net Promoter Score (NPS), with qualitative feedback specifically praising the platform's improved navigation clarity.
Operational Velocity Multiplier: Establishing the Atomic Design guidelines and localized CMS framework completely transformed internal workflows, allowing marketing and development teams to ship new content cycles in days rather than weeks.
Senior Takeaway: Senior design leadership isn't just about creating beautiful interfaces—it's about managing organizational alignment. By transforming a strict global mandate into a collaborative, localized ecosystem strategy, we protected the interests of local business units while delivering a high-converting, compliant product for the Japanese consumer.
NPS report analysis
Based on the NPS score to understand where is pain area with the improvement opportunities
User survey
Based on the user survey report (user interview) to identify what and which function and program user interested and needs to improve
User segmentation
Identify current the member user group with the segmentation into different level of the engagement
Occasional User journey mapping
identify the occasional user journey, pain and interested area
Regular User journey mapping
identify the regular user journey, pain and interested area
Super loyalty User journey mapping
identify the super loyalty user journey, pain and interested area
Workshop - challenges
identify the challenges of the revamp with related function
Workshop - Goal & risks
identify the Goal & risks of the revamp with related function
Workshop - KPIs & measure of success
identify the KPIS & measure of success of the revamp with related function
Workshop - Sitemap
identify the new sitemap, new function and ideas of the revamp with related function
Pages revamp categorization
Based on the alignment with related function to categorization the pages focus workshop to identify the information architect with the prioritization
Roadmap identification
Have the alignment with management and function lead how to combine with different project or BAU to release the revamp based on the phase approach
sprint Workshop 2 - wireframe
2nd sprint workshop is focus the details of categorized pages and here is the example of identify the information architect on the wire
sprint Workshop 2 - components
identify the details of the components with related function for the Atoms system
sprint Workshop 2 - High fidelity wire
Create the high fidelity wire with the finial assets from MKT & CX for the quick test
Sample of Final Design
Finial Design creation for the development after the workshop and usability test
Sample of the Experience Framework
Creating an Atoms system as a design guideline and library for the Marketing team to provide the assets and for the development team to create the CSS/CMS library
Result
1. 29.48% return user and 61.40% new user increase since applied UX/UI improvement with Experience Framework launched on Sept compared to last year.
2. NPS performance report shows UX/UI has a 3.25% improvement based on user feedback