所有專案
互動行銷工具 品牌 IP 設計 前端開發

毛孩星球 · 守護星測驗

從品牌策略出發,將「星象學 × 寵物健康」的品牌定位轉化為可互動的分眾行銷漏斗。 獨立完成策略企劃、IP 設計與前端開發,約一周內上線,並成為品牌實體展場的互動推廣素材。

PM & UI/UX Designer
2026
HTML · CSS · JS · AI 圖像生成
Web(RWD)
毛孩星球守護星測驗封面

專案起點

毛孩星球的品牌核心語言是「星象學 × 寵物健康」,但這個概念過去只停留在靜態視覺與文案。 我希望讓它變得可以被體驗——讓飼主主動參與,而不是被動接收廣告。

這個測驗的商業邏輯是:飼主對自家毛孩的行為觀察(個性、習慣、反應)其實已經對應到不同的健康需求, 只是他們不自知。測驗的作用是把飼主已知的事轉譯成產品推薦的依據, 用娛樂包裝分眾,用星象語言降低購物的防衛心。

核心命題:如何讓品牌的定位語言從「被看見」變成「被體驗」,同時把趣味互動導向實際的商品轉換?


策略設計

測驗不只是娛樂,它是一個輕量的分眾行銷漏斗。整體設計圍繞三個目標展開:

1
讓人做完——題目只有 4 題,每題從飼主視角出發(「打開家門毛孩怎麼反應」),貼近日常觀察,降低中途放棄的機率。
2
讓人覺得準——四種星象體質(火象、風象、土象、水象)對應毛孩的真實行為特徵,結果描述夠具體,飼主容易產生共鳴感。
3
讓人點進去——結果頁直接推薦 1–2 款對應產品,邏輯清楚(火象活潑 → 關節、心血管;水象敏感 → 情緒舒緩、泌尿),推薦不是隨機配對,是有根據的分眾設計。

從企劃到上線

這個專案由我一人完整負責,從策略發想到前端開發全程獨立執行。

📐 策略與企劃

  • 星象體質分類框架設計
  • 4 題題目與選項撰寫
  • 體質 × 產品對應邏輯

🐾 品牌 IP 設計

  • 彭彭(貓)& 路卡(狗)人設定義
  • 宇航員造型視覺產出
  • AI 工具輔助生成與調整

🎨 視覺設計

  • 深色宇宙風格主視覺
  • 四種體質各自配色系統
  • 結果頁排版與卡片設計

💻 開發與上線

  • HTML / CSS / JS 獨立開發
  • 部署至正式網域
  • 埋設 GA 追蹤

視覺設計系統

整體以深色宇宙背景貫穿,強化「星象探測」的沉浸感。每種星象體質有獨立的主色系—— 火象橘紅、風象金黃、土象綠、水象藍紫——讓結果頁一眼可辨識,也強化品牌記憶點。

品牌吉祥物彭彭與路卡以宇航員造型出現,彭彭傲嬌有個性,路卡溫柔帶點膽小, 兩者分別對應不同體質的氣質,讓結果頁多了對話感與角色溫度。


成果

上線後獲得內部同事正向回饋,行銷團隊將其採用為實體展場的互動推廣素材—— 測驗在展場現場供訪客即時互動使用,彭彭與路卡的形象也在展場實體印製展出。

這是這個工具從數位延伸到線下場景的具體證明——一個小型互動網頁,最終讓品牌在實體活動中多了一個有溫度的觸點。

~1 周
從策略發想到正式上線
4 種
星象體質分類,可持續擴充
線下
實體展場互動採用,IP 形象印製展出
立即體驗測驗

成長與反思

  • 趣味是入口,邏輯才是骨架:這個測驗看起來是娛樂,但背後每一題的選項都有對應的體質加權邏輯,產品推薦也不是隨機的。把「設計感」和「策略邏輯」同時做好,是這個專案讓我最有成就感的地方。
  • 快速原型的價值:核心開發完成後立刻拿給同事看並收集回饋,才做最終調整。快速做出可以給人看的版本,比追求完美再發布更有效。
  • 數位工具可以長出線下影響力:一個網頁最後被印出來在展場展示,這件事提醒我——做產品不只是想「這個功能有沒有用」,還要想「這個東西可以被用在哪些地方」。

如果重來一次

  • 會在上線時就規劃 IG 互動廣告的投放方案——這類測驗在社群上的自然傳播效果通常不錯,若有廣告預算加持,完成率與點擊數據會更有說服力。
  • 結果頁可以加入「分享給朋友測」的功能,利用飼主之間的互相比較心理,提升自然流量。
回到所有專案 下一個專案:WorkEnergy