京東超市H5：618拒絕套路，一起來套圈
掃描二維碼，一起套圈開寶箱！
（數英網APP用戶需點擊放大二維碼，長按識別）
項目背景
618年中營銷狂歡到今年已經是第11個年頭，直播、IP打榜、小游戲等在內的泛娛樂化的場景給用戶提供了在大促期間更多的停留場所。無右團隊受京東超市的邀請，為不同品類的十幾個不同品牌通過“AR輕互動+社交裂變”的趣味玩法來提升頻道流量，促進商品交易。在經歷了“超市尋寶”、“遛狗大作戰”、“假面狂歡舞會”等...一系列頭腦風暴后，最后跟京東超市敲定了有趣又懷舊的套圈游戲——“京友請出圈”，少一些套路，多一些快樂。
用戶旅程體驗設計
發紅包、領京豆、送商品優惠券，簽到、做任務、邀請好友助力，這些“套路”背后潛藏的是羊毛黨、刷數據、領權益，內容和體驗是什么好像反而不重要了，當然我們認為這種“劣幣驅逐良幣”的現象不會長期存在，基本的權益和留存裂變設計本身沒有問題，問題在于你是否有好的用戶體驗和內容“真正”的用戶會為之買單。
01 用戶初步接觸-拉新
在此階段我們主要考慮有兩個問題，用戶為什么點進來并且為什么愿意留在這里，為此我們設計了三個點 1）AR交互 2）套圈小游戲比賽 3）權益。
首先感謝京東AR團隊為這次項目定制了又rocker，又很溜的手勢來開啟這次旅程，其實AR這塊我認為必是未來一種很棒的交互方式，看下社交巨頭Facebook在這上面的投入便知，相信之后還有更多除了手勢以外更有意思的玩法會融入營銷中。權益也不必多說，但我們設計的時候不會依靠它，這個階段暫時忘記它的存在是最好的（沒有利益還能吸引用戶的體驗才是好體驗）。
這次的互動體驗核心——套圈小游戲。國外有個非常好的概念“超休閑游戲”，簡單釋壓就是這種類型的代名詞：一切為了好玩，但也是一門學問。這四個步驟是一個循環的過程，當用戶越沉迷于這個循環，那說明你的游戲設計對用戶的吸引力越強。
開始我們的“上癮”之旅之前，我們需要先了解一下本次項目的定位，我們內部經歷了數輪的討論，整理分析了大量國內外小游戲案例，最終游戲的形式選擇了“套圈游戲”，從形式上調起Z時代受眾的好奇心和新鮮感，讓用戶的情緒心流從初見之時便被充分的調動起來。市面上大多數的小游戲品質和畫面效果比較粗糙，帶來的娛樂感也因此大打折扣。
02 用戶互動-留存促活
這里的設定很重要也很難，必須解決一個難題：通過怎么樣好的體驗設計讓用戶愿意每天都愿意進來，愿意去關注和瀏覽一些自己感興趣的商品 1）合理的積分、任務、抽獎系統 2）趣味動圖收集。
1）之所以叫系統，需要通過一個“數學模型”把寶箱、積分、游戲獎勵、權益獎勵、趣味鉤子、每日任務、排行等信息通過一個經過計算的詳細底層運行規則給核算出來，很多項目之所以體驗設計得不好，就是這塊沒做，或者沒有科學的做。這塊如果用戶體驗不好，就會讓用戶發出以下抱怨：不公平、不好玩、搞不懂、為什么這樣…
2）這次我們設定的一個重要鉤子是想通過一些Z時代用戶喜歡的搞笑“動效”來增加用戶粘性，這個收到了用戶的一直好評，很多朋友自發的去玩，就是因為很有趣、很可愛、想把他們集齊，不枉同事翻遍大小素材網站搜集而來。
03 用戶轉發-社交裂變
形成裂變根本動因不是在于權益、獎勵游戲次數等基本操作，而是要在前面的“細節”上下足功夫，用戶自己就能感受到，所以社交裂變只是做好了用戶體驗設計的一個結果。
項目制作
一、前言-內心戲
俗話說，提案一時爽，執行~~~，在我們項目創意階段，對于形式、玩法，大家的狀態是這樣的。
當最終聽說因為是年中大促，京東平臺要求，需要提前一周完成整個項目，交付給平臺內容進行審核知曉包含執行流程設計、視覺及程序制作一共只有25天時，執行同事心里想的順利上線概率是這樣的。
二、視覺
不僅是Z世代的喜歡高顏值，所有人都有對美的基本需求，大量的運營活動在這上面都不夠“用心”，好看的東西總是能讓人身心愉悅的。這次項目上精美度和氛圍上我們做了足夠的功課，結合母嬰、食品酒水、個護清潔三大場景，以及大促的氛圍，我們設計了以“夢幻”為主題的視覺主題。
感謝各位創作者貢獻的版權模型原素材。
三、技術
技術上分析了目前市面所有套圈類型的游戲體驗，最終選擇了3D引擎Three.js進行開發。
出于加載速度等方面的綜合考慮，我們選擇了cannon-es物理引擎來進行效果的模擬，物理模擬中一個很重要的概念是物體的包圍盒。在cannon-es中，包圍盒是由立方體、球體和圓柱體等基本幾何體組成。它的出現是為了簡化物體之間的碰撞檢測運算，如果物體的包圍盒精細到與模型一模一樣，那么隨著模型面的增多，碰撞檢測計算會變得極為復雜，相應的也可能會造成程序的卡頓。反之，包圍盒如果設置不當，也會造成很多看似古怪的bug，比如游戲中常見的“穿?！?。
項目中我們處理的手法是—在3D軟件中建好模型，再通過程序轉化為物體的包圍盒，這樣做的好處是方便后續對其進行調整。
關于視覺和技術的融合，我們的想法是——盡可能在網頁端還原3D軟件中的渲染效果。出于此目的，我們放棄了使用Threejs中的光照進行實時計算，轉而采用烘焙貼圖的方式對模型效果進行還原。簡單來說就是在C4D中調整好光照和模型材質，效果滿意后將模型上的效果烘焙到貼圖上，再由程序將貼圖應用到模型上即可。
項目總結
數據：此次活動用戶平均停留時長達為135.3s，次日復訪率達到了0.43，參與UV34w，數據亮眼。
流程的保障：從方案到原型、規則、設計、開發、測試直至交付，保證創意的順利落地，其中項目管理是重中之重，就像電腦的CPU看不見，但很重要。
過程的取舍：創意是做加法的過程，執行是做減法的過程，后者往往更加痛苦，但也更需要智慧，需要守住內容呈現的底線，平衡交付與質量。
做事就要花心思：既要科學的花心思，讓項目好的呈現能夠有跡可循，有數據、有洞察、有邏輯、有思考。也需要在作品中添加感性的心思，用戶才能感受到作品的真誠。
出品｜無右互動
策劃｜歐陽、neeson
統籌｜哼哼、小蕓
3D設計 ｜Jackie-CB
平面設計｜輝哥
技術前端｜世杰、大志
技術后端｜老易
專業評分
專業評分已截止
評論
評論
推薦評論
全部評論（10條）