top of page

PACIFIC CYCLE

Role

Lead Visual & UI Designer

Focus

Web UI/UX

Style Guide

Year

2021

榮獲許多知名國際設計獎項的太平洋自行車，成功地結合了實用的傳統思維與超越的全新概念，設計出與眾不同的自行車產品。

​

客戶希望可以根據他們的品牌，設計客製化的網站。

Goal

我在這個專案中重新設計了網站的頁面，包含平板、手機的響應式設計，以現代美式風格和全幅的圖片，呈現高價位自行車的質感。

Devices-Mockup.png

Challenge

原先網站凌亂的Navigation，造成不流暢的使用者體驗。我們重新規劃UX流程，整合網站、商城、使用者管理介面，讓使用者在一個網站能達成所有目標。

Pacific Cycles website structure.png

Design Process

製作Wireframe、Prototype與客戶密切進行溝通

螢幕快照 2021-11-01 上午12.02.11.png
螢幕快照 2021-11-01 上午12.01.34.png
螢幕快照 2021-11-01 上午12.02.26.png
螢幕快照 2021-11-01 上午12.02.58.png

Homepage

Home-Visual-1920.png

Our Bikes

Bikes-Visual-FoldingBikes-1920-rev2.png

Product Details

Product2.png

Cart

Select discount2-rev1.png

Consistence

制定Style Guide

Style-Guide.png

Web design

首先，我先挑選一個重點顏色（品牌橘色），作為網頁的基底，目的為強調商業目的（CTA，商品），降低其他非重點的元素的視覺份量，讓頁面更為簡潔。

​

在視覺上保持一致性。

Result

​整合了龐大的資訊量與功能，使用者一站即可達到所有目標。

​

以產品分類為例，舊版網站只擺放腳踏車的產品圖，使用者想像不到實際運用的樣子。新版網站改成用真實生活的情境圖做分類，讓使用者能依照情境選擇符合當下需求的類別

After

Before

mockup-old.png
mockup-new.png
bottom of page