LIN CHIACHENG

04朋友的品牌 Demo

WAKOU SELECT

為朋友做的公開品牌 Demo，負責需求整理、設計與實作。目前還沒正式啟用，實際成交仍走第三方平台。

角色
網站 / 選品體驗 · 朋友品牌 Demo · 設計與實作

2025 - 2026

01

為朋友的選品品牌，打造一個網站。

這是我為朋友做的品牌 Demo，整理選品介紹與主要服務流程。

朋友在做奢侈品與二手選品，我幫他們把品牌介紹、商品展示，以及購買、養護、鑑定與轉售的服務整理成網站。這是朋友品牌的 Demo，不是客戶委託案件。

把購買、養護、鑑定與轉售的選擇流程整理在同一個網站

選擇的流程

PURCHASE / CARE / AUTHENTICATION / RESALE
  1. 01PURCHASE

    購買

    選擇的入口。

  2. 02CARE

    養護

    保養所選之物。

  3. 03AUTHENTICATION

    鑑定

    確認是否為真品。

  4. 04RESALE

    轉售

    交到下一個人手上。

選什麼、怎麼選、怎麼確認、怎麼交到下一個人手上。

02

先理解品牌理念與需求。

先問清楚想介紹什麼，再決定畫面怎麼呈現。

我先跟朋友聊選品方式和想傳達的感覺，再整理商品照片怎麼放、介紹要先講什麼，以及畫面要留多少空間。

LISTENING

想傳達的內容 / 資訊設計

  1. 01

    讓商品價值被理解

    商品攝影、資訊層級與品牌留白。

  2. 02

    讓第一次接觸的人也能安心詢問

    商品狀態、細節資訊與可信賴的品牌形象。

  3. 03

    不是按下購買就結束

    詢問、一對一諮詢、確認細節，再到最終報價。

03

先確立選品體驗的方向。

整理分類與商品的關係，讓選擇流程更清楚。

現階段先把商品與服務介紹清楚，也整理 SEO 和頁面資訊，讓搜尋結果能看懂網站內容。訂單、出貨與配送追蹤是後續可延伸的方向，還不是已完成的交易系統。

FIG-W1

  1. 01SELECT

    選貨

  2. 02AUTHENTICATE

    整理確認

  3. 03CONSULT

    諮詢

  4. 04DELIVER

    交付

DIRECTION

SELECTION / TRACKING / DISCOVERY

  1. 01SELECTION

    選擇方式

    把購買、養護、鑑定與轉售，呈現為選擇的流程。

  2. 02TRACKING

    後續訂單與配送

    等實際營運需要，再規劃訂單、出貨與配送追蹤。

  3. 03DISCOVERY

    SEO・詮釋資料

    整理頁面標題與內容，方便搜尋和理解。

04

分階段製作，逐步確認。

先整理選品體驗的基本架構。

我先整理分類與畫面，再寫商品和服務介紹，最後確認操作流程。沒有一次把金流、物流都做進去，而是先完成 Demo 需要的部分。

ITERATION

IA / PROSE / FLOW
  1. 01

    資訊設計

    先整理商品分類，以及展示的先後順序。

  2. 02

    商品與服務介紹

    把商品和服務內容寫成簡單好懂的說明。

  3. 03

    確認 Demo 操作

    確認商品展示和詢問的操作，不把未完成金流當成成果。

分階段確認商品分類、介紹內容與 Demo 操作。

05

把商品展示與服務流程做成網站。

以 Vue 3、Vite、Pinia、Router、i18n 搭配 FastAPI、MySQL 8，並以 Docker Compose 與 Nginx 承載。

畫面用 Vue 3 與 Vite，Pinia 管理狀態，Router 處理換頁，i18n 管理語言。後端用 FastAPI、資料存到 MySQL 8，再用 Docker Compose 與 Nginx 整理執行環境。

諮詢與交易方向

FIG-W3

  1. 01

    商品

  2. 02

    詢問

  3. 03

    一對一諮詢

  4. 04

    確認細節／議價

  5. 05

    最終報價

  6. 06

    後續交易

預期的服務流程。自有付款與出貨的完整流程尚未完成，實際成交仍透過既有第三方平台。

BUILD

Vue 3 / FastAPI / MySQL 8 / Docker

  1. 01Vue 3

    選擇的畫面

    以 Vite、Pinia、Router、i18n 形塑選擇體驗。

  2. 02FastAPI

    後端 API

    處理 Demo 的後端功能，正式金流與完整物流尚未實作。

  3. 03MySQL 8

    資料儲存

    保存 Demo 商品與操作所需的資料。

  4. 04Docker

    Compose 與 Nginx

    用 Docker Compose 與 Nginx 整理服務，方便啟動與部署。

BUILD

WAKOU / 05

網站畫面、後端與資料儲存的分工。

06

Demo 已能操作，接下來看品牌的實際需要。

品牌介紹、商品展示與主要服務體驗已做成公開 Demo。實際成交仍走蝦皮、Mercari、Yahoo! 等第三方平台。

目前品牌的業務量還不需要正式啟用這個網站，所以我先把 Demo 做到可以展示與操作。自有交易、正式金流和完整物流還沒做；如果之後業務量增加，再依照他們實際的工作方式延伸。

這次製作讓我更清楚：整理品牌形象，和設計實際營運，是兩件不同的事。先把可以展示的入口做好，交易與物流等功能等真正需要時再規劃。

商品列表商品列表 — 把分類、商品資訊和品牌風格放在同一個畫面。
WAKOU SELECT 商品列表畫面

接下來

  1. 01

    已做好的部分

    已做好的部分：品牌介紹、商品展示與主要服務體驗。

  2. 02

    目前的交易方式

    現在的成交方式：蝦皮、Mercari、Yahoo! 等第三方平台。

  3. 03

    之後再延伸

    之後再做的部分：依營運需求決定自有交易、金流與物流功能。

這次製作的想法

WAKOU / 06

等品牌需要時，再把 Demo 延伸成實際服務。

WAKOU SELECT — LIN CHIACHENG