5 月 UI/UX Taipei 筆記：產品優化的實務經驗 — 講者分享篇
這次的 UI/UX Taipei 主題是「產品優化的實務經驗」，由 Hahow 好學校設計師 Echo 帶來 Hahow Point 的開發經驗分享、經常承包金融業網站的設計師 Niki 也不藏私公開設計師必備三大忍術：UX 空想術、UI 煉金術、溝通幻術。
UI/UX Taipei 2018 May@womany
Echo：打造良好體驗與追求轉換的平衡，Hahow Point 開發經驗分享
臺灣線上課程平台 Hahow 好學校最近推出了學習點數機制「Hahow Point」，試圖透過遊戲化的設計，提升使用者完課率，並降低兩次購買的間隔時間。
負責這個專案的設計師 Echo 帶著一罐壯膽的啤酒上台，分享了 Hahow 團隊的協作方式，並介紹他們如何養成使用者中心文化，最後以 Hahow Point 的開發為例，實際示範 Hahow 如何跑完一個專案。
Hahow 團隊的協作方式
Hahow 團隊主要由 Content Team、Dev Team 以及跨部門的 MKT（行銷）組成。
Content Team 底下有 PM、QC（課程品質管理）、Film（協助老師拍攝教學）、BD；Dev Team 又分成三個小隊，一隊負責客服，其他兩隊負責功能的開發、銷售需求等。
Echo 所在的小隊裡有一個 PO（Project Owner）、四個工程師、一個設計師、一個行銷。每個小隊都可以決定自己要做什麼專案，擁有很高的獨立性。
使用者中心文化
不能只有設計師或工程師在乎使用者，公司裡的所有人都要把使用者體驗放在心上。Hahow 會借助各種工具與工作流程，讓開發團隊更清楚自己在為誰打造功能。
Hahow 使用的工具／工作流程有：
- Google Analytics：大家都認識的網站分析工具。
- Metabase：數據可視化工具，即使你不是工程師，也可以輕鬆拉出想要的數據，顯著減少工程師撈數據的時間。
- Hotjar：觀測網站使用者使用狀況的工具，提供熱點圖、轉換漏斗分析等功能。
- 客服會議：Hahow 每週五會統整最多使用者問的問題，把這些問題公布給全團隊知道，也會附上使用者問題的上下文，讓團隊了解使用者如何描述遇到的狀況、遇到問題時有什麼情緒。
- 其他常用的調查方式：MKT 焦點團體、問卷調查、使用者訪談、User Story Mapping 等等。
Hahow Point 案例分享
Hahow 的開發流程可以分為以下六個階段：
1. Discover & Define
- 發現問題
使用者的課程回購率還有提升空間、上課率也偏低。Echo 的 Team Goal 就是「（提供使用者良好的產品體驗，）提升使用者回購率、上課率」。 - 聚焦目標
為了提升回購率，必須提供購買誘因；為了提升上課率，必須提高上課誘因。最後他們決定嘗試以「遊戲化、累積、折扣誘因」下去思考，得到了「Hahow Point 集點計畫」的想法。
2. Planning
- 資料蒐集
分為對內與對外。對內就是過往數據蒐集，由老師或平台過往舉辦的行銷活動，了解提供獎勵對鼓勵上課行為的成效與提升比例；對外則是案例研究，觀察競品的設計流程、介面呈現等。
除了競品，設計師也會爬各種研究資料，像是 smile.io 這個做會員忠誠機制的服務就提供了幾個集點制的守則，如規則明確、提供多樣化的賺取機制、站內提醒、外部提醒，也提到「使用率（Redemption Rate）」的概念，即「被使用的點數／發出去的點數」的數字，六個月後應該達到 20% 才是健康的。 - 目標行為
決定要獎勵哪些行為，像是註冊、看完第一個單元、看完所有課程單元、填寫評價、繳交作業等。 - 數據推估
因為與金流有關，所以要計算點數折抵上限是多少才是最適宜的。
3. Design
- 流程設計
決定使用者與 Hahow Point 的互動流程，像是如何獲得、如何使用、查詢點數等，在不妨礙使用者行為的前提提示使用者有點數可拿。 - 介面設計
因為有比較吃視覺設計的圖，就先放假圖給前端刻 UI 加快開發速度。 - 視覺設計
以遊戲化（Badge）、強化品牌（吉祥物）、驚喜感（不同任務有不同的視覺）為核心。有趣的是，原本設計想用血條（HP）的概念來做，但考慮到點數是可以被折抵的，萬一使用者看到血條因為折抵被扣光感覺可能不太好，最終才換成 Badge⋯⋯XD
4. Develop
工程師辛苦開發中。
5. Release
千辛萬苦終於上線。
6. Evaluate
最後根據當初訂立的指標驗證數據。目前已有不錯的使用參與度，以及在評價數有顯著的提升。但是在其他的目標上，還需要更長的時間持續做觀察。
最後，大家猜猜 Hahow Point 這次改版總共花了多久時間？
答案是：1–1.5 個月。
新創公司的迭代演化速度真的很快啊！
Niki：金融業網站的 UI／UX 設計心得分享與實作案例
Niki 任職的公司主要是接銀行、人壽、投信的官方網站與 EC 設計。她從設計師實際上的服務對象出發，點出各種服務對象的重要性與需求，並分享在混亂中設計的三大忍術：「UX 空想術」、「UI 煉金術」以及「溝通幻術」。
服務對象與需求
設計師通常以為的服務對象只有終端的「使用者」。然而事實上，設計師的服務對象包括：
- 客戶老闆：總經理、董事長、CEO 等。
- 專案負責人：對接的窗口，可能包含專案部門、IT 部門等。
- 客戶業務單位：實際在維護網站內容的人。
- 你的公司：老闆、主管、PM、工程師等所有會影響設計的人。
- 一般用戶：大多數設計師原本想像的服務對象。
服務對象這麼多，需求又互相打架，怎麼讓設計順利進行？首先，你要搞清楚服務對象的重要性與限制，像是時程、資源等等。再來要注意，每個服務對象在意的點都不一樣，像是：
- 客戶老闆：在意設計風格，像是夠不夠大器。
- 課務專案：在乎設計價值、亮點。
- 客戶業務：最關心維護容易度，到時候上稿上圖的都是他們。
- 你的公司：著重時間、資源。
- 一般用戶：在乎易用性。
面對這麼多需求，設計師可以用影響力來分配比重，把力氣花在正確的地方，例如可以這樣分配：
當然，就算設計師搞清楚不同服務對象的需求，進入實作後絕對會遇到更多問題，像是「根本碰不到使用者要怎麼調查？」、「只給一句話就要設計」、「客戶根本懶得聽設計師講話」等等。
針對這些疑難雜症，Niki 分享了在專案內會用到的三大忍術：
一、UX 空想術
碰不到使用者怎麼辦？請參考下列步驟，從使用者視角思考設計，得出足以向客戶提案的解法。
- 整理目標：例如網站哪些部分要優化。
- 依現有條件建立模型：建立用戶場景，可以使用二象限圖等方式輔助。
- 依現有條件假想流程：建立用戶旅程。
- 解讀模型：提出痛點。
- 優化模型：提出解決方案。
二、UI 煉金術
主管給一句話就要看到設計，還要給三版？這時候請遵循以下建議，便可以從無到有變出設計稿。
- 打開瀏覽器：看客戶競業怎麼做，找出行業趨勢。
- 歸納：分析、整理行業的 UI 趨勢。
- 提出至少兩版設計：一版符合趨勢，一版突破趨勢。（Niki 公司的設計師多，有時畫到 3–4 版甚至以上都有可能）
- 追求真實：設計稿使用的圖片、文案都要經過雕琢，不要用假圖、假字。
三、溝通幻術
面對你的設計，客戶只會說「可不可以再跳一點」？主管懶得聽你的設計理念，只想要上一版設計？這時請平靜下來，依照以下心法溝通：
- 保持專業態度：不要生氣、嘲諷或流露出不專業的情緒。
- 使用各種專有名詞：烙英文的時間到了，把所有 Components 跟 Gestures 都用英文說出來吧！Carousel、Text Field、Action Sheet、Pinch、Drag and Drop⋯⋯不仔細聽以為是 Eminem 在唸 Rap 呢。
- 提供超過一個的解決方案：不要只提供你心目中「最好」的那個方案，而是要提供「選擇」。專業人士之所以專業，就是可以提供各種解決方案。
最後 Niki 也分享了自己在職場中的闖蕩心得，她鼓勵大家主動建立屬於自己的知識架構體系，認清現實就是「計畫隨時在改變」，隨時觀察、隨時學習，才能在惡劣的條件下生存。
她最後送給大家的一句話是：「你的恐懼就是你的能力邊界。」
下半場 Q&A 紀錄請見：5 月 UI/UX Taipei 筆記：產品優化的實務經驗 — Q&A 篇
看完這篇文章，如果你想：【單純給我們鼓勵】請幫我們拍手 1-5 下
【看到我們寫更多「UI/UX」類文章】請幫我們拍手 6 下以上
【有其他建議/想許願文章類型】請留言在底下
