RT ELD Plus Apps Redesign
Apps | UI&Visual Redesign
專案期間
10個月 (自由接案)
我的角色
UI &Visual Designer
使用工具
Figma
Illustration
RT ELD Plus是符合ELD授權要求的驅動程序ELogbook App。一站式ELD解決方案和車隊管理系統，提供了更簡便的方法使司機管理在旅途中更加有效率。
00. 概述
問題 📍
依據已有的產品架構，改善多個視覺及介面問題，例如：圖標狀態不明確、顯示狀態、視覺文字層級不明確、太過隱晦. . . . . .等，導致使用者在使用時閱讀與操作上的困難，且缺乏一致性視覺風格，因此重新繪製介面，且依據使用者的使用情境另外增加深色模式。
解決方案 🔧
-
依據用戶使用習慣，設計符合在昏暗的車內能夠操作的「深色模式」。
-
重整視覺語言。
-
依據品牌形象規劃一致的介面及設計系統。
挑戰和限制 🚀
此專案為跨國產品，且已有原先架構，前期需要花費較多力氣去了解、研究使用者與產品。加上此專案為Redesign，一方面需要保持品牌原先的視覺、一方面需要改善視覺不一致之處，需要有設計的依循與基礎，因此在沒有設計系統及指南的情況下，也需要重新建立，因此此專案花費了不少努力在建構設計系統及指南。
01. 主要用戶
主要用戶
-
我們的核心用戶是貨車/卡車貨運員和駕駛員。
-
基於美國法規規定，駕駛員需要定時紀錄工時以及提交車輛檢查和狀況。
02. 洞察
在研究並使用前一版本的產品，我根據用戶特性發現幾個使用上的問題：
視覺不一致
-
UI介面風格較傳統，許多組件看起來已經不合時宜，無法讓用戶感到他是一個可信賴與時俱進的產品。
-
品牌的調性和內容的調性不匹配。
（品牌調性科技感可信賴 → UI調性較傳統）
未考慮多種使用場景
-
駕駛員在行駛、上班不只會使用手機紀錄、他們也會使用平板，架設在儀表板附近便於使用。
-
駕駛員也會在夜間開車、低光源的情況下使用原先的設計容易感到刺眼及疲憊。
上一個版本的螢幕截圖
這次重新設計的目標
提高閱讀舒適度
-
優化文字字距行距，提高閱讀舒適度。
-
優化複雜的狀態顯示列、圖標，提高使用的可辨識度。
-
優化警示、提示以達到警示作用。
-
仔細設計每個元素，並提供清晰、統一的形象。
提供多場景的介面情境
-
增加「深色模式」優化低光源使用情境。
-
增加「橫向模式」以符合用戶架設手機的多種情況。
03. 建構色彩
構建一個新的視覺指南
我根據 Logo識別符號 發展出三個 Primary Color，並以較高彩度取代低彩度的舊色調，提高產品的識別度和取代傳統的視覺氛圍、並定義出三個顏色所代表的品牌意義「科技化的、安全的、可信賴的」。
構建「深、淺色模式」對比的色彩系統
依據使用情境，我規劃出深色模式的介面，並建立對比色彩系統。
使用者介面元素
我設計了元件和使用者介面元素，以維護跨裝置的統一設計語言。 Rollingtrans是一個沒有in-house設計師的開發團隊，所以我設計出元件庫易於開發使用，以便團隊可以在專案完成後繼續使用元件。
03. MVP
電子日誌
RT ELD Plus電子日誌本APP可以自動記錄行駛時間，並允許駕駛員隨時查看和編輯其日誌。
方法
-
我透過深淺色的調配使圖表變得更加清楚。
-
我加入了項目「圖標」，以清楚地傳達每一個項目所表達的意義，減少用戶閱讀的時間。
-
加入駕駛「標籤」讓車輛駕駛狀態更加好辨識。
E DVIR儀表板
自動將DVIR檢查報告保存到雲存儲中。駕駛員可以有效地準備出行前的活動。車隊經理可以立即檢查車輛狀況報告。
方法
-
我透過標籤的方式來表示車況檢查的每個狀態，讓駕駛員更易於區別、意識到狀況不佳的項目。
Light Mode 淺色模式 🌝
Dark Mode 深色模式 🌚
06. 反思
如果有更多的時間我會 . . .
提前規劃組件
這是第一次接觸到APP的UI設計，此APP雖已有完整的頁面架構，但設計時沒有在一開始將組件規劃的非常全面，因此到設計中期組件與樣式累積越來越多，導致整理起來非常耗時。因此了解到在設計開始前盡可能將所有結構都做成組件會使後面的設計維護更加方便。但整理完成之後，也讓後續開發使用組件更加方便。
加入更多的用戶研究
由於時間限制，我不得不跳過很多用戶研究，根據假設或是與夥伴討論後就做出設計決定。
如果我有更多的時間，我會進行採訪和觀察，以深入瞭解潛在的動機和需求。
