2025-2026

新興市場摩托車會員平台:第2版迭代設計案例分析

針對新興市場的2C「行動裝置優先」產品,從零開始建立可擴展的設計系統與設計交付

遠端客戶接案

WebApp

設計系統

*設計展示做去識別化處理

2025-2026

新興市場摩托車會員平台:第2版迭代設計案例分析

針對新興市場的2C「行動裝置優先」產品,從零開始建立可擴展的設計系統與設計交付

遠端客戶接案

WebApp

設計系統

*設計展示做去識別化處理

2025-2026

新興市場摩托車會員平台:第2版迭代設計案例分析

針對新興市場的2C「行動裝置優先」產品,從零開始建立可擴展的設計系統與設計交付

遠端客戶接案

WebApp

設計系統

*設計展示做去識別化處理

設計挑戰

設計挑戰

01

第二版本UI迭代與重新設計

第二版本UI迭代與重新設計

根據客戶的需求與要求,提出並優化 2.0 版本 UI 設計及其變體方案。

根據客戶的需求與要求,提出並優化 2.0 版本 UI 設計及其變體方案。

02

平衡商業與使用者需求

平衡商業與使用者需求

優化產品註冊流程,並進行易用性測試以驗證設計決策。

優化產品註冊流程,並進行易用性測試以驗證設計決策。

03

建立設計系統與跨域合作

建立設計系統與跨域合作

從零開始建立設計系統,並透過交付文件與開發人員合作。

從零開始建立設計系統,並透過交付文件與開發人員合作。

專案介紹

專案介紹

在這個專案中,我負責客戶新開發的摩托車會員平台的 UI/UX 設計。我與客戶共同製定設計方案,並與一個四人軟體開發團隊緊密合作。


我的主要職責包括:接手並優化該平台第一版 UI 設計,在保持核心功能架構不變的前提下提升整體用戶體驗與易用性,以及從零構建該品牌的視覺設計系統。


最終,由於人員變動,我在產品上線前離開了該專案;因此,本作品集頁面僅展示經過去識別化處理的設計稿

在這個專案中,我負責客戶新開發的摩托車會員平台的 UI/UX 設計。我與客戶共同製定設計方案,並與一個四人軟體開發團隊緊密合作。


我的主要職責包括:接手並優化該平台第一版 UI 設計,在保持核心功能架構不變的前提下提升整體用戶體驗與易用性,以及從零構建該品牌的視覺設計系統。


最終,由於人員變動,我在產品上線前離開了該專案;因此,本作品集頁面僅展示經過去識別化處理的設計稿

專案簡介

專案簡介

時間

2025年9月到2026年1月

共4個月

客戶

某台灣公司摩托車事業體

團隊角色

4人開發團隊(2前端、1後端、1PM)裡的UI/UX 設計師

Mockups

01

01

01

第二版介面重新設計

第二版介面重新設計

基於客戶需求的設計迭代與最佳化

基於客戶需求的設計迭代與最佳化

Before & After

首頁

新增橫幅和底部導覽欄,並將 Logo 移至左側。


設計決策:

減少資訊過載

專注於單一任務

透過更優的資訊架構,在每個頁面上展示重要功能

新增橫幅和底部導覽欄,並將 Logo 移至左側。


設計決策:

減少資訊過載

專注於單一任務

透過更優的資訊架構,在每個頁面上展示重要功能

Before

After

Before & After

產品頁

設計決策:

  1. 易用性:支援左右滑動切換產品,點擊圖片即可查看產品詳情

  2. 整合相關功能:將「產品註冊」與「檢視產品詳情」功能歸入同一頁面

  3. 視覺呈現:突顯產品名稱與圖片,以提升使用者體驗

Before

After

Before & After

會員頁

設計決策:

透過新增icon來增強識別度。

透過將相似選項分組、突出顯示標題以及簡化編輯按鈕

建立清晰的視覺層級。

Before

After

設計變體

設計變體

向客戶提出不同的 UI 設計方案,以確定產品的視覺基調。

顧客最後選擇了方案 B(產品辨識度高),而未選擇方案 A(趣味活潑)。

向客戶提出不同的 UI 設計方案,以確定產品的視覺基調。

顧客最後選擇了方案 B(產品辨識度高),而未選擇方案 A(趣味活潑)。

A

B

02

02

02

平衡商業與使用者需求

平衡商業與使用者需求

提升產品的易用性與使用者友善度

提升產品的易用性與使用者友善度

Before & After

產品註冊流程

產品註冊流程

*紅色區域展示了為改善產品註冊流程而進行的變更(從左到右,經過3次迭代)。

商業與使用者痛點

商業與使用者痛點

01

有些序號很容易輸錯

B/8、O/0 和 S/5 等字元容易讓使用者在 App 上輸入時產生混淆。

02

序號上的亂碼增加了使用者輸入序號時的摩擦力

諸如「-」、「 」、「☆」等不必要的序號可能會讓使用者感到困惑。

03

對第一次購買產品的使用者來說,很難去發現序號的位置

缺乏關於查找產品上兩個序號的明確指示

設計迭代

設計迭代

註冊流程已歷經三次迭代:


V1 至 V2:將相關文字輸入框進行分組,以減少資訊過載。

V2 至 V3:預填數字並拆分輸入框,從而簡化序號的輸入過程。

V3 至 V4:新增示意圖,指導使用者找出產品上的序號。

註冊流程已歷經三次迭代:


V1 至 V2:將相關文字輸入框進行分組,以減少資訊過載。

V2 至 V3:預填數字並拆分輸入框,從而簡化序號的輸入過程。

V3 至 V4:新增示意圖,指導使用者找出產品上的序號。

易用性測試

易用性測試

針對產品註冊流程的設計決策,我們與真實使用者進行了 3 輪可用性測試。

3 位使用者中有 2 位對 V3 版本的 UI 設計給予了正面回饋。

針對產品註冊流程的設計決策,我們與真實使用者進行了 3 輪可用性測試。

3 位使用者中有 2 位對 V3 版本的 UI 設計給予了正面回饋。

第四次迭代

第四次迭代

最終(V4)產品註冊流程如下所示:

最終(V4)產品註冊流程如下所示:

03

03

03

設計系統與交付

設計系統與交付

將系統思維融入現有產品

將系統思維融入現有產品

設計系統

元件

經與前端開發人員商定,我們決定在應用程式中使用線上第三方 React 元件庫 TailGrids 來實現可重複使用元件;設計系統也是基於 TailGrids 元件並結合少量調整建構而成的。

設計系統

顏色和字型

品牌色彩與排版基於 2.0 版 UI 設計確立,以保持設計的一致性。

交付檔案

UI Core & Spec & State

交付給開發人員的 HandOff 檔案經過精心整理,詳細列出了功能、規格、狀態及動畫效果。

交付檔案

UI Flow

所有的 UI 流程也都配有箭頭和文字說明進行記錄,這確保了與前端開發人員之間清晰順暢的溝通。

學習心得

學習心得

01 - 設計師不僅解決使用者的問題,也解決商業的痛點。

01 - 設計師不僅解決使用者的問題,也解決商業的痛點。

該產品的主要目的是幫助客戶公司收集消費者數據,從而促進業務成長。起初,客戶明確表示用戶並沒有什麼痛點或需求需要解決,這讓我頗感棘手,但也促使我重新思考產品的價值:它不僅在於解決用戶問題,更在於幫助企業增加收入。

該產品的主要目的是幫助客戶公司收集消費者數據,從而促進業務成長。起初,客戶明確表示用戶並沒有什麼痛點或需求需要解決,這讓我頗感棘手,但也促使我重新思考產品的價值:它不僅在於解決用戶問題,更在於幫助企業增加收入。

02 - 不存在完美的交接文件…只有持續一致的溝通。

02 - 不存在完美的交接文件…只有持續一致的溝通。

在與工程師合作時,我起初認為最初交付的成果必須盡善盡美。然而,實際情況是客戶往往會提出修改意見,而設計草案也不可能涵蓋所有細節。因此,在準備首次交付成果時,必須預見其可能存在的不完善之處。我的體會是,最好從一開始就與工程師明確交付成果的定義:即交付成果是一個需要不斷迭代的過程,持續的溝通與協作至關重要。

在與工程師合作時,我起初認為最初交付的成果必須盡善盡美。然而,實際情況是客戶往往會提出修改意見,而設計草案也不可能涵蓋所有細節。因此,在準備首次交付成果時,必須預見其可能存在的不完善之處。我的體會是,最好從一開始就與工程師明確交付成果的定義:即交付成果是一個需要不斷迭代的過程,持續的溝通與協作至關重要。

03 - 在產品開發過程中進行易用性測試是個好習慣。

03 - 在產品開發過程中進行易用性測試是個好習慣。

在這次專案經驗中,我借鏡了《Don't Make Me Think》一書中的理念:使用者測試開展得越早、越持續,產品就會越出色。我深信,這理念不僅為我提供了助力,也增強了我在產品開發過程中的信心。

在這次專案經驗中,我借鏡了《Don't Make Me Think》一書中的理念:使用者測試開展得越早、越持續,產品就會越出色。我深信,這理念不僅為我提供了助力,也增強了我在產品開發過程中的信心。

讓我們聊聊吧!🖐️

@2026 by Jerry Chu

讓我們聊聊吧!🖐️

@2026 by Jerry Chu

讓我們聊聊吧!🖐️

@2026 by Jerry Chu

Create a free website with Framer, the website builder loved by startups, designers and agencies.