Project Description

SMB NAS Operation System – QSM

SMB NAS Operation System – QSM

:: DURATION

Dec 2015 – Jun 2017

:: CLIENT

QSAN

:: TEAM

PM + RD + Design

:: MY ROLE

UI

QSM是QSAN NAS私有雲的操作系統,目標使用者為中小企業,配合PM與RD,在現有的框架下,設計 Design System、Guideline與UI。設計過程中最困難的部分是,他是一個將企業級技術,下放到一般使用者的產品; 將技術名詞或抽象概念轉化成圖像時,同樣的icon對於兩種user象徵的意義也有可能不同,需要同時考量技術者與End-user兩種思維,在之中找出甜蜜點。

Competitive Analysis

Design Goal

Background

這個專案最初是與外包的 UI 合作,由 QSAN PM主導UX ,但半年後由於RD與外包合作不順利,才由我接手 UI 設計的部分。

團隊成員:PM x 6 + RD x 15 + Design x 1

Before

Paint Point

End-user
• 設定時做了無法挽回的行動
• 面對一堆表格,常不知道要從何開始
• 有些使用說明會以專有名詞解釋專有名詞,看完後感覺得到更多疑問

技術者
• 有些功能被普遍設計成表列式操作,改成圖像化沒有比較簡單
• 功能的分類方式每家系統都不同,每次轉換都得花時間重新尋找
• 有時以icon代替文字畫面比較好看,但真猜不出它想表達什麼

Design Goal

• 設計結合親切感與專業功能的介面
• 使用圖形化介面,改善使用者體驗
• 建立符合RD 框架的 Design System
• 重整視覺為接近 mac OS的風格

Ideation

• 重建設計系統
• 設計前先參考競品與RD使用的框架,充分考量實作的可行性
• 圖型化設計搭配文字提示,或混合表列式一起使用
• 搜尋的規則要考量多種使用情境與建立關連性
• UX Writing 寫作語氣保持簡短、口語化與一致,避免長篇大論
• 防呆機制

Design

Login

Tutorial

Desktop

Deployment

Antivurus

Media Player

Icon List

UI Guideline

Room for Improvement

由於這個專案的Wireframe是由6個PM共同完成的,某些PM偏好設計多層選單,但視窗在經過欄位垂直與水平切割多次後,顯示資訊的空間已所剩無幾。這個問題,讓我意識到團隊溝通與UX一致性的重要,也因此我們在後來設計協作時,所有Wireframe拍案前都必須經過團隊討論,以避免這類的問題。