ATTAPP

ATT Group APP Redesign

ATTAPP

ATT Group APP Redesign

ATTAPP

ATT Group APP Redesign

❍專案概述

📔專案背景

ATT 集團（ATT Group）是一個以流行服飾起家的台灣企業集團。 集團在台灣服飾、商場、夜店、建築開發等領域都有發展，以「Attractive」為核心，提供消費者時尚、流行、娛樂等多元體驗。 

而 ATT Group APP 是一款整合會員服務、活動資訊與購物優惠的全方位數位平台，本專案旨在提升顧客的逛街體驗並強化品牌黏著度。

👩🏻擔任角色

在這個專案中，我獨自負責使用者研究、Wireframe 與 UI 介面設計，並根據研究結果優化流程與資訊架構。亦建立設計系統來規範元件使用，確保整體視覺風格與操作體驗的一致性，讓後續設計與開發流程更高效、協作更順暢。

🚩專案挑戰

這是我首次參與的大型商業 APP 專案，設計內容需大幅度改版，涵蓋資訊架構、互動流程與視覺風格的全面調整。為了降低使用者學習成本，並確保舊用戶能順利銜接新版 APP，我深入研究了舊版系統的操作邏輯與功能使用情境，同時也分析多個競爭品牌的介面設計，歸納出最佳實踐，作為新版 UX 優化的基礎依據。



❍研究分析

⟡ 商業目標

為提升 ATT Group 百貨 App 的整體使用體驗與品牌形象，我們透過與客戶訪談了解需求。舊有系統存在流程繁瑣、資訊架構混亂等問題，導致使用者操作困難，加上視覺風格與品牌調性不符，功能上也無法滿足現代用戶需求。因此，我們針對本次 App Redesign 歸納出兩個 UI/UX 的主要優化方向：

🛠 資訊架構優化與功能擴充
🎨 打造全新視覺與品牌識別

整個設計過程中，我們持續與客戶來回溝通，由 PM 撰寫需求規格書，明確定義功能優先順序與修改目標，確保成品符合品牌與客戶期待。


⟡ 競品分析

在研究階段，我透過蒐集網上的二手資料進行競品分析，了解各百貨公司 App 的市場定位與功能特色，也為未來的 UI/UX 設計與優化提供參考依據：

整體而言，百貨公司 APP 因使用族群廣泛，常見登入驗證異常等問題，加上活動與功能導向商業需求，資訊繁雜，易讓使用者產生混亂與操作困難。流程優化與資訊架構清晰化是此類 APP 需要注意的重點。


⟡ 產品檢視

根據十大易用性原則 (10 Usability Heuristics)去檢視產品，並從中得出以下問題：

1️⃣ 美感與簡約設計

畫面中物件與文字過於密集、重疊，缺乏足夠留白與視覺規範，導致部分介面雜亂、閱讀困難。

2️⃣ 符合真實世界

介面中使用了不直觀的專業術語與模糊功能命名，降低易懂性，對使用者不友善。

3️⃣ 一致性與標準

介面元件未遵循統一設計規範，例如按鈕樣式、文字格式、列表排版方式不一致，造成使用者對操作的預期落差。

4️⃣ 協助與說明引導機制

多數功能未提供即時提示或使用說明，點數查詢與票券兌換等流程缺乏引導，容易讓使用者迷失。


⟡ 設計目標

根據以上分析，並結合客戶的商業需求，我們整理出了這次 ATT Group APP Redesign 的核心重點：

🛠優化操作流程與資訊架構

針對舊系統操作繁瑣問題，重新盤點功能與使用情境，調整資訊層級與動線，提升操作效率與直覺性，減少步驟並降低認知負擔。

🎨建立一致且現代的視覺設計

依據品牌定位「時尚、流行、娛樂」，重新打造視覺語言與色彩系統，提升整體協調性與品牌識別，帶來連貫的使用體驗，也有助於後續開發與維護效率。

📋擴充功能與使用者引導

除了擴充客戶提出需求的功能外，也針對過往命名不清、缺乏操作說明的問題，優化標籤命名、增設圖示與輔助文字說明，協助使用者快速理解各功能意圖。



❍設計產出

⟡ Wireframe

我負責繪製中高保真度的 Wireframe，明確規劃各畫面版位與功能區塊，並搭配註解與客戶進行多次來回確認，確保功能流程與實際需求一致。在確定基本結構後，我也針對幾個主要畫面（如首頁、會員註冊、票券頁等）延伸出不同的視覺風格與配色方案，提供多種方向供客戶評估，協助釐清品牌定位與偏好，加速後續 UI 設計的定稿流程。


⟡ Prototype

優化資訊層級

  • 重新整理原有資訊架構，將常用功能優先置於首頁與底部導覽列，提升操作效率

  • 優化搜尋功能與櫃位資訊導覽邏輯，協助使用者更快速找到所需內容


一致且現代的設計

  • 依循 ATT 品牌 LOGO 的視覺規範，打造風格一致的 APP 介面，強化品牌識別

  • 優化留白比例與用字表達，簡化專業術語，提升資訊可讀性與整體使用體驗



擴充功能與引導

  • 擴充/優化禮券兌換、活動推播與停車折抵等功能，提升逛街便利性與實用度

  • 透過輔助用語與引導文字減少使用卡關情況，搭配插圖設計，增強互動感與親和力



❍結論

💡設計思考與反思

在參與 ATT GROUP APP 改版設計的過程中，我更了解設計不僅是使用體驗與畫面的呈現，更是解決問題、回應需求並創造價值的過程，設計師需要在使用者體驗與商業成效之間找到最合適的交集，並與團隊一同建立設計目標，使產品確實落地。我希望未來在每次專案合作中累積的經驗與洞察，能為產品帶來更多價值與肯定。

👨‍👧‍👦團隊多元性與溝通協調

在此次專案中，我體會到多元背景的團隊能帶來豐富觀點，而靈活調整溝通方式是提升協作效率的關鍵。與 PM、工程師等利益關係人合作時，更加理解使用共同語言的重要性，透過建立共通術語能提升協作效率，也促進了跨部門間更流暢的合作。


Thank You !

❍專案概述

📔專案背景

ATT 集團（ATT Group）是一個以流行服飾起家的台灣企業集團。 集團在台灣服飾、商場、夜店、建築開發等領域都有發展，以「Attractive」為核心，提供消費者時尚、流行、娛樂等多元體驗。 

而 ATT Group APP 是一款整合會員服務、活動資訊與購物優惠的全方位數位平台，本專案旨在提升顧客的逛街體驗並強化品牌黏著度。

👩🏻擔任角色

在這個專案中，我獨自負責使用者研究、Wireframe 與 UI 介面設計，並根據研究結果優化流程與資訊架構。亦建立設計系統來規範元件使用，確保整體視覺風格與操作體驗的一致性，讓後續設計與開發流程更高效、協作更順暢。

🚩專案挑戰

這是我首次參與的大型商業 APP 專案，設計內容需大幅度改版，涵蓋資訊架構、互動流程與視覺風格的全面調整。為了降低使用者學習成本，並確保舊用戶能順利銜接新版 APP，我深入研究了舊版系統的操作邏輯與功能使用情境，同時也分析多個競爭品牌的介面設計，歸納出最佳實踐，作為新版 UX 優化的基礎依據。



❍研究分析

⟡ 商業目標

為提升 ATT Group 百貨 App 的整體使用體驗與品牌形象，我們透過與客戶訪談了解需求。舊有系統存在流程繁瑣、資訊架構混亂等問題，導致使用者操作困難，加上視覺風格與品牌調性不符，功能上也無法滿足現代用戶需求。因此，我們針對本次 App Redesign 歸納出兩個 UI/UX 的主要優化方向：

🛠 資訊架構優化與功能擴充
🎨 打造全新視覺與品牌識別

整個設計過程中，我們持續與客戶來回溝通，由 PM 撰寫需求規格書，明確定義功能優先順序與修改目標，確保成品符合品牌與客戶期待。


⟡ 競品分析

在研究階段，我透過蒐集網上的二手資料進行競品分析，了解各百貨公司 App 的市場定位與功能特色，也為未來的 UI/UX 設計與優化提供參考依據：

整體而言，百貨公司 APP 因使用族群廣泛，常見登入驗證異常等問題，加上活動與功能導向商業需求，資訊繁雜，易讓使用者產生混亂與操作困難。流程優化與資訊架構清晰化是此類 APP 需要注意的重點。


⟡ 產品檢視

根據十大易用性原則 (10 Usability Heuristics)去檢視產品，並從中得出以下問題：

1️⃣ 美感與簡約設計

畫面中物件與文字過於密集、重疊，缺乏足夠留白與視覺規範，導致部分介面雜亂、閱讀困難。

2️⃣ 符合真實世界

介面中使用了不直觀的專業術語與模糊功能命名，降低易懂性，對使用者不友善。

3️⃣ 一致性與標準

介面元件未遵循統一設計規範，例如按鈕樣式、文字格式、列表排版方式不一致，造成使用者對操作的預期落差。

4️⃣ 協助與說明引導機制

多數功能未提供即時提示或使用說明，點數查詢與票券兌換等流程缺乏引導，容易讓使用者迷失。


⟡ 設計目標

根據以上分析，並結合客戶的商業需求，我們整理出了這次 ATT Group APP Redesign 的核心重點：

🛠優化操作流程與資訊架構

針對舊系統操作繁瑣問題，重新盤點功能與使用情境，調整資訊層級與動線，提升操作效率與直覺性，減少步驟並降低認知負擔。

🎨建立一致且現代的視覺設計

依據品牌定位「時尚、流行、娛樂」，重新打造視覺語言與色彩系統，提升整體協調性與品牌識別，帶來連貫的使用體驗，也有助於後續開發與維護效率。

📋擴充功能與使用者引導

除了擴充客戶提出需求的功能外，也針對過往命名不清、缺乏操作說明的問題，優化標籤命名、增設圖示與輔助文字說明，協助使用者快速理解各功能意圖。



❍設計產出

⟡ Wireframe

我負責繪製中高保真度的 Wireframe，明確規劃各畫面版位與功能區塊，並搭配註解與客戶進行多次來回確認，確保功能流程與實際需求一致。在確定基本結構後，我也針對幾個主要畫面（如首頁、會員註冊、票券頁等）延伸出不同的視覺風格與配色方案，提供多種方向供客戶評估，協助釐清品牌定位與偏好，加速後續 UI 設計的定稿流程。


⟡ Prototype

優化資訊層級

  • 重新整理原有資訊架構，將常用功能優先置於首頁與底部導覽列，提升操作效率

  • 優化搜尋功能與櫃位資訊導覽邏輯，協助使用者更快速找到所需內容


一致且現代的設計

  • 依循 ATT 品牌 LOGO 的視覺規範，打造風格一致的 APP 介面，強化品牌識別

  • 優化留白比例與用字表達，簡化專業術語，提升資訊可讀性與整體使用體驗



擴充功能與引導

  • 擴充/優化禮券兌換、活動推播與停車折抵等功能，提升逛街便利性與實用度

  • 透過輔助用語與引導文字減少使用卡關情況，搭配插圖設計，增強互動感與親和力



❍結論

💡設計思考與反思

在參與 ATT GROUP APP 改版設計的過程中，我更了解設計不僅是使用體驗與畫面的呈現，更是解決問題、回應需求並創造價值的過程，設計師需要在使用者體驗與商業成效之間找到最合適的交集，並與團隊一同建立設計目標，使產品確實落地。我希望未來在每次專案合作中累積的經驗與洞察，能為產品帶來更多價值與肯定。

👨‍👧‍👦團隊多元性與溝通協調

在此次專案中，我體會到多元背景的團隊能帶來豐富觀點，而靈活調整溝通方式是提升協作效率的關鍵。與 PM、工程師等利益關係人合作時，更加理解使用共同語言的重要性，透過建立共通術語能提升協作效率，也促進了跨部門間更流暢的合作。


Thank You !