Pinkoi Discover
Explore Pinkoi Magazine and discover unique designs.
Pinkoi APP Discover
About the project
Summary
Discover 功能將提供靈感探索者一個具備「情境感」和「雜誌感」的逛街頁面，幫助他們在 Pinkoi 上發現充滿「新鮮感」和「設計感」的內容。短中期來看，我們希望 Discover 能是一個讓使用者開始前期探索的場域，長遠來看，期望 Discover 凸顯 Pinkoi Vision -「用好設計實踐自己對生活的想像」，提升品牌價值與內容深度，成為 Pinkoi 和其他平台差異化最大且最具備特色的一個頁面，吸引新的使用者、增加使用者留存率與回訪率。
Discover 成功地成為使用者探索 Pinkoi 的起點之一，功能使用全新介面設計、微互動效果與持續開發迭代，3 個月內採用率從 19% 提升至 26%，並讓使用者點擊商品率創下新高、回訪率從 14.8% 攀升到 42.8％。
My Role
Product Designer
UIUX Design, UX Writing, Prototyping,
Interaction Design
Plat Form
APP (iOS, Android)
Collaborative Partner
PM, PA, Engineer, UR, Curation team
Project Time
2024.9 - 2024.11 (1.5 months)
APP
How we Start & What we found
此專案由 Buyer Squad Team 負責，由於是從 0 到 1 的全新功能與專案，除了熟悉的 PM, Dev, UR, PA, L10n 合作外，同時與跨部門單位 Curation team 一起打造出此功能產品。由我負責全功能所有的頁面設計、互動體驗、撰寫 Spec，同時也擔任部門之間的協調者角色，串起需求與公司目標之間的橋樑。
此專案特別著重於動態效果的互動展現，期望除了版面簡潔閱讀性高，可容納多國語系，跳脫以往純靜態的頁面互動，增加產品互動率。
專案在開展後與 UR Team 合作，先行調查親疏遠近不同種類的用戶（Visitor / Member / Buyer）進行問卷調查，除了探勘功能可行性之外，也為功能中的「策展內容」做前期準備；與此同時，同步著手策劃設計策略。
Project Goals & Metrics
Discover 功能將提供靈感探索者一個具備「情境感」和「雜誌感」的逛街頁面，幫助他們在 Pinkoi 上發現充滿「新鮮感」和「設計感」的內容。短中期來看，我們希望 Discover 能是一個讓使用者開始前期探索的場域，長遠來看，期望 Discover 凸顯 Pinkoi Vision -「用好設計實踐自己對生活的想像」，提升品牌價值與內容深度，成為 Pinkoi 和其他平台差異化最大且最具備特色的一個頁面，吸引新的使用者、增加使用者留存率。
【專案指標】
-
Journey 前段
-
從 Discover 到商品頁的點擊率
-
瀏覽頁面深度
-
-
Journey 中段
-
瀏覽 Discover 更多專題
-
與功能有更多的互動操作
-
收藏
-
分享
-
加入購物車
-
-
Design Strategy
此專案使用「設計主導」的方式推進，從「版型分析」開始與 Stakeholders 密切討論，提案的同時同步收集需求，達成快速迭代、同步資訊、並一起做出每一次的決策。透過競品分析與版型發想，發展出三種不同版面的瀏覽方式：
-
A. 結合探索與閒逛：
主題的橫向滑動：全屏幕大圖與標題為主，一個屏幕即是一個主題，左右滑動為該主題的子主題；搭配垂直主題間的切換，搭配得宜的策展圖文或影片內容，可展現豐富的視覺介面體驗。
-
B. 圖文目錄展示：
將每個策展專題進行圖文整合，使用條列式呈現，點擊後才進入詳情頁面看到完整內容；快速滑動即可看見多篇內容。
-
C. 逛展藝廊式：
以圖為主，呈現看畫冊的電子瀏覽方式，搭配可切換圖片陳列方式功能，以圖挑選自己有興趣的主題，再進一步瀏覽更多。
版型瀏覽方式的設計策略討論
結合問卷調查結果、專案策略目標、企劃素材與人力...等多方考量，選擇 B. 圖文目錄展示的方式著手下一步的細節設計，同時與策展與 L10n 團隊一起討論出合適的圖片大小、文字呈現，以及資料分類與標籤分類架構，提供未來依照種類做出最合適的推薦機制，並可延伸至各地區在地化的呈現。同步制定出此專案的「設計策略準則」，帶領團隊團隊在思考選擇時，有清楚的脈絡可依循，做出版型與樣式的選擇依據。
-
吻合 Pinkoi 品牌調性，依照 Discover 主軸與價值做出不同的設計新語彙
-
排版以彰顯圖片為主、文字為輔
-
版型能容納各國語系與多行文字的彈性
-
增加「微互動」設計，在瀏覽滑動的同時能感受到頁面回饋
-
未來能擴充更多複雜的功能、保留開發彈性
List Page Design
Discover 組織架構從列表頁開始，內容想要呈現新奇感，所以訂立每週固定五篇新內容的機制，讓使用者開啟時都能有觀賞新的主題，第一部分「本週新發現」五篇輪播，並記錄用戶看到的第一篇，即便沒有滑動內容，也可以呈現用戶沒看過的主題，利用此邏輯來增加豐富度與新鮮感，期望能培養使用者固定回訪的習慣。
此頁面也增加上下 scroll 時的動態效果，藉由移動至每張卡片時都會有動態效果，進而提醒已切換至下一個主題，提高使用者注意力，並同步傳達介面含義。
列表頁 - 實際操作影片
列表頁 - 英文版實際介面
Scroll 互動細節
列表頁 - 日文版實際介面
Detail & Tag Page Design
進入詳情頁面時，增加標題與標籤的 Slide in 效果，吸引使用者目光、進而閱讀標題與下方內容描述，內容字數刻意撰寫於 80-120 字之間，剛好的字數不增加閱讀負擔，卻又能快速理解。圖片錯落的形式不覺限於方形，能容納更多情境，同時在版型的最後使用 carousel 動態呈現，讓使用者不用滑動也能看到所有商品，並有「再看一眼」的效果。
閱讀完畢，下方接續使用推薦邏輯，推薦出與此篇相似的主題，期望能勾引使用者點擊；最下方也露出相關標簽，即便這篇主題不符合期望，也可能看到更多標籤來引導點擊，達成「一逛再逛」的效果。
詳情頁 - 實際操作影片
Scroll 互動細節
詳情頁 - 英文版實際介面
詳情頁 - 日文版實際介面
Let's see the Results
&
Start with the low-hanging fruit 🍊
上線後一個月觀察
-
Discover 上線後 Adoption rate 表現不錯，並無太大反效果，但 User 僅有少數會進到 Discover 詳情頁
-
User 在列表頁面逛得不深（平均滑動約 3～4 個張卡片），且多數沒有點擊 ，僅有少部分 user 會滑完該頁
-
User 只要進入詳情頁，點擊到商品頁的比例約為 34%，且平均會滑到 12 個左右的商品，表現得非常好，帶表主題策展內容有一定的吸引力。
Low-hanging fruit 迭代做了什麼：
-
圖片高度縮減：縮減圖片的高度，維持逛展瀏覽體驗的同時，讓下方的內容標題更快被看到，期望吸引用戶往下 scroll 看更多。
-
標題名稱顯示個地區語言：之前使用簡單易懂的英文顯示全語系，變更成中文後，讓用戶不用雙語轉換，期望加強各區段的內容提示，吸引用戶停留更久、增加點擊。
-
於卡片上加入 tag 提示：顯示 tag 提示內容可能會有什麼，讓用戶產生好奇，進而點擊進入詳情頁
-
增加通知提示：每週一增加 APP Push 提醒，加入 Tab 顯示 NEW 字樣，培養 User 定期回訪的習慣
結果：
-
進入詳情頁使用量提升：順利突破新高，且持續上升中
-
進入 Tag 頁面提升：7 天內直接成長 2%
-
進入商品頁面提升：優化後一週即從 34% 成長到 37.5%，也就是說用戶只要進入詳情頁，就有 37.5% 的人會推進到商品頁，且平均一次會逛約 13 樣商品
-
Adoption Rate 持續成長：對比上線後一週約 19％，優化後 Adoption Rate 成長至 26.1%
-
Revisit Rate 激增： 從上線前 14.8% 攀升到 42.8％
Before & After
Data performance
Featured for APP of the Day 🎉
2025 年 1 月 Pinkoi APP 被提名刊登於 TW, HK, MO, and JP App Stores，Discover 功能也同步在文章中被 Highlights，並藉由此曝光 APP Store 瀏覽曝光次數 DoD+84%，同時代表著 Apple 對 產品的肯定！
-
編輯嚴選：讓用戶不眼花撩亂，提升了整體購物便利性。
-
AI 個性化推薦：「與此商品相似」功能，為用戶提供量身訂做的商品推薦。
-
APP「發現」功能：精選展示了多樣的探索風格。
-
關注設計師：即時收到喜歡的設計師商品上架通知。
-
主題館：Pinkoi 送禮指南等精選主題館，讓用戶作為靈感的起點。
Takeaways & Learning
1. 從 0 到 1 很難推進？由「設計主導」也可以順利推進專案
-
不論是什麼角色，有些人很害怕遇到從 0 到 １的專案，藉由既有資料來推估功能切角、毫無限制的大張畫布的確會讓很多人打退堂鼓。本專案使用「設計主導」的推進方式，藉由各種競品、流程、線搞或是圖像...等方式討論，並同步收集各方意見與資料可行性，成功地將前台與後台上線落地驗證；溝通的過程中也須同步掌握輕重緩急，掌握適當的開發步調，避免開發過長或是功能過於簡陋無法驗證，是一個成功由「設計主導」的專案之一。
2. 策略精準，low-hanging fruit 也能撼動成果
-
專案上線後，因人力時程關係，無法再動用過多資源做實驗與調整，於是我自行發起假設，並與工程師討論作出微調，成功地讓數據有所提升；同時驗證出即便是很簡單的英文單字，也無法取代當地用語，即便是簡短的標題，也能讓 User 更快理解意思，並有興趣往下閱讀、加深滑動深度。而內容經營在上線一個月內可能看不到太大成效，需要時間累積與耐心等候，策展團隊經歷各種主題嘗試後，上線第三個月已能看見不小的成效，同時也讓部分 User 定期回訪瀏覽。
3. 「微互動」的重要性
-
本專案特別在設計中加入不少微互動 (Microinteractions) 細節，讓原本靜態上下瀏覽圖問的介面中，增強操作感受，同時幫助行為結果視覺化，讓產品透過細節傳達令人愉悅的使用回饋。本專案在 Scroll 滑動時加入動態效果，讓 User 清楚知道現在滑到哪裡，並透過互動操作，增加閱讀性，像是：Top Bar 滑動時的漸層滑動、標題 Slide in...等，抓住閱讀時的目光，增進產品互動率。
More Projects
Dcard AI Lab
Where Ideas Transcend, Solutions Emerge
Product Page revamp
Browse product easier and shop happier.
Pinkoi Shipping Estimate System
One click to estimate shipping cost.