TOMATASK 待辦任務管理+番茄鐘 APP
UI/UX Design|2019|課堂作業|團隊製作
『 從根本解決注意力問題,以改善效率 』
TOMATASK APP 結合待辦任務管理及蕃茄鐘,幫助不善規劃、注意力不佳的人改善效率。探討問題核心並統一流程,同時改善計畫方法及訓練專注力。
▍個人獨立製作
概念企劃提案、任務管理頁面 GUI、用戶引導頁面 GUI、TabBar Icon
▍團隊共同製作
人物誌、功能規劃、APP Icon 與命名
▍團隊成員
喜多 くるみ(首頁番茄鐘 GUI)
大熊 琴音(資料統計頁面 GUI)
▍內容目錄
❶ 製作背景
❷ 調查與發想
❸ 設計成果:APP
❹ 回顧與檢討
※點擊可跳至該區域
TOMATASK APP 結合待辦任務管理及蕃茄鐘,幫助不善規劃、注意力不佳的人改善效率。探討問題核心並統一流程,同時改善計畫方法及訓練專注力。
▍個人獨立製作
概念企劃提案、任務管理頁面 GUI、用戶引導頁面 GUI、TabBar Icon
▍團隊共同製作
人物誌、功能規劃、APP Icon 與命名
▍團隊成員
喜多 くるみ(首頁番茄鐘 GUI)
大熊 琴音(資料統計頁面 GUI)
▍內容目錄
❶ 製作背景
❷ 調查與發想
❸ 設計成果:APP
❹ 回顧與檢討
※點擊可跳至該區域
調查與規劃
▍目標族群
注意力不佳、希望改善效率的人
特別是10 - 30歲,常因為智慧型手機分心的族群。
注意力不佳、希望改善效率的人
特別是10 - 30歲,常因為智慧型手機分心的族群。
▍問題分析、人物誌
於網路收集關於注意力不佳的相關資料及文章、以資料歸納加上朋友的形象來進行人物誌的設想。
於網路收集關於注意力不佳的相關資料及文章、以資料歸納加上朋友的形象來進行人物誌的設想。
▍設計目標、製作方針擬定
從問題根源探討,並加上一貫的解決流程。從規劃方法開始改善,加上番茄鐘的集中力訓練,一次解決兩個核心問題,朝提高做事效率的目標前進。
▍介面規劃與發想
❶ 「邊計時邊查看待辦事項」是一開始就想加入番茄鐘內的重要要素,從多個 APP 中尋找靈感,最後製作成往上拖曳的卡片形式。
❷ 待辦管理中原先另有規劃「行事曆」欄位,用來加入重要的活動。後期經討論認為過於龐大且偏離重點,於是決議將此功能取消。
❷ 待辦管理中原先另有規劃「行事曆」欄位,用來加入重要的活動。後期經討論認為過於龐大且偏離重點,於是決議將此功能取消。
▍設計規劃
【色彩選擇】代表年輕族群元氣、有精神的蕃茄橘紅
為維持畫面統一,以變化彩度製作輔助色,並使用於圖表或是小區域背景中。由於紅色易有煩躁感,其他部分由無彩色系組成。
為維持畫面統一,以變化彩度製作輔助色,並使用於圖表或是小區域背景中。由於紅色易有煩躁感,其他部分由無彩色系組成。
(左)APP Icon 與命名/(右)APP 字體規範
設計成果:APP
因篇幅關係僅列重點,完整流程與頁面展示可至 Behance 頁面 查看(將於新視窗開啟)
01. 明確的截止日與當日待辦一覽
任務頁面以「月曆」及「當日待辦」構成。月曆方便檢視近期計畫及截止日期;當日待辦區域則能往上拖曳查看所有內容,此時月曆會縮小至當週範圍。
02. 增設細項任務,釐清任務脈絡
詳細列出細項步驟,避免過於籠統讓計畫不易實行,也可以透過拖曳來調整待辦的優先順序。除了「待辦日期」外,也能設定「截止日期」,並顯示於月曆上方,隨時提醒。
03. 蕃茄鐘:使用中也可以査看任務列表
計時及休息中皆可拖曳下方卡片來查看本日待辦事項及其子任務,計時中也可以勾選完成的任務,系統會記錄每項子任務及整個待辦事項所花費的時間,以便日後規劃。並且提供暫停功能,以防臨時狀況讓記錄不精確。
04. 其他:資料統計頁面、用戶引導頁面
【資料統計頁面】除了統計每日專注時間外,登入會員後也有專屬排行榜,能與其他會員互相激勵。完成後則有反饋表示:「可以發展為社群形式,利用年輕族群的同儕互相影響達到更好的效果」若日後有機會,也能參考此建議的方向做改版。
【用戶引導頁面】首次進入時先簡述 APP 概要,接著分為兩頁來引導使用,並加入對應的按鈕達成 CTA。第一頁以圖片說明待辦事項調整方式,第二頁則介紹加入會員的優點(排行榜及備份)。引導結束或按下 Skip 時也會給予「需要時仍可重新觀看」之提示。
回顧與檢討
▍心得
以往在介面設計的專案中,以獨立作業居多,本次感受到團隊製作在提案及決策上更快速、有效率。有時不同的意見在討論後,最終反而能融合成更好的結果。另外,發想企劃時僅僅是與朋友聊天談到的煩惱,最後卻能製作成完整的專案,更體會到設計靈感往往是來自生活。
▍檢討與改進
1. 因為製作時間關係, 無法進行更深入的調查、訪談、競品分析...等,僅能以網路資料及使用幾個線上 APP 作為參考。
2. 團體作業進行前,未明確設立設計 Guideline,雖然沒有造成明顯視覺差異,但事後檢查有部分字體、按鈕寬度、顏色等大小略有細微差別。
▍Next Step
如果有下一步,還想做這些...
1. 與競品比較、找出 APP 可以發展的特色方向(如:遊戲化)
2. 考量用戶社群功能的可能性
3. 美化 APP 中的插畫
以往在介面設計的專案中,以獨立作業居多,本次感受到團隊製作在提案及決策上更快速、有效率。有時不同的意見在討論後,最終反而能融合成更好的結果。另外,發想企劃時僅僅是與朋友聊天談到的煩惱,最後卻能製作成完整的專案,更體會到設計靈感往往是來自生活。
▍檢討與改進
1. 因為製作時間關係, 無法進行更深入的調查、訪談、競品分析...等,僅能以網路資料及使用幾個線上 APP 作為參考。
2. 團體作業進行前,未明確設立設計 Guideline,雖然沒有造成明顯視覺差異,但事後檢查有部分字體、按鈕寬度、顏色等大小略有細微差別。
▍Next Step
如果有下一步,還想做這些...
1. 與競品比較、找出 APP 可以發展的特色方向(如:遊戲化)
2. 考量用戶社群功能的可能性
3. 美化 APP 中的插畫