L'ÉCOLE 携手 Media.Monks 打造珠宝艺术与文化小程序

原创赞收藏评论

举报 2024-01-23

扫描,分享朋友圈

随着第三座永久中心在上海正式启幕，由梵克雅宝支持创立的 L'ÉCOLE 珠宝艺术中心携手 Media.Monks 摩课士打造官方微信小程序，带领用户探索珠宝艺术与文化世界。

With the opening of its third permanent school, located in Shanghai, L'ÉCOLE, school of jewelry arts supported by Van Cleef & Arpels, is expanding its reach with the inauguration of a new campus in the dynamic landscape. L'ÉCOLE has tasked Media.Monks with creating a WeChat Mini Program. This innovative initiative allows users to explore the full range of school offerings, significantly boosting awareness.

小程序首页

Mini Program Homepage

小程序主要页面设计

Mini Program Key Pages Design

通过对中国消费者进行媒体渠道使用习惯调查，并对 L'ÉCOLE 团队进行深度访谈，Media.Monks 摩课士的 UX 团队完善多个用户旅程图。例如，用户浏览并预定课程这一过程，我们将其分为多个步骤并进一步细化，同时我们充分考虑到用户的情感变化过程，从而优化用户体验。我们设计了多个与业务及用户需求相一致的用户流程，最终将微信小程序打造成集品牌枢纽、电商购买、线上课程等功能为一体的多功能中心。

Through digital channel analysis to understand local consumer habits, client executive interviews with the L'ÉCOLE team, Media.Monks’s UX Team collected extensive information about potential consumers and synthesized these insights into multiple user journey maps. For example, in the process of users navigating and reserving courses, we intricately dissected the entire journey into multiple steps, breaking them down into finely detailed sub-tasks. Moreover, we conducted a thorough analysis of the user’s emotional trajectory throughout these steps and tasks, pinpointing strategic opportunities to elevate their overall experience. Given the diverse range of functionalities, we design multiple user flows that align with both business and user needs, transforming the Mini Program into a multifunctional hub, combining brand centralization, e-commerce purchasing, and online virtual school functions.

用户流程图（课程预约与商品购买）

User Flow for Booking A Program and Purchasing A Product

在设计过程中，主要挑战来源于在单个页面上高效处理各种状态——这取决于用户旅程的进展。这种错综复杂的情境在课程预订和产品购买过程中尤为明显。我们考虑诸如预订或预购的可用性、等待时间、支付状态、物品的接收或兑换、退货或取消的流程和条件、退款状态，甚至是已取消物品的状态。这意味着我们面临大量页面的挑战，且每个页面都包含不同的子逻辑。为此，我们的设计和开发团队通力合作，紧密契合客户需求，积极提出解决方案。制作团队在向客户传递各种方法的优劣势时扮演了关键角色，确保高效沟通。最终，我们在尽可能少的UI页面中战略性地整合了这些复杂性，确保用户体验的流畅一致。

One major challenge was managing various statuses within a single page, depending on the user's journey progress. This intricate scenario was particularly pronounced during the processes of course booking and product purchases, where we navigated considerations such as the availability for pre-booking or pre-purchasing, waiting times, payment statuses, received or redeemed items, return or cancellation procedures and conditions, refund statuses, and even the statuses of canceled items.These considerations resulted in a multitude of templated pages, each harboring distinct sub-logic. Our design and development teams collaborated closely, aligning solutions with the client's requirements and proposing recommendations to address challenges. The production team played a vital role in communicating advantages and disadvantages to the client. Ultimately, we strategically integrated these complexities as features within a minimal number of UI pages, ensuring a seamless and consistent user experience.

购买的不同阶段及其对应的开发逻辑

Different Status of Purchasing and Corresponding Dev Logic

在视觉方面，Media.Monks 摩课士的 UI 团队在小程序页面准确地展示了 L'ÉCOLE 的艺术风格。在探索阶段，L'ÉCOLE 希望将其关键视觉的风格无缝延伸到首页，利用大量按钮进行快速导航。然而作为经验丰富的UI设计师，团队发现这种方法在可读性、有限的可点击空间以及未来更新等方面带来了挑战。同时，融入这种风格需要复杂的编码，这意味着开发及维护成本都将增加。最终，我们采用了“解剖”的方法，将关键视觉拆分为几何形状，运用六边形构建了一个可滚动的页面设计。60/120度角作为关键视觉的显著特征，被应用在卡片、标签及整个设计系统，确保了视觉的一致性，保持了整个小程序的美感与和谐。

Visually, the UI team at Media.Monks delivered a design system accurately mirroring L'ÉCOLE's luxurious and artistic style. During the exploration phase, L'ÉCOLE aspired to seamlessly extend the style of their key visual to the homepage, utilizing numerous clickable buttons for swift navigation. As seasoned UI designers, we discerned that this approach introduced challenges related to readability, limited clickable space, and posed hurdles for future updates. Furthermore, the integration of this style demanded intricate coding, contributing to elevated development and maintenance costs. In response, we adopted a “dissection” approach, breaking down the key visual into geometric shapes. Hexagons were employed, forming a scrollable page design. The 60/120-degree angle, a prominent feature in the key visual, was consistently applied to cards, labels, and the entire design system, ensuring visual coherence and maintaining aesthetic harmony throughout the Mini Program.

Media.Monks 摩课士不仅关注用户体验，同时注重 L'ÉCOLE 的内部团队体验，搭建了易于操作的内容管理系统（CMS），提高团队效率。

Media.Monks commitment extended beyond customer experience. The team prioritized the internal team's experience at L'ÉCOLE, implementing a Content Management System (CMS) as a user-friendly operational system, enhancing the team's efficiency.

L'ÉCOLE 微信小程序已于2023年9月成功上线。Media.Monks 摩课士非常高兴能成为这一激动人心的旅程的一部分，与 L'ÉCOLE 团队紧密合作，共同应对不断变化的局势。

The L'ÉCOLE WeChat Mini Program was successfully launched in September 2023. Media.Monks was thrilled to be part of this exciting journey, collaborating closely with the L'ÉCOLE team to navigate the ever-changing landscape.

更多数字服务及商务垂询

欢迎联络我们的发展.Monk

更多信息，请访问L'ÉCOLE微信小程序。

For more details, please visit the L'ÉCOLE Wechat Mini Program.

本文系作者授权数英发表，内容为作者独立观点，不代表数英立场。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。