--- title: "透過 Mediums 重塑創意產業" description: "OOZOU 如何為 Mediums 設計並開發 iOS 與 Android 美術用品購物應用程式：從超過 200 個畫面的 MVP 設計，到以 Swift 與 Kotlin 打造的原生應用程式與 NodeJS proxy 後端。" canonical: https://oozou.com/zh-Hant/case-studies/mediums-art-supply-app locale: zh-Hant date: 2022-10-07 client: Mediums industry: "Retail & E-Commerce" --- # 透過 Mediums 重塑創意產業 > Mediums 是全新的 24 小時創意地標，販售多元商品，滿足每個人的創意需求。我們為 Mediums 設計並開發了 iOS 與 Android 購物應用程式，涵蓋 UX、UI 與開發。 - Client: Mediums - Industry: Retail & E-Commerce - Services: UX/UI Design, Mobile Development - Published: 2022-10-07 ## Challenge 光是 MVP 版本的應用程式就有超過 200 個畫面，加上專案時程非常短，因此必須制定風險緩解方案、備援計畫與多個檢查點，才能在不犧牲品質與效能的前提下，納入所需功能並為選定的 MVP 功能交付價值。 ## Solution 我們從線框圖到完整的設計系統一手打造，並以 Swift 開發 iOS、以 Kotlin 開發 Android 的原生行動應用程式，搭配基於 NodeJS 的 API proxy 服務，串接 Microsoft Azure 與多個安全的內部系統。 ## 認識 Mediums Mediums 是全新的 24 小時創意地標，販售多元商品，滿足每個人的創意需求。Mediums 期望成為藝術家、創意工作者與所有愛作夢的人的首選去處。 品牌希望重新想像創意產業，以及美術用品與文具的生態，讓每個人都能輕鬆親近。 ![Mediums 的品牌與門市體驗](https://oozou.com/images/case-study/mediums-project-background.webp) ## 挑戰、問題與我們的解決方案 如同許多複雜的專案，Mediums 應用程式也有屬於自己的挑戰與障礙。 UX 與 UI 的工作量相當可觀，光是 MVP 版本的應用程式就有超過 200 個畫面。加上這是一個時程非常短的專案，因此必須制定風險緩解方案、備援計畫與多個檢查點，確保在不犧牲品質與效能的前提下，納入所需功能並為選定的 MVP 功能交付價值。 > 讓團隊彼此之間、以及與客戶之間保持緊密協作，是降低風險的關鍵。 由於 ADB2C 與 MSEL 的文件和程式碼範例不足，行動應用程式環境的建置出乎意料地困難。我們也每週與 Microsoft Azure 支援團隊召開電話會議來解決問題。雖然部分問題仍然存在，我們仍成功彌補並建立了有效的暫時性替代方案。 其他問題則源自客戶後端系統的整合介接點尚未完整開發與開放。不過，我們在既定的 UAT 期間持續推進，完成了客製化 proxy 服務並成功通過測試，將 UAT 推進到距離預定上線日僅剩數天之時。 ## 工作範疇與時程 Mediums 專案的目標是讓人們過上更永續的生活方式。這款精心打造的行動應用程式要讓藝術與設計盡可能開放，讓顧客直接透過行動裝置獲得最流暢無阻的體驗。Mediums 將運用這些線上服務，協助消費者把時間用在創作而非購物上。 Mediums 為初期產品規劃了幾個關鍵領域，作為概念驗證。 ## 設計系統 設計系統是唯一的真實來源，匯集了讓團隊得以設計、實現與開發產品的所有元素。因此設計系統不是單一交付物，而是一整套交付物。 ![Mediums 設計系統的元件與樣式](https://oozou.com/images/case-study/mediums-design-system.webp) ### 圖示設計 Mediums 的圖示設計簡約、現代且友善。每個圖示都被精簡到最基本的形態，展現其最核心的特徵。 ## 開發 在專案的 MVP 階段，我們以 Swift 開發 iOS、以 Kotlin 開發 Android 的原生行動應用程式，並整合基於 NodeJS 的後端 API proxy 服務，串接 Microsoft Azure 與多個安全的內部系統。 最初的討論是讓行動應用程式直接透過各系統的原生 API 與既有的後台系統互動。然而，在探索過程中我們很快發現，proxy 架構乾淨許多，並能增加一層抽象，讓授權、驗證與 session 管理在多樣的內外部系統之間更加一致。這也讓團隊在管理變更時擁有更大的彈性，因為大部分繁重的工作都移至 NodeJS 後端 proxy，無需重新建置與部署行動應用程式即可調整。 ## 線框圖 我們首先聚焦於線框圖。線框圖是由簡單線條與形狀構成的一張或一組圖表，呈現使用者介面的骨架，讓焦點集中在核心功能上。 ![Mediums 行動應用程式的低擬真線框圖](https://oozou.com/images/case-study/mediums-wireframes.webp) ## 全新的使用者體驗與介面 在指尖重新想像你的創造力。 我們的最終設計是 UX 與 UI 階段多次迭代的成果。我們藉由現有使用者的痛點，以及最初設定的目標與方向，達成了這個最終成果。 ### 搜尋與瀏覽 由於使用者有從新手到專家兩種不同的行為模式，我們的設計同時圍繞明確搜尋與分類瀏覽兩種方式。 搜尋能幫助已經有明確目標商品的使用者；分類瀏覽則協助還沒有明確想法的使用者，透過分類來認識商品。 ![Mediums 商店畫面，包含搜尋與分類瀏覽](https://oozou.com/images/case-study/mediums-search.webp) ### 優化商品詳情頁 商品頁面的內容對使用者是否購買具有關鍵影響。我們提供完整資訊但不讓使用者感到負擔，幫助他們更清楚了解商品是什麼、外觀如何、如何使用。 商品規格的選擇也無縫整合在商品詳情頁中。 ### 購物車與推薦 優化購物車推薦是交叉銷售的策略。在購物車頁面部署交叉銷售的成果就是更大的購物籃。此外，顧客可以直接在購物車加入商品，無需再進入商品頁面，將他們中途離開網站的風險降到最低。 ### 即時訂單追蹤 以精準的資訊，即時顯示訂單目前的狀態。 ![Mediums 即時訂單追蹤，從處理中到送達](https://oozou.com/images/case-study/mediums-order-tracking.webp) --- Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/zh-Hant/contact More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"