NIKE TMALL FLAGSHIP
618 Homepage Experience Refresh
This was Nike’s primary digital campaign for the 2022 618 promotion. The task was to redesign the Tmall flagship homepage so it could better convert traffic during the peak sales period.
Agency
Wunderman Thompson
Brand
Sports/FMCG
Duration
2022.3-2022.5
Role
UX Manager
Problem Statements
The homepage needed to support a thousand-faces personalization strategy, with content dynamically adjusted based on user profiles.
Key considerations included:
Integrating member information in a way that maximizes visibility without overwhelming limited space.
Structuring modules to adapt to different scenarios while introducing fresh, engaging elements.
Highlighting priority products through clear, high-impact modular design.
Week 1
Week 2-3
Week 4-5
Week 6-8
Brief / Information /
Competitive Audit / Data
Understand 🤔
Wireframes designed by Figma
Discuss and guide feasibility with visual designers
Keep upgrading modules on different phases
Design & Prototype ✏️
Consumer persona
Points of difference; theme of
engagement; content inspiration
Emphasize 🕵
Launch the page on every phase,
and assist with continuous updates
Launch ⛹️♀️
Persona strategy
Consumer journey flow
Innovation content
Confirm with client
Define 🎯
Solutions
Persona-Driven Structure
User groups were segmented using client data, with clear sales targets defined for each. Personas were profiled by interests, behaviors, and usage scenarios to guide targeted design decisions.
Information Integration
Interactive and dynamic modules were introduced to communicate membership benefits more efficiently, reducing visual clutter and maximizing page space.
New Module Design
Leveraging product-specific sales goals, multiple interaction patterns were explored to align with consumer behavior, resulting in modules that delivered a fresh experience and differed significantly from previous campaign executions.
Persona Definition
User groups were segmented using Nike’s internal consumer data combined with strategic analysis from the planning team, with clear sales objectives defined for each segment. Personas were profiled by:
Sneakerheads
High spending/repeat
Big fans
Geek & fanatic
New & advanced
Also attracted by MDs
Low spending Gen Z or new others
Discounts first
High price value
Function driven
Easy Navigated
Amateur Players
It Girls
High spending
Trend-setters
Visual driven
New & socially trendy
Well-Thoughts
Low spending Gen Z / repeat & others
Discounts first
Visual driven
Purchase for kids/family members
HH DRIVEN
MD DRIVEN
FEMALE
MALE
Consumer Journey
The consumer journey was reconstructed based on the optimized flagship-store homepage, mapping how users progress through key touchpoints—from arrival to exploration, product discovery, and conversion. The updated flow highlights improved benefit visibility, clearer product prioritization, and more engaging interaction cues that guide users efficiently toward purchase.
* Let’s take IT GIRLS page as an example
Segmentation
Consumer
Experience/
Emotion
Touch Points
KV & Timeline
Quick to know campaign mechanism
Membership
Attracted to more activities through targeted words
Live Streaming
HH Livecard
See the best deals at a glance
Exclusive
(Female & Male)
Inspire impulsive consumption
Best Seller
(Female)
Attracting attention to male's products
Best Seller
(Male)
Narrow the focus on shoes.
Shoes
(Female)
Increase male shoes
browse & purchase rate
Shoes
(Male)
Narrow the focus on apparels.
Apparel
(Female)
Increase male apparels browse & purchase rate
Apparel
(Male)
Increase kids product purchase rate
Outfit
(Kids)
Category
Raise expectations for the most fashionable products
Get a quick look at membership benefits
😄
😞
😄
😞
Wireframes
Low-fidelity wireframes outlined page structure, module logic, and interaction flow, serving as a blueprint for cross-team alignment with strategy, creative, and client stakeholders.
* These wireframes of the homepage takes IT GIRLS as an example
Final Experience – It Girls Homepage
The final homepage presented a visually cohesive, high-impact layout that combined dynamic membership modules, clear product prioritization, and innovative interaction flows tailored to user behavior.
KV & Timeline
Present membership information through animated elements
Use dynamic comment streams to introduce the bestseller section
Surfaced high-intent keywords to strengthen cross-selling opportunities
Visually de-emphasized male bestsellers to create clearer separation for female-focused audiences
Ensured male and kids’ mix-and-match scenarios were fully incorporated into the recommendation logic
Key Takeaways
The final homepage presented a visually cohesive, high-impact layout that combined dynamic membership modules, clear product prioritization, and innovative interaction flows tailored to user behavior.
Communicate Early and Thoroughly
Strong communication with both clients and internal teams at the start of a project is critical. Asking the right questions early prevents wasted time, uncovers missing information, and accelerates insight generation.
Partner Closely with Strategy
Deep collaboration between UX and strategy strengthens our understanding of target groups, brings in multiple viewpoints, and ensures strategic thinking translates cleanly into design decisions.
Design Beyond Constraints
Even with limitations, it’s essential to explore multiple design directions. By shaping modules that best fit existing content while introducing new interaction ideas, we can deliver fresher experiences and support stronger commercial outcomes.
Provide Clear, End-to-End Guidance
UX should set precise guidelines for related teams—covering module behavior, dynamic rules, and copy tone. Thoughtful planning up front enables smoother downstream execution and keeps the overall experience consistent.