top of page
bg pana.png
pana front.png

Panasonic New Smart App

PANASONIC SMART APP原是個五年前的應用程式，為因應遠端遙控的需求而產生的產品，

不符合現在智慧家庭的用乎需求，因此我們透過物聯網使用市場相關調查實際販售狀況，

重新設計適合台灣地區的Panasonic Smart App。

持續時間：

設計團隊/腳色：

2021年1月~2021年10月 (10個月)

一人 / UI UX設計

Panasonic在App開發屬於新部門，我是部門的第一位設計師，

嘗試在工程團隊導入設計流程，並與工程團隊彼此培養對於設計的重視。

​專案需求

基本需求是設計冰箱、冷氣、洗衣機、除濕機、智慧開關、

新風機等智慧家電的控制App延伸服務

​

成果

操作效率

+51%

使用者能更輕易

且有效率的執行家電操控

滿意度

+32%

UI介面改善、一致性提高
功能提升﹑架構改善
服務整合，增加整體家電使用體驗安心感

橫跨平台

3

iOS mobile
Android mobile & TV

實作頁面

200+

架構規劃
流程圖繪製
介面、互動設計

​設計流程

​由於App橫跨軟體、硬體，必須了解模組或Api側限制，因此在進行設計前必須先了解領域知識。

並且擁有設計資源不多，在時程進度下，需要找到最合適的研究方法進行後續設計。

設計流程2.png

Research
研究各家廠商對於智慧家電功能發展進行評估，藉由資料收集與訪談觀察與發現洞見，進行後續設計。

​競品分析

為了解主流智慧家電產品定位、特色功能，因此使用競品分析矩陣圖，了解各家廠商對應方式。

​並劃出產品定位圖，進而了解優缺點、自身該前進的方向。

競品矩陣.png

​競品功能矩陣圖

依照矩陣圖我們可以了解各廠牌對智慧家庭提供的功能訴求

  • ​家電控制-基本控制、資訊顯示，達到家電機遠端操作

  • 進階快捷控制與情境設定-透過快捷控制，達到群組設定或自動啟用/關閉情境。

  • 房間管理-透過房間分類快速找到使用裝置

  • 服務整合-提供售前商城、售後服務-維修、客服等方式，提升產品延伸價值

  • 三方平台整合-平台語音控制、跨品牌裝置整合

DATA.png

競品調查總結​

目前智慧家電App大多屬於工具類，強調居家遠端控制，重視操作易用性，

並發展許多進階設定功能，滿足如外出、回家、睡眠、氣氛等情境需求，

且藉由商城整合，提升產品商業性，以及功能診斷、售後維修服務等提升品牌價值。​

洞察機會

目前智慧家電仍著重於操控家電本身，而缺少了與使用者之間的互動回饋，創造與用戶的持續互動服務設計，應是一個機會點，藉由後續訪談深入探討。

二手資料分析

嘗試與其他部門共同合作-生活調查部門，取得物聯網與智慧家電調查資料分析，並藉由上架評論回饋，物聯網論文資料的進行資料分析。

智慧家電使用意識現況

圖表.png
圖表2.png

​現況下使用者對於智慧家電仍處於發展階段，大多仍只使用遠端控制，群組、情境控制使用較少，

​原因為較無完整的智慧家電成套系統，且認為設置麻煩，導致使用率下降。

​調查衝擊

大多數使用者都為初階使用者，約不到一成用戶為進階使用者，對於進階使用者來說，不會考慮不支援三方家電的產品，他們著重原生整合平台，並且是進行多裝置連動主要使用者，會購買大量智慧家電，如門鎖、攝影機、窗簾等，並自行設定自動化設備，但此些設備我方App並無法對應。​

new-google-home-app-interface-2.jpg

​重度使用者為了追求全自動化，會使用第三方平台操作

傾聽回饋

在舊版本中App商店評價、客戶服務部門收到了不少用戶反映，將此整理為可調整目標。

  • UI操作介面不直覺，層級過多，不易操作

  • 功能不完整，無法對應實體遙控器

  • 官網售後整合網頁層次複雜，查詢相關服務時無法找到想要的頁面​

  • ​家電連線時常錯誤，流程複雜

功能與定位調整

收集了上述資訊後，我們對App稍微有了輪廓及方向出來

  • 改善介面操作易用性，加強家電本身功能及實用性

  • 整合售前、售後服務體驗，不單一只是操作工具

  • App中本身不支援第三方家電，但支援Apple Home Kit & Google Home進行平台串聯

競品定位a.png

​如何讓我們的思考的方向，以全面化的方式去接觸整體使用旅程

User Journey Map

在實體經驗旅程中，用戶過程不僅僅是家電操作，還包括售前與售後服務保障，為此我們做了使用者旅程分析，讓整個用戶過程一覽可知，並著重於改善流程中受挫的點，將其作為產品的機會點，制定優先的功能改善順序。

Journey Map.png

​在旅程中的接觸點，有許多可以改善整合的機會

  • 新增家電改善

  • 操作架構優化

  • ​售後服務整合

User Interview

​針對使用者的日常家電使用狀況，以及居家環境狀況進行非正式半結構式用戶訪談，

對使用動機、使用決策進行追問，並進行洞見梳理。

​

“ 使用App是為了遠端操控，不用特別去找遙控器 ”

​“ 自動化控制聽起來很誘人，但缺少裝置且設定繁瑣不會想去使用 ”​​

“ 濕度和空氣品質最令人在意，希望能即時監控並調整環境 ”​​

“ 不完全了解環境數值如何對應，無法判斷是否該啟用家電做調整 ”

“ 有用電量資訊很好，但希望能有整體綜合使用比較方便比對 ”

“ 不會特別去完整看說明書，以實際使用為主 ”      *導致部分使用方式不正確，引發使用上效果不佳

Ideate

Feature1

建立簡單的連動控制，讓使用者能輕易學習接受使用

簡化情境功能，改為單一步驟的個別家電操控添加，使用直線式操作方式，改善複雜的操作流程。

Add OneClick-2.png

Feature2

環境資訊、電量資訊可視化，輕鬆了解及比較自家環境資訊

在資料收集中，發現了使用者希望能將資訊進行整合，讓養寵物、有小孩或照顧長輩的人能遠端進行家電操控，並從歷史環境資訊中，確保環境處於正常狀態，運作正常，進而產生安心感。

且另外設計了電量圖表家電分配圖，讓使用智慧家電的人，能了解用電資訊，進行節能掌控。

圖表資訊.png

Feature3

透過環境助理，分析環境報告、執行內容，與使用者建立積極的關係

在調查過程中，發現環境狀態是一個很大的切入點，而環境狀態影響的不僅只有執行家電層面，更多是我們人該採取的行動，例如: 沙塵量多時應關閉窗戶、浴室門未關易導致濕氣上升的因素。這些是我們須讓使用者進行學習，利用環境助手輔助，並搭配多重家電串聯，給予對應資料提示，培養彼此依靠的積極關係。

​此外，統計上僅有25%的人會觀看使用說明書，而有不少部分人並無法將家電發揮最大化的使用，藉此由助手一併提供這種家電小常識，培養更高的信賴度。

Personal-Official-1 – 3.png
Personal-Official-1 – 4.png

​環境助理提供建議、環境資訊及可能的影響給使用者

Feature4

​得知家電維修、狀態異常功能，提供解決方法，快速排除問題

多數人對於耗材更換時間、異常狀態排除上均有很大問題，

​藉由操控時間、次數，提供相關耗材維修，機能對應等通知，讓使用者對於整體使用體驗更為安心。

Group 24.png

除濕機​濾網清潔通知展示

Functional Map

​由於本次專案的規模偏大，當釐清定義完後，將所需的功能流程圖進行梳理及討論，

我們將主要開發功能分為 家電控制、圖表資訊、顧客服務、設定調整 及進行展開，

與工程人員討論後開始執行設計。

功能流程圖.png

Design

如何建立一個更好的設計體驗?

設計時，參考Jacob Nielson 提出的經驗法則，作為介面設計須遵循的方向

bx_bx-world-2.png

一致性和標準化

bx_bx-world.png

連結系統與真實世界

bx_bx-world-1.png

幫助和說明

為何需要一致性和標準化?

在此龐大的App中，需要降低不同頁面熟悉時間，透過一致性的圖案及標準化的結構建構使用習慣。

為何需要連結系統與真實世界?

使用者多數已熟悉實體功能操作，將App使用方式、與實體操作方式進行連結，並且打造擬實插畫風格，且統一真實家電使用介面，更能貼近使用者熟悉的習慣。

為何需要幫助和說明文件?

我們的App仍以提供工具操作為主，在初次使用部分功能時，應提供Onboarding相關介紹、操作簡介，功能詳述，改善工具型App過於複雜不知如何操作的問題。

設計決策

如何因應使用使用習慣及實際情況，建立最合適的主控頁面?

  • ​我們在主頁提供一鍵控制，房間設定、環境資訊與家電資訊顯示及操控，滿足使用者對於環境及快捷顯示的需求，不須再額外切換畫面，即可進行許多操控。

  • 考量到我們目前統計使用家電狀況，大部分使用者平均使用數量低於五個，若以房間方類去做列表顯示，可能會使資訊較為零瑣，因此提了兩種分類去做Prototype內部測試。

上下房間排列

Home-3 – 11.png

Tabs點擊切換頁面

Home-3 – 12.png

👆

抉擇:​ ​使用上下滑動提案

        受測者認為若家電數量不大，上下房間排列滑動分類方式是優於使用Tabs分類，

        考量目前使用現況，​當前版本採用上下房間排列，待生態系培養起來後進行後續迭代。

如何將資訊呈現與家電操控操作流程減少，並且提升功能使用率?

在進行舊版本App易用性測試測試時，發現操作上的困擾是層級分類繁雜，無法第一時間快速進行操作，功能擺放位置不統一，導致使用效率降低，因此重新規劃了頁面架構。

  • 將基本功能與操作資訊整理為同頁面

原先App將操作功能分為不同頁面進行切換，步驟較為繁雜，初次使用不易發現功能，

因而新版本設計為統整操作與顯示頁面，利用完形心理學又到使用者自行下滑找尋功能。

​部門而外高階機種，擁有進階設定共能，則放在右上方漢堡選項中，區分使用層級。

Frame 21.png

各家電化操控畫面示意

功能繁多，該如何引導使用者進行進行操作?

由於功能繁多，不適合用於App開始進入的Onboarding介紹全部功能操作​

  • 採用階段式的操作引導

當進入到初次選用的功能時，會進入教學步驟，藉由分次拆解，精簡操作並實作，

會比一次性的全部使用說明能夠讓使用者記憶。

addDevice_duhimidifier2.png

新增家電操作導引

Function-3 – 1.png

​初次使用，主頁功能操作介紹

  • 添加空集合、錯誤狀態顯示，增加操作引導性

     在提示文案上以更明確的操作指令，讓使用者能精準操控。

Refrigerator-outsideOnWineterAvailable.png

食材管理空狀態補充操作敘述

AddScene-情境列表-空狀態 – 1.png

情境自動化解釋功能用途及新增方式

  • 功能補充功能敘述

     在部分功能提供了功能敘述，讓使用者更加了解操作內容是否符合需求。

Refrigerator-特例-nhgs508—3門-微凍結.png

冰箱庫別說明

Dehumidifier-防黴抑菌.png

除濕機模式調整，快速理解家電使用

如何處理​新增家電選擇繁瑣、新增過程冗長且易失敗的問題?

原先舊版本選擇家電採用選擇機型名稱，會讓不知道型號的使用者感到困擾，

​且家電配對方式冗長，且配對若中斷有可能導致切換至無連線能力的WiFi，導致無法運行App。

  • ​圖示化的家電選擇

     在新增家電前，我們須選擇新增機種，改採圖片化選擇方式，能更快速有效的進行操作

  • ​實體操作引導動畫

     由於文字及圖片不容易仍不容易引導整個操作流程，故採取分段式動畫指引操作。

Group 13.png
animation_500_kv5rmn4t.gif

  • ​與工程師討論技術及可行性，改善操作流程

     改善原先冗長的配對過程，了解背後連線機制，利用自動配對方式減少新增步驟，

     且解決原先過程中途中斷時，連線到無網路狀態WiFi導致App無法使用的問題。

Group 23.png

如何克服無法找到服務及相關資訊?

官網分類為許多不同子公司事業部，資訊統整需加強、不易進行進行搜索。

  • 資訊索引統一

     將售後服務網頁進行整合，製作內建Web View減少彈出切換感，未來朝向全面手機原生畫面發展。

Group 12.png

將服務資源進行統整

部分頁面展示

image 52.png
image 53.png
image 54.png
bottom of page