VTG:the Leading Platform for Textile Transformation
越南紡織展官方網頁設計
Web Design
UIUX
越南紡織展(VTG)為展昭與越南工業及貿易部合同舉辦的展覽,旨在透過展覽期間的產業交流,促進紡織業的自動化與數位轉型。然而作為參展商與參觀者首要接觸媒介的展會官方網站,設計傳統陳舊且缺乏元素統一性,因此希望藉由這一次的改版,將整體介面優化並建立完整的設計系統,提升使用者體驗,並運用現代化的設計風格來刻畫出傳統紡織業的全新氣象。
參與項目:
UIUX優化、資訊架構流程規劃、設計系統建立、設計QA與驗收
專案期程:
2023/12-2024/3
使用工具:
Figma、Adobe illustrator、Jira
舊版網頁資訊擁擠不易閱讀,且設計過時難以帶入品牌標誌性。
Design Process / 設計過程
Design Feature / 設計亮點
01
Integrating the key visual of
VTG exhibition
導入展會主視覺形象
根據歷年來的資料,我們將使用者最常使用的預先登錄及參展商列表查詢按鈕置頂,方便使用者在進入首頁後能夠快速到達頁面。此外,在設計上導入多媒體影音來呈現出過去展會的盛況與成功,並改善舊有網站資訊擁擠的排版、加入主視覺元素,除了塑造出展會的形象外,也讓網頁瀏覽體驗更佳。
篩選後會於列表旁顯示標籤,讓使用者方便隨時修改,並增加資料排序、搜尋數量結果等功能。
02
Improve Searching Experience
提升搜尋體驗
數據顯示網站中流量最高的頁面為「參展商列表」與「參展產品列表」,所以我們在設計時也呼應需求,改善進階篩選的功能與介面,讓使用者能夠更輕鬆地尋找到需要的資訊,也提高參展商資訊的曝光率。
篩選後會於列表旁顯示標籤,讓使用者方便隨時修改,並增加資料排序、搜尋數量結果等功能。
將進階篩選以popup視窗呈現,並透過標籤頁元件以及按鈕標題文案優化,提示使用者目前是以哪一種條件進行搜尋。
(由於越南地區網速較不穩定的關係,未避免造成後台資料處理速度變慢,故我們評估後不採用多條件(分類/關鍵字/攤位號)同時篩選的功能。)
03
Information Architecture Redesign
改善資訊架構清晰度
透過簡化並歸納資訊的呈現,減少舊版網頁中主視覺紅色的比例並運用字重及間距留白及icon來增加瀏覽舒適度,讓使用者不再遺漏展會相關重要資訊。
篩選後會於列表旁顯示標籤,讓使用者方便隨時修改,並增加資料排序、搜尋數量結果等功能。
篩選後會於列表旁顯示標籤,讓使用者方便隨時修改,並增加資料排序、搜尋數量結果等功能。
► 聯絡資訊頁面整理
由於展會的聯絡窗口分為一般問題/參展諮詢與參展商詢問,在舊版網頁中除了表單標題有些微的差異以外,使用者難以發現自己正在填寫哪一個窗口的表單,造成諮詢類別混亂也讓公司內部整理客戶來信的作業期拉長,故這一次的改版也將聯絡資訊的類別重新設計與統整。
於聯絡我們頁面新增左側分類欄位,讓使用者清楚的看見表單的分類。
詢問個別參展商時,系統會自動帶入收件公司的名稱,提醒使用者這封信件的收件者是誰。
新增參展諮詢表單於相關頁面底部,讓瀏覽上部資訊後對參展有興趣的使用者能夠直接來信諮詢,提升業務詢問量,並透過文案與標籤提示使用者正在填寫哪一份形式的表單。
04
Design System for
Consistency & Efficiency

設計系統的建立與統一
除了越南紡織展以外,展會於孟加拉、緬甸以及柬埔寨皆有一系列的展覽,為達成整個系列展的網頁都能夠統一設計風格的目標,故設計系統的建立對於後續的應用相當重要,除了必須保持設計的一致性以外,未來也能夠因應內容需求彈性擴充與重複使用,提升維運效率。
Continuously optimize and improve
持續的優化與改善
在2月初網頁的MVP版本上線以後,我們也持續地進行網頁的優化並陸續執行其他系列展的產品,正在執行的項目與目標包括:
01 行動版優先的設計:
根據近兩年的數據,透過手機瀏覽展覽相關資訊,尤其尋找廠商/觀看平面圖以及預先登錄的使用者比例已超越電腦網頁版的人數,所以在未來的設計上也將會以行動版的使用體驗為優先。
02 多語系介面的排版:
由於東南亞語系普遍比英文長度攏長,在介面排版以及文案撰寫上需要更注意各國語系的呈現,除了不能有破版問題外,如何能夠讓各語言皆能在產品上美觀的呈現也是我們未來的目標之一。
03 更精準的實現設計:
與開發端的配合上更頻繁的溝通及交流,讓彼此了解產品設計的呈現上是否有共識,除此之外也使用Chrome DevTools積極進行設計QA,減少上線產品及設計稿上的誤差。
THANK YOU
Visit VTG Website