iOS Business Cards App Design
MY ROLE
使用者研究
介面設計
流程設計
PROJECT
個人專案練習
TIMELINE
三週 (2023)
專案概要
過去經常觀察到身邊的人在整理名片遇到不便，從以前透過機器掃描到電腦上，到現在手機普遍後我在想是否能把名片結合數位化進行更多的運用。因此我決定設計一個 iOS 內建 App 讓使用者可以快速編輯、整理、分享名片，如此一來能提升使用者整理名片的效率，把時間留給自己，同時也能減少紙張的使用，為環保盡一份心力。
專案背景
問題
目前整理工具繁多，不論是實體的機器或是各式各樣的 app，缺乏一個能夠統一的平台供使用者分享、交流名片。若是以實體名片本、名片夾等收納查找相當不便，必須一張張翻找。App 雖然解決了實體的問題，但仍有幾項額外的隱憂。第一，有些 App 仍會有儲存名片數的數量限制，導致使用者的整理受到限制。第二，資料備份問題，有些 App 需要手動備份，一但使用者忘記備份或是手機被偷，原先的整理好的名片資料就付諸東流了。因此，我想說若有個統一 App，是否能解決使用者整理名片的困擾？能夠系統性的整理這些名片，是否可以促進更多交流？
User Research:
-
手機作業系統
目前兩大手機作業系統為 iOS 與 Android，iOS 僅提供 Apple 旗下產品使用，但 Android 系統的使用上相對廣泛，在 Samsung, Google, Huawei, Xiaomi 等皆使用 Android 系統。因此相對在設計方面，iOS 裝置類別較單一，不需根據不同品牌的手機進行響應式設計，若以 Android 為作業系統進行設計需針對不同裝置大小進行微調，相對整體花費時間會比 iOS 系統長很多。
根據 Statista 2023 年的調查指出，iOS 系統在年輕一代很受歡迎。於 1980-1994 年出生的大約有 35% 的使用率， Z 世代更是佔了 31%。這些區間的使用者介於約 23-43 歲，正值於職場打滾的年紀，也屬對新科技接受度較高的年紀族群。
-
Interview:
共 10 位受訪者參與，男女各五名，年齡介於 25-55 歲。訪問時間大約 15 分鐘。10 位受訪者皆使用 iOS 系統。受訪者們所在產業多元，有職場新鮮人亦有管理階層之受訪者。
我採取訪問而不是問卷的原因是我想要更深入了解使用者對於名片的想法以及對於新的 App 有什麼期待。訪問的問題皆遵照事先設計好的 interview guideline，再根據受訪者的回答進行進一步的提問。
以下是訪問問題範例：
-
請問你還記得你何時第一次拿到自己的名片嗎？還記得當時的心情如何嗎？
-
請問平時會整理名片嗎？ （如果回答是，詢問會怎麼整理收納呢？如果否，詢問未來不會再回頭看這些名片嗎？）
-
對於數位名片有什麼想法？
-
紙本名片與數位名片，你會比較喜歡哪種形式呢？
-
如果 iOS 提供內建 App 管理、分享名片，你有什麼看法？
-
你會希望 App 裡面有什麼功能？
根據受訪者的回答，我找到了兩個主要的問題：
-
紙本名片的收納整理花費很多時間，或是回頭要查看某張名片時很難第一時間找到，更無法將所有名片都帶在身上。
-
目前市售的實體名片整理機器、App 都是將「實體」的名片透過掃描的方式轉為數位名片，再依據各自的系統進行整理，換句話說，目前想透過數位管理名片仍須以「實體名片」作為媒介，而不是以數位的形式相互交流，在交流時亦沒有即時性，無法直接將自己的名片資料傳至對方的裝置。
針對訪問結果整理出以下幾個重點：
-
是否有整理名片需求與產業以及有關，不同產業的受訪者收到的名片量多寡有差距。
-
對於數位名片的使用意願大部分都是正面的，且期待的功能大多數皆提及「分類」。
-
對於年紀較輕的受訪者對於使用 App管理名片的意願較年紀長的受訪者高，但年紀較長的受訪者亦提及如果使用App 會希望能夠好上手，希望不需要花費過多的學習時間。
-
未使用完的名片、掃瞄完、過去收到不需要的名片丟棄會令部分訪問者感到不環保。
-
Persona:
根據受訪者的背景與回答，我整理出以下 persona :
目標
根據上述的資料與訪問，我制定以下兩個 app 設計方向：
App 的操作必須是方便易學的，減少使用者額外學習時間。
1
若用戶能夠互相即時傳送個人聯絡資訊，即不再需要以紙本名片作為媒介，即時傳送又能夠達成響應環保的目的。
2
構思
A. 資訊層級架構
▲ Cards app 資訊層級架構
B. Wireframe
設計
A. Design Kit
B. UI 設計
1. App icon & Widgets
App 圖像以名片樣式進行設計。
▲
會想設計 Widgets 是希望能快速分享名片，因此使用者能將此 Widgets 新增至主畫面，藉由點擊 Widgets 開啟 AirDrops 並到分享個人名片的頁面。顏色的部分 (e.g. 藍色) 會與 My Card 所選顏色相同。
▲
2. Library - All cards
APP開啟預設頁面
收到的名片都會顯示在 Library，依照接收時間排列（最上方為最新）。每張名片在此頁面僅顯示最重要的資訊：名稱、公司、職稱以維持排版整齊，其他資訊點擊卡片即可查看。
-
搜尋欄位：可輸入任何關鍵字，如姓、名、公司名稱等等。
-
新增卡片可點擊右上角的圓圈，可手動輸入資訊亦可以掃描方式減少輸入資訊的時間。
-
Select: 可選取名片進行分享、刪除或是加入 Label。
手動輸入新增名片
掃描名片：設計成與備忘錄掃描文件雷同，將名片對旗幟黃色方框內按下拍照鍵，系統會自動偵測文字，建立名片資訊。
使用者亦可從相簿圖庫（左下角）選擇欲掃描的照片。
▲
勾選想顯示的 Label，若開啟篩選條件，結果只會顯示同時完全符合的名片。如此圖，顯示的名片必須同時包含 Sales 和 Friends 的 Label。
▲
單張名片介面
-
名片上方會顯示已標記之標籤 (e.g. Banking)
-
所有名片資訊皆會顯示於此，社群符號會含有超連結，點擊後會直接連結至該社群頁面。
-
Notes：會分開顯示於名片下方，這是因為我打算分享名片時並不會同時分享 Notes ，保留使用者註記的隱私。
▲
3. Label List
使用者建立的 Label 會顯示在此頁面。一張名片可標記不只一張標籤，利於使用者做客製化的分類。
-
搜尋：一樣可以透過搜尋進行更快速的查找
-
新增 Label : 點擊右上角的加號
▲
新增 Label：選擇顏色、輸入Label 名稱
▲
選取名片後，可對其新增其他 Label，也可以移動該名片至其他 Label。
▲
Label 內介面，顯示所有含有此 Label (e.g. Sales) 的名片。在此介面亦可點選右上角直接新增名片於此 Label，也可以編輯、分享、刪除此 Label。
4. My Card
簡單俐落的介面，右上角設置分享鍵，讓使用者能夠快速傳送名片給其他使用者。點擊名片右下角即可編輯自己的資訊。
接收者畫面
▲
C. Prototype
cards
Add card manually
Scan Card
▲
新增掃描名片、查看名片資訊。
使用者可以 Label 進行篩選，搜尋想查找的
名片。
▲
Label List
▲
新增標籤、選取、移動名片。
Filter
Add new label
My Card
▲
編輯個人名片、分享名片
專案反思
這次專案讓自己更全面地走過設計一個 App 的過程，學會從統計資料、訪問中找到使用者的需求與設計方向，確實地從進行使用者研究到設計使用者介面，感受到從零開始設計流程要經常思考功能操作的流暢性及易用性。若有更多製作時間，我會希望 prototype 能再請訪問者做使用者測試，以確保成品更接近使用者需求，也希望能補上 Dark mode 讓 app 更符合 iOS 內建軟體的風格。