Interactive Event Map
Role:
Lead Product Designer
Timeframe:
2026/08–2026/10 · Launch 2026/10/12
Platform:
Mobile Web · Desktop Web · APP
OVERVIEW
Making Large-Scale Markets Easier to Explore, Powered by AI
OUTCOMES | FIRST 21 DAYS
Unique Visitors
Shop Follows
Shop Views
01
PROBLEM & OPPORTUNITY
Beyond Paper Maps: Connecting Offline Discovery with Online Engagement
With more than 500 brands spread across 15 zones, visitors needed more than a way to locate booths. They needed a better way to discover relevant brands, plan their visits, and stay connected after the event.
Existing paper maps and event pages mainly provided static information, making it difficult to support the full visitor journey.
PAIN POINT 01
Hard to Find Relevant Brands
With over 500 brands across 15 zones, paper maps lacked search and filtering options, making it difficult for visitors to find the booths they wanted.
PAIN POINT 02
Difficult to Plan Ahead
Event pages focused on general information, with limited ways to explore and save brands or plan a personalized visit.
PAIN POINT 03
Limited Post-Event Engagement
Visitors had no convenient way to continue exploring or following brands they discovered at the event.
💡 STRATEGIC OPPORTUNITY
Move beyond static event information to a searchable, saveable, and location-aware discovery experience.
02
STRATEGY
Rather than simply turning a paper map into a digital version, we looked at the entire visitor journey and identified the most important needs at each stage.
With a tight development timeline, we worked across teams to prioritize an MVP that balanced user needs with business goals. We focused on brand discovery, favorites and sharing, booth navigation, and connections to Pinkoi's online shops—extending a one-time market visit into ongoing brand engagement.
01
02
03
💡 Core Product Strategy
The brand directory supports discovery and decision-making, while the map supports navigation and action. Together, they create a connected experience across the visitor journey.
03
AI-ASSISTED PROTOTYPING
Facing a tight development timeline, I used AI to rapidly build a high-fidelity HTML prototype, bringing together the event's visual identity, brand discovery, and interactive map experience.
Unlike static design mockups, the working prototype allowed PMs, engineers, and cross-functional partners to experience the product firsthand, discuss interaction details, and use it as a concrete reference for development.
01 · DESIGN CONCEPT
Bring Ideas to Life, Faster
Used AI to quickly turn design ideas into a high-fidelity HTML prototype that closely reflected the final product's look and interactions.
02 · TEAM ALIGNMENT
Validate and Iterate Together
Enabled PMs and engineers to experience the prototype firsthand, discuss interaction details and technical feasibility, and quickly refine the design based on feedback.
03 · DEVELOPMENT
Bridge Design and Development
Used the interactive prototype as a clear reference for engineering, reducing misunderstandings and helping the team move from design to implementation more efficiently.
04
PRODUCT EXPERIENCE
01 · BRAND DISCOVERY
I designed the brand directory as the main discovery entry point, combining category, origin, and brand-specific filters to help visitors find brands based on their interests rather than browsing every booth.
Brand details, favorites, and sharing make it easier to save interesting discoveries and return to them later.
02 · SMART NAVIGATION
By connecting brand search with the interactive map, visitors can quickly find a brand by name or booth number and jump directly to its location.
Zone switching, map zooming, and booth highlighting reduce the need to move back and forth between brand information and the venue map.
03 · VISUAL WAYFINDING
Making Booths Easier to Recognize Through Brand Identity
Before development, I used the interactive prototype to gather feedback from cross-functional teams with hands-on experience running the event.
One important insight emerged: booth numbers alone weren't always meaningful to visitors. Recognizing a familiar brand logo or character could be a more intuitive way to find a booth.
Based on this feedback, I designed a Brand Logo Map mode, allowing visitors to switch from booth numbers to familiar brand logos or IP characters as visual cues.
POST-LAUNCH OBSERVATION
05
IMPACT
&
TAKEAWAYS
Extending Offline Discovery into Online Engagement, While Building for Future Events
PRODUCT IMPACT | FIRST 21 DAYS
Unique Visitors
Shop Follows
Shop Views
The interactive map helped visitors explore brands and locate booths while connecting them to Pinkoi's online shops. This extended offline brand discovery into continued product browsing and brand engagement.
01
02
03
Beyond delivering a map for a single event, we established a reusable interface and interaction structure. Future events can retain the core experience while adapting the color system to each event's visual identity, reducing the need to redesign from scratch.
