BeautinQ

App Design

BeautinQ 是針對美容美體產業的 2B 產品，由於現有的 Web 版本已無法有效滿足顧客對移動場景的需求，因此新開發了 App 版本。在 App 上線 3 個月後，我們發現有近 40％ 的客戶頻繁使用 App。

Project Overview

Aug. 2023 - Sept 2023
Goals
本專案旨在重新設計系統現有功能，使其適應 App 操作流程，確保維持產品的一致性。並且根據 B 端內部管理員及員工的角色需求，制定 App UI 呈現內容。同時也考量到產品的維護和交接，建立完善的Design System 和檔案歸檔方式。
My Role
我負責端到端的設計流程，工作職責包括搜集並分析使用者需求，傳達設計建議。與 PM 對齊目標，確定設計優先順序；與開發團隊合作，確保開發理解設計需求和目標，並協助實現項目的設計願景。
Project Scope
包含 1 位設計師、1 位 PM 及 1 個程式開發小組。

分析痛點與收斂功能目標

團隊從客戶回饋觀察到不同職員角色所關心的事情不盡相同，我們把各職等的使用者痛點轉譯成 User Story，並且綜合使用場景及核心功能使用頻率，將功能劃分成排班、預約、結帳三大類。
兼職人員在意的是...
  • 希望能在手機上即時查看個人班表，以應對顧客臨時預約變更需求，快速完成預約修改。
  • 隨時可以同步自身排班、預約行程，縮短與管理員來回確認的溝通時間。
正職人員在意的是...
  • 希望不受設備限制，在預約、結帳環節降低顧客等待時間，維持顧客整體服務體驗。
  • 隨時可以同步同仁資訊，當遇到臨時狀況時可以迅速做出反應。
管理員在意的是...
  • 不受空間、設備限制，可以即時查看店內預約、銷售紀錄，掌握店面營收資訊確保如期運營。
  • 不受空間限制，可以利用瑣碎時間完成人力排班調度，提高工作效率。

設計挑戰及重新思考

由於有限的 App 螢幕畫面，無法像 Web 版那樣直接攤開呈現資訊，於是我著手觀察現有 Web 版排班、預約、結帳相關功能，重新檢視功能的流程和介面的用途，以使用者的角度重新思考，為 App 提供更直觀、易用的介面。除此之外，保持產品一致性也是 App 的最高設計原則之一，目的在使用者切換裝置時，降低需要重新適應的學習成本，提高使用 App 的意願。

優化結帳紀錄功能的使用體驗

受限手機螢幕尺寸，無法直接將結帳紀錄功能的 Web 畫面流程複製到 App。因此，首先我梳理了 Web 的銷售交易功能，並利用泳道圖繪製了 User Flow 流程，以了解介面和系統的互動方式。同時，在進入設計流程前，考量到產品使用者普遍數位程度不高，為了降低用戶的學習成本及客服教學難度，我著手尋找與用戶生活中比較容易貼近，易於聯想類比的經驗，在與產品經理確立可行性後再進入 UI 設計階段。

重新定義 UI 設計方向

檢視月、週、日的 Web 畫面，由於每筆事件紀錄所內含的資訊量不少，不可能一次在 App 畫面呈現，因此我先抽取月、週、日檢視方式分別不可取代的特點，再進一步界定不同檢視模式的用途，及其分別對應為使用者的需求。

依循挑戰目標提出設計

透過上述分析結果及方向，針對預約/排班的行事曆檢視、優化結帳紀錄流程，分別依循設計挑戰的目標，為 App 提出新的設計UI Mockup，並且也建置 App Design System，便於後續 App 設計的管理與維護。

行事曆檢視

在 App 預約、排班功能上，最後我採用常見的行事曆方式。這不僅是因為與 Web 呈現方式雷同，也因為行事曆是使用者生活中最熟悉常見的形式，對使用者心智負擔最小的方式。
在月檢視模式時，若該日至少有一筆活動記錄，則此日使用顏色標示，以提供使用者在閱覽時能快速掌握整個月狀況，同時也能快速前往查看活動詳情。而週檢視的重點在於時間區塊的使用狀況，藉以協助使用者評估利用程度，因此時間呈現為主，查看活動內容為輔。

設計結帳紀錄功能

由於是與結帳有關的功能，我將線上購物結帳流程，與 Web 版本的結帳紀錄流程比對，並把 User Flow 中的「添加消費內容」階段，結合購物車結帳流程，當使用者在 App 內選擇收款對象後，使用者可以經由比較少的 UI 頁面，快速為消費者添加服務內容，提升員工效率也縮短消費者等待的時間。

建置設計系統

為了後續產品的維護，我為 App 建立了設計系統。這包括了color system、typography 及元件方面的設計規範，並建立了版本紀錄規則。這樣其他設計師或未來加入團隊的成員，也能很快瞭解整個產品功能的來龍去脈，並確保設計風格的一致性和產品的擴展性。

產品上線追蹤

App 上線超過 3 個月後，App 的用戶留存率穩定在近20%的水平；且隨著時間推移，用戶階梯圖的留存率約在25%左右浮動。這個數據結果顯示此次 App 設計確實能夠吸引用戶長期使用，保持現有用戶的穩定。
儘管在開發資源有限的情況下，我們暫時無法蒐集點擊率相關數據，但我們通過後台數據估算，發現頻繁使用 App 的客戶佔全體客戶的 40%。這個結果也表明 App 設計滿足用戶的需求，並促使他們成為我們的忠實用戶。
上述的量化數據證明 App 確實有一群頻繁使用的用戶群體，但我們仍然無法得知用戶的實際體驗，因此我推動以問卷滿意度調查的方式瞭解用戶的主觀感受，並為後續的產品迭代提供重要的參考方向。

這個專案對我的挑戰

在專案中，我面臨了兩個主要的設計挑戰。首先，因為這個產品原先已經有 Web 版，在設計 App 的過程中，我需要兼顧 App 畫面流程與 Web 版本的一致性，但同時我又要突破 Web 版的框架，為 App 創造易於操作的介面流程。
第二個挑戰是這個專案整體的開發時間非常短，只有不到 1 個月的時間就要完成所有設計。因此在有限的時間下我需要快速統整出 App 目標、設計流程與 UI 方向，與開發協調設計的交付節點，分批提供設計文件，將較不影響開發進程的設計內容往後排，例如 lcons、Logo、商店圖等，藉此協助團隊完成專案。

What's The Next

這個專案是一個充滿挑戰但也充滿機會的旅程，通過團隊的努力和協作，App 上線後不僅是收到客戶的好評回饋，也從後台數據觀察到 App 對客戶的影響程度，讓我有機會向內部推動數據驅動（Data Driven），並且進一步發放滿意度問卷調查用戶感受。我負責企劃使用者滿意度問卷調查，規劃調查目的、指標，並安排問卷發放管道，目前正在回收問卷準備分析數據。
More Works
Coshift
Mobile Design

協助餐飲店面管理者人力管理的 Side Project，運用質性研究分析使用者痛點，從中發展出產品獨特的核心功能，減輕管理者排班負擔，並結合 Line 增加內部溝通效率，縮短排班過程並協助管理者即時掌握店內變化，為餐飲管理者提供高效的管理體驗。

BP Mate
Web Design / RWD
Graphic
GUI / Visiual Design

Saas Design

commimg soon

Contact: yunachen8957@gmail.com

Powered by Yuna Chen