Client: Global Content Partnership
My Role: Product Manager
The Team: Led a squad of 6 (2 UI/UX Designers, 3 Front-end Devs, 1 Backend Dev)
Technical Platforms: iOS/Android (Mobile & Tablet), Web CMS.
overview
From Print Magazine to Interactive Knowledge Hub
iClick2Know is a premium digital reading platform powered by the authoritative content of the world-renowned British science magazine, How It Works. The app covers six major domains—Space, Science, Transport, History, Environment, and Technology—featuring over 3,000 interactive knowledge entries. As the Product Manager, I spearheaded the transition of complex, static editorial layouts into a seamless, bilingual, and cross-platform digital encyclopedia.
Challenge
Modernizing “Heavy” Content
Traditional encyclopedia content is often perceived as “heavy” and difficult to navigate on mobile devices. My objective was to solve three primary challenges:
- Responsive Content Transformation: Magazine layouts are visually dense. I had to ensure that high-definition, complex diagrams remained readable and interactive on both small smartphones and larger tablets.
- Searchability at Scale: With a database of 3,000+ entries, “browsing” wasn’t enough. We needed a multi-modal search system to fulfill the brand promise: “Click to Know.”
- Educational Integration: Moving beyond a simple reader, the goal was to position the app as a tool for academic competition and institutional use (B2B2C).
Approach
1. Bilingual Interaction & Accessibility
Leading 2 UI/UX Designers, I defined a design system that prioritized “Discovery” without sacrificing the magazine’s visual prestige:
- Instant Bilingual Toggle: I designed a seamless English/Chinese switch mechanism. This serves a dual purpose: providing accurate scientific knowledge while acting as an immersive English learning tool for students.
- Inclusive UI: Recognizing our young audience, I integrated Audio Narration for all entries, allowing for “Listening while Learning,” which caters to different learning styles and increases accessibility.
2. Multi-Modal Search & Engineering Leadership
I coordinated with 3 Front-end and 1 Backend developer to build a robust retrieval engine:
- Structured Metadata: I directed the backend architecture to tag all 3,000 entries across six core themes. This structured data approach enables the “Hot Search” and “Recommended Reading” algorithms that drive user retention.
3. Strategic Market Validation: The “Knowledge Challenge”
To prove the product’s value to the education sector, I initiated a strategic partnership:
- Partnership: We launched the “Click2Know Science Competition.” Users had to use the app to research data and answer questions.
Results & Impact
- Massive Knowledge Repository: Successfully digitized and launched 3,000+ scientific entries.
- Cross-Platform Consistency: Achieved 100% feature parity across iOS/Android smartphones and tablets, ensuring a stable UX regardless of the user’s hardware.
- Education Sector Penetration: Successfully bridged the gap between a consumer app and an educational tool through city-wide school competitions.
- Efficiency in Delivery: Managed a team of 6 to deliver a complex CMS (Content Management System) that allows editorial teams to update interactive style content without developer intervention.