Follower Image

快速客製個人風格滑板

Web Design

Jul, 2023

專案概述

SkaterBoi是一個供滑板愛好者購買滑板以及周邊零件的網站。網站最大的特色為提供客製化滑板服務,玩家可依據喜好選定板型、顏色、圖案、各部位零件等,並且在網站上以3D模型即時瀏覽設計成果與費用,讓玩家打造專屬個人風格、獨一無二的滑板!

我的角色與職責

UX/UI 設計師

  • 使用者體驗研究
  • 使用者介面設計
  • 網站資訊架構
  • 產品原型

設計目標

設計一個高效率的客製滑板網站🤔

設計過程

設計以共情換位思考的方式了解滑板愛好者的需求,使用人物誌輔助解決當前客製化滑板的難點。建立網站地圖與檢討使用者流程,並聚焦於客製滑板服務的使用者介面,讓使用者有更為直覺且具互動性的體驗。

目標使用者

對滑板熟悉且具有一定程度的玩家,除了持續精進滑板技巧之外,期待擁有符合個人喜好與風格的獨特滑板。

人物誌

年齡: 27歲
職業: 軟體工程師
居住地:台北

「滑板是自由與挑戰的融合,
我希望我的滑板也能融合個人風格。」

目標

  • 客製化屬於自己的滑板,展現個人風格。
  • 尋找客製化設計的參考,以激發他的靈感。

挑戰

  • 大多數滑板店提供的客製化選擇較為有限且昂貴。
  • 自行蒐集喜歡的滑板組件十分麻煩費時。

Roy是一位酷炫的潮流青年,他熱愛滑板運動,時常在空閒時到滑板場與其他玩家切磋技巧。有時候他也會選擇使用滑板通勤,享受悠哉於街頭的暢快感。

隨著他的技術不斷提升,他有了升級滑板的念頭,除了可以讓他在做招時更得心應手,同時也希望新的滑板能展現他的個人風格,例如獨特的顏色、彩繪、材料、零組件品牌等等。他也尋找了許多滑板玩家的Instagram,作為他設計新滑板的參考。

然而目前的客製滑板相當昂貴且選擇有限,Roy正在想辦法打造出他與眾不同的新滑板!

網站架構

4個主要頁面、2個使用者個人頁面。

使用者流程

以設計滑板為主軸,過程中使用者可儲存未完成的設計,於各頁面間自由瀏覽,並隨時返回繼續編輯完成設計。

線框圖

響應式網頁設計,確認電腦與手機網頁版面都能清楚地操作。

核心功能

客製滑板設計介面

部件細部選擇介面

操作展示

視覺設計

活潑的黃色,類似塗鴉與噴漆的字體,展現街頭風格。元件大量採用圓角矩形,呼應滑板的形狀。

Flip!

設計成果

網站原型

在Figma上試試看吧!(建議於電腦上觀看以獲得較佳體驗,或點擊連結 )

精進空間

建立更完整滑板各部件的3D模型庫,增強可視化體驗。

使用者設計滑板時,若遭遇零件衝突或製造生產限制時,需有提醒。

提供隨機樣式設計功能,激發使用者設計靈感。

潮流館可增加社群功能,讓使用者上傳分享照片。

舉辦與潮流設計師聯名活動,帶動熱潮。

結語

SkaterBoi以線上即時預覽客製滑板的功能,讓使用者能夠自由且有效率地選擇喜好的樣式、發揮個人風格。
透過每個部件皆由玩家親自挑選及組合,打造出專屬感的優良體驗。

參考資料

  • BOARD PUSHER
  • SKATE DELUXE
  • WAREHOUSE SkateBoards
  • REDBUBBLE
  • Jimi skate shop

本作品集網站及Figma原型中使用的部分品牌產品照片與圖片,僅用於展示個人設計練習,並無任何商業用途。 產品照片、圖片版權歸原品牌所有,若有疑慮,敬請與我聯繫。


檢視我的其他作品