.png)
專案期間
擔任角色
職責
6 個月
UI / UX 設計師
執行使用者研究、設計使用者介面
.png)
專案概覽
01 | 團隊目標
為會眾重新設計 PyCon 官網體驗，將首頁不合理的按鈕做重新整理，同時調整動線增加新會眾參與的可能性。
02 | 角色與產出
我和四位工程師合作。我負責整個 UX 和 UI 設計流程，從使用者研究中定義問題到交付最終設計成果給工程師。
03 | 專案挑戰
由於專案前期設計只有我一個人負責，有些設計細節需要與人討論，因此花較多心力在研究設計對使用者是否有價值。
04 | 目前專案成果
兩個月內產出了主要頁面的 prototype ，並且再做了一次使用者測試，進一步優化。同時從使用者身上收到了正面反饋。
專案背景
PyCon 是全球 Python 社群的年度盛會。每年都會邀請國內外頂尖講者來台分享 Python 方面的技術或是專案經驗。這個活動旨在聚集台灣各領域應用 Python 的組織與個人，交流彼此的經驗心得，分享最新的技術發展，並親身體驗社群獨有的熱情。
PyCon 年會官網主要目的就是讓會眾線上購票以及觀看今年演講資訊等，同時還需要讓新會眾以及有興趣者透過官網的介紹可以更了解 PyCon 進而參與年會。然而，官網用途太過多元，工程師難以分類，再加上每年招不到 UI 設計師導致無人規劃官網使用者體驗，出現了很多不合理的區塊及分類。因此，我們想透過使用者研究協助優化年會官網，讓年會官網換然一新。
登入按鈕文字用 “My PyCon” 表示，
非常不直觀，讓使用者找不到從哪裡登入
很多功能在會期前臨時追加，工程師不知如何分類，為了方便快速便創造了 “傳送門” 這個區域
讓官網首頁顯得有些雜亂
按鈕大小與樣式沒有做統一的規劃，會讓使用者困惑按鈕樣式不同的原因
PyCon 年會官網光首頁就有20個按鈕，其中按鈕樣式還各不相同、有大有小，許多使用者要找到自己想要的頁面都需要花好一段時間點擊各頁面。
設計流程
01.
發現問題與用戶痛點
02.
定義問題及目標
03.
發想解決方案
04.
透過實測繼續優化
透過訪談進行使用者研究，
瞭解用戶的需求以及痛點。
將搜集到的問題做總結，並記錄成文件。
蒐集問題細節之後，
構想適合的解決方案。
利用 prototype 測試滿意度，進一步優化更多體驗。
使用者研究
專案前期，我訪談了 10 位使用者，用他們的角度去觀察用戶如何去理解我們的官網，進行了使用者研究來定義核心的用戶問題，以下是我從這次研究中所學習到的事情：
使用者研究洞察
“ 我不知道要點哪個按鈕，才能到達我想去的頁面。
使用者表示首頁中的「傳送門」分類不明，讓人不知道這個區塊的主要用途為何，旁邊也欠缺說明文字，不知從何了解起。
使用者不知道「註冊」就是「購票」，想參加年會卻不知從何報名。
整體來說，分類欠缺規劃及按鈕名稱不明確，造成使用者操作困難。
官網的設計讓我很難了解這是什麼活動，進而降低報名意願。
”
使用者不知道「My PyCon」就是「登入」，想登入投稿卻花了很多時間在找按鈕。
1.
2.
3.
訪談對象人物誌
我將訪談對象歸納成三個人物誌， 它可以幫助了解我們到底要為誰設計，以及在優化體驗時需要注意的細節與設計方向。
.png)
Ray ｜工程師兼講師
人物介紹
Ray 是工程師兼講師，參與 PyCon 好幾年了 曾擔任志工，也常擔任講師分享技術。
.png)
Jack ｜大學生
Jack 目前就讀資科系，是第一次參與 Python 年會，想多聆聽演講吸取資訊類新知。
.png)
Pin｜贊助商
Ted 是軟體業贊助商，因為公司需要工程師人才，因此也常常跑程式年會活動招募人才。
人物需求
1. 想快速購票
2. 想迅速找到各活動報名連結
3. 迅速登入 PyCon 並投稿
1. 想了解 PyCon是什麼活動
2. 想了解總共有哪些演講
1. 想迅速了解贊助方案
2. 想了解有哪些亮點值得贊助
定義問題
1. 首頁按鈕太多樣，使用者要花很多時間摸索
當初「傳送門」的用意是為了快速方便找到一些功能，但是對新使用者而言，傳送門充滿許多不明白用意的按鈕，旁邊也缺少解釋的文字說明其用意，反而造成反效果。
2. 導覽列按鈕的名稱不直觀，容易造成誤解
導覽列的「註冊」會讓會眾以為是要加入會員，應改為「購票」較為合適。在導覽列旁的「 My PyCon 」功能其實是「登入」，按鈕名稱過於不直觀會讓使用者不知所措。
3. 頁面文字過多，缺少圖像及 icon
很多說明頁面只有純文字，缺少圖片輔佐會容易讓使用者失去耐心，容易直接跳出頁面。若有實際的圖像或是活潑的icon 搭配可以讓使用者一看就能懂，也能提升使用者繼續閱讀意願。
設定目標
利用前面的使用者訪談，我觀察使用者瀏覽 PyCon 官網的路徑，發現不同身份會有不同的瀏覽路徑：
新會眾：
首頁
關於
議程與活動
購票
舊會眾：
首頁
議程與活動
購票
贊助商：
首頁
關於
議程與活動
贊助
我觀察到許多新使用者或是贊助商點進「關於」想了解更多資訊時，卻看到一長串「年會歷史」，沒有準確解釋 PyCon 到底是什麼活動，因而沒有想要看下去的慾望，也錯失了解年會的機會。
因此我重新追加了一個目標，就是讓新會眾以及新贊助商可以透過官網明確知道 PyCon 是什麼、我們在做什麼，希望讓他們一看就懂。
最終目標
“ 讓使用者能夠充分了解 PyCon 年會，並進一步購票或贊助我們。
”
設計原則
01 | 遵循設計系統
定義一個設計系統非常重要，提高設計的一致性讓使用者不會因為樣式不同感到疑惑。
02 | 易達性高
對於舊會眾，快速購票及報名活動是重要需求，因為很多活動必須事先報名才能參加。
03 | 文字圖像化
對於新會眾與贊助商，想一眼就看到重點，而能迅速抓到他們眼光的就是圖像。
設計系統
設計系統可以幫助優化使用者體驗以及統一風格，同時可以檢視自己的專案有沒有矛盾，最快速的方法就是開始整理自己所有的素材庫，包含元件、色票、以及字體風格，一字排開時可以很快的知道有無地方不合邏輯。透過設計系統，也可以幫助我跟工程師更有效率的溝通。
設計產出
因產出頁面太多，所以我舉三個比較明顯的例子並用對照的方式並且在頁面旁邊附加說明，這樣比較一目瞭然。
第一步先從首頁開始，首頁要解決的主要為分類的問題，導覽列也包含在首頁的一部分必須一併處理。
1. 首頁部分
思考點：如何讓使用者有效找到資訊並能夠充分了解我們的背景？
Before
.png)
After
1. 原本的導覽列沒有置頂，容易讓使用者動線混亂，因此這次將導覽列置頂，滑動螢幕時也固定置頂，
也方便使用者通往其他頁面時不用花費太多時間。
2. 快速完成購票是舊會眾的訴求，也剛好是團隊希望的ＣＴＡ，因此選擇將「線上購票」這個按鈕放於最顯眼處。
3. 因應十週年特別新增相片區讓大家回憶以往活動。
4. 新增「最新公告」將「傳送門」中按鈕重新分類，並且附加說明，也能讓新會眾了解用意。
5. 將關於 PyCon 介紹文字順序優先於贊助商欄位，有助於新會眾新贊助商迅速了解我們，才能進一步購票或是贊助我們。
2. 總覽部分
第二個我修改較多的頁面我認為是「總覽」，「總覽」是能夠一眼就看到所有演講以及交流活動的頁面，原本（左邊如圖）就只有文字說明缺少圖片展示，會讓使用者只能憑空想像活動樣貌。
思考點：如何讓使用者一眼就能縱覽所有活動資訊？
Before
After
1. 多新增一個banner區域，附上總覽說明文字有助於新使用者了解這頁製作的目的。
2. 用卡片排列方式將活動整理成三個一排，並且附上圖片容易讓使用者理解活動。
3. 右上角的 tag 有助於使用者辨認活動活動性質為會前活動、會中活動還是演講性質。
3. 關於部分
「關於」頁面，也就是簡介，使用者想要了解更多時會點擊這邊尋找關於我們的背景以及我們在做什麼事情。可以看到原本左邊只有很多文字介紹，使用者測試中大多數測試者看個5秒就會跳到其他頁面。
思考點：如何將枯燥文字轉換成使用者有興趣閱讀的資訊？
Before
.png)
After
1. 多新增一個照片區域，讓新使用者更有感覺我們活動在做什麼。
2. 將原本一長串文字轉換成 icon 等作法讓使用者有繼續閱讀的動力。
3. 把可以強調的文字加以放大的效果也有助於使用者找到重點。
目前成果
設計好主要頁面後，利用 prototype 重新給予使用者測試滿意度，也再次蒐集可以優化的地方。這次的重新設計讓很多使用者都給予了正面的評價，它大大的提高了使用者找東西的效率以及使用者的黏著度。
滿意度測試
“ 原本很難理解那些生硬的文字，有圖片及icon之後變得很好理解。
改版之後變得整齊也比較好找到購票資訊。
1. 增加
20 秒
平均停留時間
順利完成購票流程
80%
75%
使用者能理解 PyCon 在做的事
”
2. 高達
3. 高達
另外，同時也蒐集到一些關於導覽列下拉選單的意見，由於下拉選單中太多專有名詞，例如基調演講、一般演講、衝刺開發等名詞會讓新使用者不知情其用途，因此這次測試之後也進一步優化這部分：
1. 將下拉式選單取消，把專有名詞的部分集合成一頁「總覽」，讓使用者直接點進去看說明文字
2.「註冊」改成「購票」，同時將下拉式選單中的財務補助移動至購票頁面作為補充。
3.「My PyCon」改成「登入」，讓使用者更好理解。
Before
After
反思與學習
1. 永遠要以使用者的角度思考
設計介面時，有時候可能會因為視覺上主觀的認知而設計，但是有時候做到一半往往會忘記做這個視覺的初衷為何，很容易迷失方向，因此我也常常做到一個段落時就拿給身邊的朋友詢問意見。我認為設計時也需要考量到文案等呈現，否則會易讓使用者失去耐心，因此設計時也嘗試修改文案確保使用者閱讀時不會遇到瓶頸。
2. 與工程師交付過程要多釋出善意
很多東西像是 icon 等處理其實是很麻煩的，也許我們設計產出只要一小時但是工程師們卻需要花三小時，若這時設計稿沒有表達完整，工程師又要花更多時間確認溝通上，因此應該主動跟工程師詢問有沒有哪裡不清楚，主動開啟與工程師的話題，且溝通時需要用使用者的角度給予合理的解釋，讓工程師也認為這個功能有產出的必要時，才會全心全意投入。
3. 主動向團隊回報進度
很多設計其實團隊裡會有很多意見，若已經完成再修改就會額外花很多時間，因此我習慣設計好一個頁面就主動把頁面以及影片上傳到該組別的群組，讓團隊再次審核這樣確保內容沒問題，也可以隨時讓團隊了解自己的進度。
4. 樂於分享、開放的心態
團隊一開始其實很多工程師與設計師都沒有接觸過 Figma 所以大家也都是邊做邊學，我自己剛好有上一門線上課程所以比較有方法學習，其他人的設計可能難免有些小錯誤，這都需要調整心態站在對方立場想。也因此我自己在團隊中發起了一個 Figma 線上小 workshop ，從最基礎的介面介紹到 Autolayout等讓大家可以更了解 Figma，也可以讓工程師更能理解我的設計稿，幫助團隊內部順暢溝通。
PyCon Taiwan 2021 月會合照，感謝每個人無私的付出。