On is a Swiss sportswear brand known for its performance-driven running shoes and commitment to movement. Earlier this year, to support the launch of Cloudmonster 3, On introduced “昂跑训练营,” a Tmall Mini Program combining running programs with interactive brand engagement.
The Mini Program brings together structured running programs, training guidance, progress tracking, and interactive rewards, giving runners a way to build their routines while exploring On’s products.
Wiredcraft partnered with On to shape the Mini Program’s product experience, defining its engagement mechanics, mapping user journeys, and designing an interface that reflects the brand’s identity.
What have we done
-
Digital engagement mechanism design
-
Product requirements and user flow planning
-
UI/UX design
Performance meets design: Bringing On’s identity into Tmall
A running-focused experience should look and feel different from a conventional e-commerce interface.
Our design approach brought On’s distinctive visual language into the Tmall environment, combining bold running imagery, clean layouts, and intuitive interactions.
From training dashboards to reward screens, each touchpoint reflects the brand’s performance-driven identity while keeping the experience easy to navigate.
Product discovery is also integrated into the experience. Interactive product showcases allow runners to explore footwear details and navigate directly to product pages on Tmall.
From concept to experience: Bringing the pieces together
Bringing a running experience to Tmall required more than designing an interface. The challenge was to connect training content, daily check-ins, progress tracking, rewards, and product discovery through clear engagement mechanisms and intuitive user journeys.
We worked through the Tmall Mini Program’s product requirements and interaction flows, from choosing a training program and completing daily check-ins to tracking progress and earning rewards.
This process brought the different features together into a cohesive experience, allowing runners to move naturally between training, progress tracking, and rewards.
Designed for runners: Making progress part of the experience
Running is about building habits, tracking progress, and finding motivation to keep going. We wanted the Mini Program to reflect that journey.
The Mini Program offers three training programs, allowing runners to choose one suited to their abilities and goals. Each program breaks training into manageable daily activities, including warm-ups, running exercises, and recovery.
To make progress more tangible, we designed a simple check-in experience that allows runners to record their distance and pace, while adding a personal touch by capturing how they felt after each session. A training calendar and activity history allow runners to review their progress and follow their routines over time.
Reward mechanics add another layer of engagement, giving users opportunities to win prizes through training participation and other activities, while introducing them to On’s products.
Connecting running, community, and commerce
By combining product thinking with brand-led UI/UX design, Wiredcraft helped On create a seamless digital experience built around runners’ needs and the brand’s distinctive identity.
The project demonstrates how thoughtful product design can bring brand engagement and commerce closer together, creating more meaningful ways for runners to connect with On beyond shopping.
