Hahow 新春專案「蛙樂發紅包」，介面設計流程分享

Hahow 在2020 年推出新春活動－蛙樂發紅包，不同於以往的活動以靜態頁面呈現，這一次藉由更多互動機制、設計獎勵誘因，得到了超乎預期的好成績。

Hahow新春專案「蛙樂發紅包」，介面設計流程分享 跨領域學習技能 May12,2020 全文 Hahow在2020年1月做了新春活動「蛙樂發紅包」，不同於以往的活動大多是靜態頁面，這一次藉由更多互動機制、設計獎勵誘因，得到了超乎預期的好成績。

這篇文章想以介面設計的角度，分享在新春專案「蛙樂發紅包」我們做了哪些事情、背後的緣由以及設計師間的協作，作為下一次優化的養分。

HahowPoint（HP）為Hahow好學校募資線上課程平台所推出的點數機制，只要在Hahow站內完成指定任務，就可以累積HahowPoint，並在購買課程時折抵相對應的金額。

蛙樂發紅包活動機制皆圍繞在HahowPoint，發送HahowPoint以及提高HahowPoint折抵課程上限，期望達成兩個目的： 鼓勵每日回站 增加購買誘因 鼓勵使用者每日回站 我們設計了「蛙樂發糖－每日簽到」以及「蛙樂發福－轉盤遊戲」來發送大量HahowPoint，鼓勵使用者每日回站。

一、蛙樂發糖 蛙樂發糖分為兩個部分，一是每日簽到、二是新用戶領取註冊禮。

每日簽到獎勵會逐日增加，若使用者能維持每日簽到則最高能領取約台幣675元的HP，錯過一天則少了一天的加成，以此作為鼓勵回站的動力。

而新用戶領取註冊禮因為限定了未註冊的使用者才能領取，對於舊會員來說沒有吸引力，因此將此區塊視覺弱化，整體還是以每日簽到作為視覺重心。

兩個部分若只是齊平的設計覺得過於制式，希望能夠有活潑一些的排版，因此設計兩個區塊一前一後、一上一下做出層次，再以小元素以及長輩吉祥話點綴作為背景。

二、蛙樂發福 每天可以玩兩次轉盤遊戲，最大獎為免費課程，其他獎項則是數量不等的HahowPoint。

點擊「開始發福」按鈕轉盤開始轉動，待動畫結束後跳出Popup告知使用者實際抽中的獎項。

去年年底Hahow在歲末活動時寫了不少活動用版型與遊戲機制，其中就包含了轉盤遊戲，在機制不變的前提下我們將轉盤變成過年圍爐的圓桌，獎品變成一道道過年時桌上的佳餚，背景放上吉祥物增添熱鬧的氣氛。

如何增加使用者購買誘因？ 活動期間我們將HahowPoint最高折抵上限提高作為主要增加購買誘因機制。

而最大的難題在於虛擬的HP點數難以像現金一樣直覺，因此我們做了以下設計讓使用者有感進而提升購買慾望。

一、即時給予回饋的Header活動頁面置頂的Header強化了折扣提醒幫助使用者回想未用完的HP點數，當使用者在蛙樂發糖、蛙樂發福中得到HP時，也會即時回饋在Header上並轉換成現金。

二、推薦課程列表 在活動頁面底下會有依照使用者興趣所推薦的課程列表。

若只是單純在課程卡片旁邊放一段文字表示折扣後金額擔心文字與卡片兩者難以連結在一起，因此放上了扮演成會計師的吉祥物以對話框提示使用者折抵後的金額，建立起合理的脈絡並用吉祥物提升親和力降低銷售感。

三、課程頁面 課程頁面是我們主要銷售並展示課程內容的場域。

活動期間課程價格右方放上會左右晃動的金元寶來吸引使用者注意，Hover後跳出小視窗呈現活動資訊與可折抵金額上限，即使使用者從本站進入也能得到活動資訊。

節慶感 不知道大家看圖有沒有發現到處都是說著吉祥話的吉祥物？為了符合春節節慶感，除了大面積鮮豔的色塊與春節相關的視覺元素以外，我們在許多區塊都放了吉祥物說著長輩的吉祥話希望能引起使用者們的共鳴增添趣味。

設計師之間的流暢協作 除了設計本身，這次能夠在一週左右的時間完成設計準時上線，設計師間順暢的流程與緊密的溝通也是非常重要的。

蛙樂發紅包有兩位設計師參與，一位介面設計以及一位視覺設計，合作流程如下圖。

視覺設計師依活動需求繪製活動主視覺定下規範，而後UIUX規劃網頁，同時視覺設計其他行銷刊物，待網站規劃完成會再將部分純靜態圖片外包請視覺設計協助。

由於分工明確兩方能獨立進行，製作時並沒有遇到太多的問題，剩下的就是設計師間彼此對視覺的默契，在主視覺的規範底下畫出一致的設計。

總結 綜合以上，我們以發送大量HahowPoint鼓勵使用者每日回站，以及提高HP折抵課程上限的機制增強購買課程動力，最後成果超過預期，帶來了較去年新春活動2倍的流量，轉換率也有非常亮眼的表現。

Hahow設計團隊將不定期分享更多設計想法與幕後花絮，想知道Hahow的設計師們都是如何規劃、設計各個有趣的專案嗎？歡迎在Behabce追蹤我們：HahowBehance官方帳號 -- 延伸閱讀： 今天就是那一天－那些紙張與墨水間的小故事 漫畫家Gene——在我的畫筆下，低調致敬每個無名防疫英雄 分享這篇文章 FACEBOOK TWITTER GOOGLE 相關文章 PREVIOUS 思想翻轉跨領域學習 May12,2020 今天就是那一天－​​​​​​​那些紙張與墨水間的小故事 NEXT 人物專訪老師專訪 May12,2020 教養專家羅寶鴻：教養金三角，不只安頓孩子，也安定自己 留言 追蹤Hahow Hahow好學校最新、最酷的線上課程平台 LINE官方帳號接收Hahow第一手優惠、活動資訊 Facebook新課募資、課程開課消息都在這 Instagram看更多Hahow幕後祕辛 Youtube最新的課程介紹影片！ 近期文章 改善經期不順、痛經等生理不適的暖宮開髖練習-凱蒂與穎盈的中醫瑜珈 如何開始戳繡？工具、布料、毛線選擇小分享｜【写生繡物】PunchNeedleEmbroidery 三個爬山必備APP推薦：備好離線地圖、預測天氣、自動生成行程影片 【2021多元領導大調查】超過九成女性期待具備領導力，卻遭「冒牌者情節」阻礙？ 用心智圖整理：主持聲音社交平台Clubhouse房間的兩大關鍵 Hahow熱門推薦課程 關於Hahow好學校 Hahow好學校，以知識技能分享為概念創立的線上課程平台。

讓擁有一技之長的人透過教學分享賺取收入，並打開有趣的學習新想像，讓跨領域自學變得更輕鬆愉快，學那些學校不會教的事！ TagCloud carouselHahowCocktailHahow內容煉金Hahow故事Hahow新功能Hahow社群故事HOW-TO-DO專欄人物專訪創業好書推薦思想翻轉技能教育現場旅行海外特派員生活專題線上學習老師專訪職涯自學親子教育跨領域學習開課教學 版權聲明 本網站內容未經許可請勿任意轉載，欲引用或轉載網站內容，請洽Hahow好學校：[email protected]