DarkSirius
DarkSirius
My role
參與 財團法人中國生產力中心 之產品規劃課程，於用戶訪談中與PM輪流擔任訪談與紀錄角色。將訪談結果繪製為User flow後，依照訪談結果分析問題、提出痛點，並針對痛點提出Design Solution。於發想時，實際執行AB Test，確認解決方案的成效。
設計風格方向需與決策者討論設計，須考慮不同視角與非設計相關背景，以moodboard具體化討論內容，使非設計背景同仁能清楚明白風格。
於設計前期定義設計規範，確立元件與制度，整體畫面更加統一。
Time
2020 11 - 2021 01
Team
PM x 2
Frontend
Design
Platform
Desktop web
Result
與專案小組一起實際參與使用者訪談，更使用Persona、user flow、設計藍圖等工具，使同仁對於完整的UX流程更加熟悉。於設計流程中，主動導入「AB testing」、「moodboard」等工具，加快溝通速度，同時累積個人與團隊的UIUX經驗。
Project context
DarkSirius是一「人工智慧資安監控平台」。
解析連網流量及應用層巨量日誌，偵測惡意威脅。應用於企業內部帳號、設備與服務之間的連網行為，提供企業內外部活動之異常偵測。此系統支援多數常見的日誌檔案，分析結果可輸出到各類SIEM作資料整合，並透過視覺化方式呈現提高資料的易讀性。
Project Process
1 . Research - 3 months
-
訪談對象共 3位
-
準備訪綱
-
準備訪談所需項目、訪談份用與相關器材
-
訪談紀錄與分析
2 . Design - 2 months
-
wireframe
-
mood-board
-
Mid-fi
-
Hi-fi
3 . Design delivery - 1 week
-
DarkSirius Hi-fi
Research
本在初期階段，第一次設計資安監控軟體介面，起步相對有挑戰。
前期研究包含：
1. 訪談（釐清利害關係人）
2.使用者旅程梳理（ User Journey Map）
3. Persona設定
4. 服務藍圖建置
於收斂階段，能將自己的想法提出與大家討論，不管採用與否，都能得到回饋、同時更了解產品方向。這相對過去的經驗相當不同，這次了解到結果正確與否是次要，重要的是，整體方向有沒有因為這樣的討論而更接近使用者。
訪談
於本次訪談中，與PM輪流擔任訪談者與記錄者，以「錄音筆」方式記錄所有對談內容、同時記錄者以紙筆方式記錄重要內容。拍攝受訪者照片、以及收集其工作環境周遭照片。預計地點皆為受訪者之工作場所，訪談時間長度為30-40分鐘，以免雙方過於疲乏
流程上基本依實際回答內容，可追問相關細節。
受訪者（利益關係人分析） /
1. 資深監控人員 Ａ先生
於資安相關領域工作超過10年，擔任過一線、二線監控人員，
如今擔任研究人員角色。訪談之，預期可得出最直接之使用者痛點與使用經驗。
2. 合作客戶 / 資安專案經理 Ｂ先生
其提供各式資安服務於臺灣中小型企業，累積一定相關經驗。選擇其為訪談對象，則期望能深入了解推出產品、說服客戶安裝系統等等相關經驗。
3. 合作客戶 / 資安企業之資深PM Ｃ小姐
受訪者為資安產品經銷商，協助客戶處理產品相關問題。預設藉由訪談可了解到一般使用者常發生之問題與痛點。
訪綱擬定
了解受訪者基本資料後，透過 5W1H 擬定訪談的大綱與問題走向：
1. 請受訪者稍微說明自己的背景與工作經歷
2. 請其闡述工作內容
5W1H：
1. What 您或客戶選擇產品時注重的特點為何？
2. Why 您或客戶為何選擇需要使用資安相關軟體？
3. When 您或客戶通常何時會碰到困難或問題？
4. Where 您或客戶在哪裏使用資安監控軟體？
5. Who 您或接洽是什麼樣的角色、擁有什麼樣的背景？
6. How 通常您如何解決問題/客戶需求？
Key Take away
-
功能與資料過於困難，安裝、使用門檻高。
- A先生：「 現有軟體最麻煩的地方是門檻很高，要培訓新的監控人員需要特別教育訓練，否則會花費過多時間摸索。 」
-
不同客戶在意資料不同，須客製化資訊內容。
-
C小姐：「建置儀表板時，客戶也不知道自己要什麼，一般公版資訊很難使用。」
-
-
系統提供過多使用者不需要之資訊，畫面過於複雜、語言不了解等關係，造成使用不順暢。
-
B先生：「大部分客戶根本不管系統詳細內容，他們只需要你保證有合乎政府法規即可！」
-
C小姐：「通常是客戶對於資安的了解相當粗淺，對於問題無法了解，只希望能盡快解決。」
-
小組討論訪談結果
訪談紀錄
研究方法
Persona / 人物誌設定
1. 討論有所依據，確認問題、以提出更適切解決辦法
2. 成員依自身專業，整合痛點，試想其期望、各方面需求等，以確認使用者定位。
3. 於「功能性工作」的部分，我提出視覺化相關使用經驗。
User flow / 使用者旅程繪製
1. 條列使用者在每階段會碰到的問題或習慣，進而訂定產品功能與方向。
2. 設計師的優勢在於，對於視覺化之相關痛點相當敏銳，提出問題同時能與團隊討論可視化程度與可行性
3. 任何有興趣或無法理解的的部分，就虛心請教有相關背景的組員、互相討論。
Service Blueprinting / 服務藍圖
1. 服務藍圖：「提出前後台接觸點。」從另一方面試想產品如何協助客戶。
2. 情境互動模擬：思考「每一步驟提供協助的 “服務者” 」，釐清產品在其中扮演之角色。
3. 提出「解決方案」，說明產品如何化解問題。
Wireframe & AB testing with prototype
在監控系統中，「條件性搜尋」是很重要的工具。
監控人員會依照自身經驗與專業知識，輸入需求以搜尋他們所需了解之資料。繪製wireframe階段，瀏覽資料同時，我觀察到搜尋列或許並非必要資訊，若採用不同方式呈現，可以更容易瀏覽告警資料。
因此主動主管提議，以「AB Test」確認合適之版本，而得以實際執行測試。研究搜尋相關文章時，現有市面產品之filter多固定於左方，同時於A.Dawn Shaikh與Keisi Lenz研究當中，13%的使用者預設於左中部分出現搜尋功能（僅次於右上方17%)，故AB Test中之設計皆放置於左方，維持使用者習慣。
Design A
搜尋結束後，搜尋列表維持於畫面
優 / 瀏覽畫面固定，檢視條件快速
缺 / 無需瀏覽時，遮蔽搜尋結果，需滾動瀏覽
Design B
搜尋結束後，則隱藏搜尋列表
優 / 瀏覽畫面因此較為寬闊
缺 / 要增減條件需再次將畫面點開
結論與決策 /
依AB Test結果，兩位受測者結果中，版本B平均皆能較版本A 節省平均4秒 的時間完成任務，判斷使用者習慣操作流程後，可達到更高效率，故最後採用版本B之解決方案。
-
寬闊的瀏覽空間
搜尋區塊收合，右方資訊完全呈現所有欄位資料。使用者得減少瀏覽資料時間。
-
清楚的搜尋區域
搜尋icon設計突出圓形，暗示使用者可點擊開啟。輸入條件同時清楚表示於畫面上方。
-
功能區分明確
使用搜尋功能時，此區塊調亮，其餘不必要資訊則轉變為相對低調色彩。此作法可使畫面更加單純，強調主要動作與資訊。
Design process
除介面設計，整體產品形象包含logo設計與規範也囊括在此次負責項目當中。
依需求開始繪製wireframe，將其精稿後與負責人確認功能。藉由''moodboard' 將想法與構想以可視化方式呈現，讓參與討論之不同領域的合作夥伴能迅速理解。本次設計著重項目：
1. 以moodboard具體化討論內容，使非設計背景同仁能清楚明白風格
2. 跳脫傳統資安系統風格，強調介面友善、資訊簡潔與品牌特質
3. 定義設計規範，確立元件與制度，整體畫面更加統一
同時能避免因觀念差異產產生誤解。此階段公司安排一位UI設計工讀生從旁協助，讓我有機會與相同背景的人一起共事。
01
Ｗireframe
紙與鉛筆可直接刪改，得與主管快速討論功能與預計擺放位置。
02
Low-fidelity
此階段以sketch繪製Lo-fi，供最後確認之用。
03
Mood Board
藉由''moodboard' 將想法與構想以可視化方式呈現，且能避免因觀念差異導致溝通產生誤解。
04
High-fidelity
帶入視覺元素與色彩計畫，參考過去討論之關鍵字與情緒版，確認風格有所共識。
Solution
使用者研究與訪談，確認首要功能、服務與解決方式，可了解用戶最大痛點為，需要高彈性的介面設計。於是提出「彈性調整」之呈現方式，用戶能針對自身所需，將Dashboard內容調整為合適的尺寸，以解決客製化之需求。
產品特點介紹
-
圖標調整示意
高度客製化可自由調整畫面重點，其中一重要規範——跟隨畫面切割原則。
以下以「圓餅圖、列表資訊」示意三種不同變化尺寸。
過多的資訊將以卡片寬度為單位，使用者需要左右滑動來瀏覽畫面。無硬性規定不可調整，適用與否交由使用者評判。
-
依不同使用者調整之儀表板示意
用戶可依照自身所需資訊排列各式數據，提升使用速度與便利性。
1x1
1x2
2x2
Design Guideline
將產品之文字、色彩、基本元件統整，於設計過程中，不僅可以加速設計速度，也能讓平台風格維持一致。同時降低使用者認知負擔，利用同一套邏輯與視覺語言與之溝通。
Final Design
Dashboard / Mainpage
Dashboard / Alert selected
Dashboard / Chart selected
Alert / information
Alert / List view
Alert / Search
Design impact
AB testing導入團隊
參與DarkSirius超過半年時間，相當慶幸能從研究階段開始參與這項專案，讓我能更了解整體產品設計的整體脈絡。
wireframe繪製過程，仔細觀察發現可能有更好的做法，主動提出AB Test測試方法、得到主管認同，實際製作測試內容與畫面並應用至畫面當中。要進行這樣的測試，絕對不是一人工作，要感謝工作夥伴的信任與時間，因此能實際驗證自己的想法正確與否。
團隊同仁藉此了解AB testing流程，將來之產品與功能設計，更多一項有力的工具可以幫助產品更好。
Mood-board溝通成效佳
於專案初期，需與不同單位討論其需求與預期目標，討論視覺風格時，不同專業背景的同仁與決策者，很難透過形容詞聚焦。
利用實際的圖像，組合成風格示意，便能很快速了解到彼此想要傳達的意象，能快速取得共識，也能對於介面的風個有所了解。依小組確認之方向設計暗色風格，引導使用者重要訊息，注重使用經驗、降低認知上的負擔。