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.

本文系作者授權數英發表，內容為作者獨立觀點，不代表數英立場。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。