--- title: "以 Mediums 重塑创意产业" description: "OOZOU 如何为 Mediums 设计并开发 iOS 与 Android 美术用品购物应用：从 200 多个页面的 MVP 设计，到以 Swift 与 Kotlin 打造的原生应用与 NodeJS proxy 后端。" canonical: https://oozou.com/zh-Hans/case-studies/mediums-art-supply-app locale: zh-Hans 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-Hans/contact More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"