4週達成!商品結帳APP設計開發,直上市集實用!

Kyle Lei
8 min readDec 19, 2023

--

4 weeks to swift completion! Design and development of a merchandise checkout app, practical use in the marketplace!

oSold是一款協助夢行者,將夢想轉換成具體形狀的商品銷售APP。目標族群為獨立或小規模的線下商品販售者,協助其在販售商品時能快速結算款項。oSold APP從確認需求,介面設計與軟體開發,到直接應用於創意市集只花了四個禮拜。

如何達到如此高效的敏捷開發呢?

除了具備UI 設計程式開發能力外,更重要的是掌握一個思維―設計思考 (Design Thinking),那何謂設計思考呢?

設計思考 Design Thinking

© Interaction Design Foundation, CC BY-SA 3.0

設計思考是一種以使用者為中心的解決問題方法,強調創新和創造性解決方案。過程是非線性、反覆進行的,包括以下五個階段:

  1. 共感 (Empathize) : 理解並共感使用者的需求、期望和痛點。
  2. 定義 (Define) : 定義使用者需求與問題。
  3. 構思 (Ideate) : 提出各種可能的解決方案,創造想法。
  4. 原型 (Prototype) : 製作簡單的模型或原型,開始制定解決方案。
  5. 測試 (Test) : 測試解決方案,收集反饋,並根據反饋進行調整,進一步優化解決方案。

Table of contents

接下內容將透過4個禮拜的開發週期搭配5個設計思考階段,跟各位介紹為什麼想開發oSold?如何高效率執行設計開發?以及最後在創意市集實際使用的成果。

  • Week 1―Empathize & Define:設計背景與需求
  • Week 2―Ideate:互動架構與資料模型的定義
  • Week 3―Prototype:收銀與交易紀錄功能的開發
  • Week 4―Prototype:商品管理與設定功能的開發
  • D-Day — Test:2天共127次在創意市集的結帳實測

Week 1―設計背景與需求

Empathize

時間倒轉到11月10日,我的夥伴告知預計12月9日要參加創意市集販售商品,需要能協助快速結帳的工具,但苦惱找不到簡單易用又兼具質感的結帳 App。快速研究市面上的相關軟體後,發現確實比較少是針對線下市集的販售場域,且必須能滿足快速選擇商品、計算總額與找零金額。於是起心動念決定在接下的四個禮拜內完成設計開發,並能實際安裝在iPad上運作。

Define

接著發揮平日工作的設計專案管理技能,定義出核心需求以及評估時程,oSold在此四周必須能實現以下的基本功能:

  1. 結帳功能:快速選擇商品、即時統計總額
  2. 交易紀錄:需能本地持久儲存,如可雲端同步更佳
  3. 商品管理:需能滿足CRUD的資料基本操作,包含建立 (Create)、讀取 (Read)、更新 (Update)與刪除 (Delete)

接著啟動iOS的開發環境Xcode。初始時,建立範例資料作為預覽範例,使用SwiftUI開發可以透過Xcode previews,以所見即所得的互動反饋來探索並釐清結帳的互動行為。

Xcode previews

事實上,透過Xcode previews創造簡易的working prototype,可以讓設計師體驗實際的互動操作,模擬互操作情境,感受需求並進一步定義需求,是共感→定義的流程之體現、抽象的資料結構之實體化,有助於梳理下一步的資料模型定義。

為了保護夥伴當事人的隱私,本文範例使用星巴克官網上的商品資訊示意,且無任何商業行為。

Week 2―互動架構與資料模型的定義

Ideate

資料模型最基本的構成包含實體的屬性(Property)、類型(Type)以及與其它實體之間的關係(Relationships),透過心智圖的方式將抽象的資料實體視覺化,能幫助開發者不會迷失在抽象的資料結構中。

Attribute and relationships of the data model - oSold

有了以上的資料藍圖後,開始著手設置Core Data(iOS 應用程式的數據處理框架),建立App的資料永久儲存功能。完成這一步驟後,APP才是真的擁有資料儲存、修改與刪除的能力。

Week 3―收銀與交易紀錄功能的開發

Prototype―收銀功能

收銀功能依照結帳程序,分成商品選擇、結帳和收款找款3個模組。

商品選擇:需要讓結帳者能快速辨識商品

  • 商品可以依類別分類並切換顯示
  • 單項商品的顯示資訊需包含明顯的圖片、名稱與單價
Till - goods menu

結帳:商品選擇的反饋要明顯

  • 商品選擇的觸控範圍要大,方便結帳者快速點選
  • 考慮螢幕與結帳者操作的距離,商品選擇時的視覺反饋要明顯,更可評估加入觸覺與聽覺的反饋
  • 即時統計並顯示所選擇的商品、商品數量與總金額
  • 結帳按鈕要突顯,方便結帳者快速完成結帳
Till - goods selected

收款找款:結算計算機,方便結帳者收款與找款

  • 結帳後顯示應收款項與應找款金額
  • 實際收取的款項可透過數字鍵盤修改
  • 自動換算找款金額
Cashier calculator

Prototype―交易紀錄

方便販售者確認商品的銷售細項清單、總量與總額之統計

Records

Week 4 — 商品管理與設定功能的開發

Prototype―商品管理

商品清單:商品依照類別分類,一目瞭然

Management - list

商品表單:商品資訊的新增與編輯

Management - form

D-Day — 2天共127次在創意市集的結帳實測

Test & Feedback

收銀功能

  • 最頻繁使用的功能,一目了然的商品資訊除了方便結帳,亦可作為商品目錄確認售價
  • 商品類別離頂部安全區域太靠近,會不小心誤觸 > 將調整間距
  • 結算計算機確實提升結帳效率,但收到整數金額時還要手動修改 > 將增加預設整數金額,如1000, 500元

交易紀錄功能

  • 方便即時掌握商品銷售的整體資訊,並提供隔天備貨的參考依據

2-hour optimization

市集結束,立刻根據當天的使用心得,著手加入結算計算機的預設金額功能。預期情境譬如收到1000塊時,直接點選1000的按鈕,省去原先要先按刪除按鈕再輸入1000數字的步驟。

Cashier calculator - updated

加入預設金額後,結帳收款確實大幅提升效率,亦減低金額計算錯誤的風險。以下是收銀功能的實際操作展示,互動介面除了具備明顯的操作反饋外,亦搭配音效作為操作的確認反饋。

Conclusion

Design Thinking

設計思考(Design Thinking)是我在就讀工業設計時,所接觸的“以使用者為中心思考的設計實踐流程”。然設計思考亦是一種看待事物的態度與精神,並不專屬於設計師或只能應用在產品設計。

事實證明,應用在軟體設計開發同樣能以敏捷迭代的方式從0到1展開你的的產品想法。

建議無論是設計師或開發者,在思考一個新功能時,能具備同理心且換位思考,評估這個功能到底是目標使用者需要,還是開發者您自己想要。然目標使用者並非是隨找隨有,要能接近使用者角度的另一個方式,就是自己打造prototype。以實際使用者的角度實際測試、感受並體驗之。

oSold

oSold雖然是臨時起意的開發專案,然而透過運用本身已內化的設計思考,經歷4個禮拜緊湊的開發,到實際可應用到創意市集的販售結帳,對於其存在需求是有信心的。

目前仍處於開發階段,尚有許多待優化方向,如:

  • 結算計算機的實際款項的輸入可再優化
  • 支援不同幣別的售價
  • 販售紀錄的統計功能可更詳細

--

--

Kyle Lei

專精於 UX 設計與技術整合,領導團隊打造多款獲得國際設計獎的應用程式。創辦omemo 品牌,整合商業、設計與開發,獨立推出 oThings 和 oSold 等 App。