top of page
dde.png

Design and Debug Efficiency

透過DDE系統,解決原本筆電製作過稱中,人員在線下溝通耗時過長的問題。併提供軟硬體設計資料的自動比對檢測,降低設計缺失,整合報告,減少RD debug 工時。

Team members

Wistron's User Experience Center

Project

Wistron Inc.

Device

Website

ddximg.jpeg
Background

電腦製造公司希望導入系統,來增進電路板設計流程的效率,快速除錯,節省人力時間成本。

Problem

從電路板的設計流程中,完全是 off-line溝通。電路板設計包含硬體設計和軟體設計,需要跨部門協作。但過去完全是靠信件、會議來溝通,當電路板設計出錯,軟體部門和硬體部門來回除錯時間可能會超過一個月。

Our Goal

設計一個專案資訊整合平台、包含除錯系統,讓所有部門的人都可以在平台上協作,快速找到問題,減少人為疏失。

Team

Working as a UX/UI Designer  in this project

Product Owner

UIUX Designer

  • Interview with stakeholders

  • Design wireframes and user interface

  • Create design system

Scrum Master

Tech Leader

Tools

 AdobeXD, Whimsical, Matomo Analytics.

Challenge

一個電腦代工的流程極其複雜,牽涉部門廣泛,其中包含軟體部門、硬體、Spec、PM、QA

管理階層等等,每個部門的需求。需要將多種複雜的需求整合在一個產品中。

dde_challenge.png
Design Process

我們採取的是大型Scrum的開發手法,和兩個開發團隊同步進行開發,每兩個禮拜和PO一起寫制定目標。

在第一個 Sprint 開始之前,會先有設計師的 Prior Sprint,做前期研究和訪談,並和PO制定目標。

在 Sprint 開始之後,和PO討論並一起撰寫 User story,一週進行訪談和討論、一週進行原型的設計,在Implementation階段和Tech Lead 討論可行性,並在當週交付設計至RD團隊。

scrum_process.png
IMG_9789.JPG
Interview

與相關部門代表及專家進行訪談,整理歸納他們的痛點。

依照需求製作flow和Wireframe,並與PO進行討論,討論過的Wireframe會再向核心使用者展示。

User Journey

任務流程:
 

1. 初版系統在創建新案件的時候,有些必填欄位提示不明顯,不知道如何完成開案流程。

2. 資訊顯示錯誤或系統顯示找不到資訊,使用者不知道如何修改。
 

截圖 2022-08-20 18.20.51.png

Solution
 

1. 重新調整填寫順序和邏輯,先填寫必要資訊,並將步驟顯示於上方。並讓使用者可回到上一步修改。2.在填寫欄位加入提示和説明,並在錯誤資訊加入提示。

Stakeholder Map

為了在快節奏的 Scrum 解決龐大且複雜的需求,我設計了一個利害關係人地圖,區別使用者的重要性和對應的功能。

dde_proccess_2.png
User flow

整個系統架構,包含不同的使用者使用該系統時會進行的大致流程。

Web 1366 – 2_2x.png
截圖 2022-08-20 18.44.28.png
Key Design

1.專案條列顯示:
一次瀏覽更多專案

2.視角切換:
根據登入的使用者部門,會顯示該部門對應的資訊,並可切換視角查看不同面向的資料


3.報告整合:
過去的資料都是碎片式的分散在各部門。我們設計以QA的角度設計了一份整合報告,讓資訊一目瞭然。

4.除錯通知:
DDE系統會幫忙自動除錯,並通知相關人士,我設計了通知欄位、信件模板ㄑ

Interview 2022 uk.004.jpeg
Interview 2022 uk.005.jpeg
Wireframe & Prototype

用高仿真互動原型設計:

因為在敏捷開發中,每兩週就會進行一次設計迭代,需要快速交付設計 Spec 給RD。

在開發速度加快時,我省去 Wireframe 的製作,直接用高仿真原型進行設計,第一個好處是可以讓我的設計文件更接近已經在運作中的產品。

第二個好處是設計一旦確認後馬上就可以交付給開發團隊,省去從 Wireframe 再製作成原型的時間。

Usability

1. 建立測試環境:

我們的開發團隊製作了三個開發環境。開發環境、測試環境、和正式環境。

在給實際使用者使用前,我們會在測試環境讓潛在使用者試用,並從他們真實的回饋中進行調整,才會將完整個系統上架到正式環境。

2. 設計回饋系統

使用者可隨時透過回饋系統,回報系統的問題並進行評分。

feedback_1_3.gif
Design System

我為 DDE 建立了設計系統,讓整個專案的元件都有保有視覺一致性。我為每個元件設計互動效果,並設計icon和插圖,讓RD和其他設計師都可以依循這個設計系統進行協作和開發。
 

design guide.png

Visual Style


For the visual aspect, I used a professional background of dark gray and complimented it with energetic yellow in this system. Then, I added a sense of speed to the logo design. Combined the circuit board with 0 and 1 representing software into the login page.

0-0-0 log in 1.png
dde.png
Impact
  • 系統提供設計驗證串資料檢測、研發協作比對、進行資料彙整報告
     

  • 優化RD研發溝通流程,每年可省下的人力換算為 0.7 Mn USD
     

  • 上線後每月實際使用人數為349人,半數為硬體工程師,平均使用時間為11分40秒
     

  • 使用者可對檢測結果做出回應,透過簽核流程修改結果,增強系統準確度
     

  • 串接其他系統資料,快速瀏覽並線上編輯,減少使用者切換系統的認知負擔及溝通成本

What I Learned

1. Scrum的運作方式:

每兩週一次的Planning和迭代,讓我可以很快基於使用者真實的回饋來迭代產品,並更有效率的設計產品。

2. 大型的團隊溝通:

每週一次Retro,我們會和團隊成員檢討我們工作方式,讓我更暸解怎麼和不同背景的人溝通,並與他們建立良好的合作關係。


3. 設計以外的專業知識:

這個專案需要暸解產業相關知識,我們每週都會和領域專家開會。我蒐集了這些知識後建立了一個文件庫,以便暸解使用流程。

bottom of page