top of page
網頁用圖-01.png

Machine UI

UI Design

AM7640i_Front-01.png
AM7640i_Front-01.png
Main screen
主畫面.png
Copy
一般複印_基本.png

MFP UI

MFP with copy and scan functions. New UI design makes the operation easier and more intuitive.

Design main point

1. Use appropriate icons and text descriptions

2. Reduce the layer of operation

3. Clearly setting items

4. High-contrast color 

Smart Copy
智能複印_基本.png
Scan setting
掃描 - 掃描至裝置_影像.png
AN240W Front.png
Quick scan
快捷_1.png
Scan to Email
email_4_f2.png

​Multifunctional Station UI

The main feature of Multi-function scanner is to allow users quickly scan documents to the destinations.

Design points

​1. The destination setting should be the main page, followed by the image setting.

2. User can slide the function bar to switch the destination.

3. Clearly setting items

4. High-contrast color 

Scan to cloud
cloud_3_f.png
Scan to folder
folder_2.png
Scan settings
快捷_設定_1.png

Other

home.png

In this project, we move client's web page functions into the scanner touch panel.Therefor, I Re-plan the layout and operation mode.

Design Points

Design Points
1. Convert the original functions on the web page into the layout for the scanner touch screen.

2. Added scanning and templates functions.

3. Redesign the gesture operation.

4. Keep the original brand color for consistency.

Main Screen
home.png
Form Editor - main
editor.png
Verification
Verification_2.png
Scan and OCR - choose template
scan and OCR_4.png
Setting - time picker
scan&recognition.png
Scan Image - settings
scan image.png
Form Editor - edit mode
editor-1.png
Verification-edit
Verification_3.png
Scan and OCR - Scanning
scan and OCR_5.png
Setting - date picker
scan&recognition-1.png

Experience

在設計B2B的產品時,需求通常是由業務或PM等專責去接洽和擬定,而且比起一般的使用者,2B產品往往會有更多的客製化要求。在這樣的運作型態下,工作分派到我手上時通常是已經被制定好需求和基本流程。其中我比較常面臨到的問題是:

 

問題1. User flow 和 wireframe不是每個關係人都會認真看。

明明當初提出User flow 和 wireframe 的時候都沒問題,怎麼等到專案快做完才又說要改這改那。

工作了一陣子,就會發現其實很多人都不看(或是看不懂)User flow 和 Wireframe。

 

改善方式:改善 User flow 和 wireframe 的表現方式,搭配更白話的說明文字,讓架構和流程淺顯易懂, 並要召集相關部門成員面對面講解,最好可以搭配Lo-fi原型,讓團隊成員有比較具體的概念。在這個時候盡可能去發現、蒐集到問題和各方意見,後續工作才可以更順利進行。

 

問題2.客戶要求說改就改,導致時間變得很緊迫。

曾經在某專案中,已經進行到切圖給工程師了,經理才告知客戶要大改需求。剛開始面臨這種狀況真的讓人很吐血,不過我很快就明白,這種狀況其實蠻日常的。雖然客戶突然翻盤要求改圖這件事不是我可以控制的,不過還是有些小方法可以減輕改圖的痛苦 > <

 

改善方式1.平常就為自己預留時間。

養成建立元件圖庫的習慣,並善用figma的component。把常用元件做成Sticker sheet,空閒時多設計幾種款式,可以有效提升作業速度。

 

改善方式2.再次確認需求,並分析利弊。

透過再次確認設計目標,可以把不小心偏離主軸的重點拉回來,而如實說明修改的時間成本,則可以讓大家再次思考修改的必要性。曾經有專案差點要翻盤,不過在我提出修改建議和需要的時間成本之後,終於避免再次改圖的命運。

Production Team
Marketing Planning dept.
Software dept.
Network Technology dept.

My Responsible Work
User Flow
Wireframe
Visual Design

bottom of page