Logo: Pie

重新設計上下班打卡 App 的 UI

  • RoleOrganizer, UI Designer
  • LanguagesEnglish, 正體中文
  • Status
    • Deliverables are ReadyDocument
    • Deliverables are ReadyUI
    • Deliverables are ReadyPrototype
    • Deliverables are not ReadyFront-End Code
    • Deliverables are not ReadyLanding Page
Switch LanguageEnglish

概要

工作使用的應用程式,因為得經常反覆操作,而注重效率。比起現有的產品,重新設計過的上下班打卡 App 將主要操作流程進行簡化。

此閒暇專案現在暫時取名為「Pie」,由我 1 人進行 UI 構想,並且已準備好未來參與成員的新手上路文件。

問題

先前任職的公司正在使用一款結合上下班打卡、請假表單與薪資計算的產品。一旦有 1 件以上事情要做,就得要回到「主選單」,希望操作流程可以簡化。

進行打卡

  • Layout of Main Menu
    主選單
  • then
  • Layout of Clock-In and Forms Screens
    打卡畫面
  • then
  • Layout of Clock-In and Forms Screens
    完成打卡
  • done

進行打卡,接著查看請假表單

  • Layout of Main Menu
    主選單
  • then
  • Layout of Clock-In and Forms Screens
    打卡畫面
  • then
  • Layout of Clock-In and Forms Screens
    完成打卡
  • then
  • Layout of Main Menu
    主選單
  • then
  • Layout of Clock-In and Forms Screens
    請假表單畫面
  • then
  • Layout of Clock-In and Forms Screens
    確認請假表單
  • done

設計假設

是否可以簡化上下班打卡例行工作所需的步驟?

重新設計導覽模式

Tab Bar (Bottom Navigation) 滿足「現在在哪?」、「還可以去哪裡?」以及「到那邊會有什麼?」的導覽設計*,而主選單的設計只能回到上一頁。

Tab Bar主選單
現在在哪?donedone
還可以去哪裡?done主要事項回上一個畫面
到那邊會有什麼?done上一個畫面

以 Tab Bar 進行打卡

  • 打卡畫面
  • then
  • 完成打卡
  • done

以 Tab Bar 進行打卡,接著查看請假表單

  • 打卡畫面
  • then
  • 完成打卡
  • then
  • 表單畫面
  • then
  • 確認請假表單
  • done

仔細看

Tab Bar

Tab Bar 包含 4 項功能:上下班打卡、請假表單、假勤統計與薪資。

部份截圖

試玩

這份 Prototype 裡,請想像早上的時候,你/妳已經在公司的實體辦公室附近,準備好要打卡了。

文件記錄

這是持續進行中的閒暇專案。有關設計原則、使用者旅程⋯等,請看文件記錄


* 來源:Tab Bars are the new Hamburger Menus,作者:Fabian Sebastian。