Vitals ESP

Vitals ESP (Knowledge Management System) assist companies in arranging and supplementing the hidden and explicit knowledge materials in the company ,so that employees can pass on, communicate and learn across organizations, jobs, and regions.

Keywords : UIUX, research, interaction, competitive analysis,

ROLE

UI / UX designer

PLATFORM

Ｗeb

 

PARTNERS

Front-end engineer、Product manager

TOOLS

Sketch

BACKGROUND

Vitals ESP 為在台灣醫療以及銀行業使用率相當高的知識管理系統，由於其各項功能相當完整，所以能達成各個客戶情境，在達成了各種功能的開發後雖說功能完備，但時常會被客戶反應介面不是很直覺或是覺得介面有些老舊

 

GOAL

  1. 提升整體使用體驗，凸顯常用功能、頁面、按鈕與元件

  2. 疏理資訊呈現的方式，重新安排畫面上的邏輯

  3. 改善目前的風格陳舊問題，賦予新的樣貌

1.Reseach

 

1.1 現況調查

產業上對知識管理定義的範圍相當大，主流將知識管理分為三類，檔案管理(Document manager)、內容資料庫(Content database)
通訊協作軟體(Collaborative software)，而我們的產品的定義較接近於內容資料庫，但是由於趨勢會逐漸靠攏，所以也可以從其他的知識管理種類中學習經驗

檔案管理的代表像：Google Drive、Dropbox

內容資料庫的代表像最具知名度的 Confluence

通訊協作軟體的代表是Slack，也是最新型態的一種知識管理

 

1.2 競品觀察

市場上知識管理算是相當競爭的產業，而我們主要的觀察對象為我們的直接競品，也就是內容資料庫類型的產品，這裡觀察了其中四家的頁面與操作，即使是相通類型的產品，在定位上也有著蠻明顯的差異。

競品中的觀察

🌲 樹狀的資料夾結構為主流，方便大家一目瞭然所有資料

👁 所見即所得模式能幫助使用者正確製作知識文件，而擁有預覽模式也更能讓使用者心安

🏞 顯示一則則文件的方式除了文字資訊外，搭配圖片的顯示模式也相當重要

📝 按鈕與頁面安排有些不夠凸顯或統合性不夠，如：搜尋、個人相關頁面、新增文件

2.Design Development

 

2.1 使搜尋功能更為突顯

原版的搜尋框在原比例上所佔畫面過小，但在知識管理中，搜尋知識是很重要的一個部分，經討論後決定將首頁中的搜尋框佔整個頁面的重點項目

分析1.png

2.2 文件列表資訊呈現調整

原列表資訊太過密集且排列過於緊密，且標籤與人名樣式相同不易ㄧ眼分辨，導致整體閱讀體驗較差，改良後拉大整體間距且重新排列位置與樣式，增加閱讀體驗

分析2.png
 

2.3 再篩選功能換位

再篩選功能為搜尋功能中相當方便的功能，但由於原始畫面將他安排在右側，所以在使用上很難理解這個功能(還有一個原因為祐側上方的標籤功能會影響判斷)，調查了市面上有再篩選功能的網頁均放在左側居多，所以評估後決定調整到左側。

分析3.png
 

2.4 知識館 - 增加樹狀資料夾顯示模式

一般使用者在找尋資料夾時會希望呈現樹狀畫面

分析4.png

 3.Delivery

登入頁.png

登入頁

 
首頁.png

首頁

藉由將搜尋框放在最明顯得位置，讓使用者可以盡量從搜尋開始使用這個系統，而上方則能放置公司重要的輪播的圖片。

 
搜尋頁.png

搜尋頁

將”再篩選區”放置於文件左側能讓使用者更明白次功能如何使用

 
知識館 左側知識樹.png

知識館

普遍的使用者習慣樹狀的資料夾結構，能使找尋已知文件位置時更方便

 
新增文件(上傳檔案).png

新增知識 - 上傳檔案頁

新增知識文件時，原畫面將“上傳檔案”與“選擇知識類型”放在同一步驟中，但由於這兩個步驟都需要完成需多操作，所以新版中將這兩步拆為步驟式處理。