MOOD App
Revamp

#visual#uiux#app

東森慕德科技股份有限公司

MOOD App Revamp

OVERVIEW AND SUCCESS

概述與成就

MOOD App 為東森慕德的主要產品,為使用者提供一個「隨寫、速查、易買、好逛的生活共享平台」,App 上線後因應商業模式的調整與使用者的回饋,加上 Figma 於七月新增設計系統功能,將 MOOD App 的 UI 重新設計整理並導入 Figma Variables 設計系統中,此外,首次嘗試為產品設計 IP 角色。在產品開發的階段,除了配合團隊原本的開發流程,將設計系統導入、產出流程優化,快速迭代中與組員協作推進產品,讓產品變得更好。

IDEATION AND DESIGN

構思與設計

因 MOOD App 主要使用者為 Z 世代的大學生,所以想營造年輕與活潑的氛圍,利用繽紛飽和的顏色與大量使用圓角等元素,定義出 UI 設計語彙與邏輯,包含新增暗黑模式、主視覺顏色調整、重畫 icon、字體、間距與圓角數值化,並首次導入 Figma Variables 設計系統中,大幅提升設計產出的一致性與效率。

App 上線後因應商業模式的調整與使用者的回饋,優先將重點的 UI 做重新設計與調整,後期陸續導入暗黑模式讓使用上更舒適。

首頁

將原本 Top app bar 與 Navigation bar UI 設計做一致性調整,主要增強功能與元件間的關聯性,內容 UI 則是調整細節,增加細緻度。

新增貼文頁

將使用者的回饋融入設計,除了調整編輯功能 UI 設計,加強編輯操作上的提示與引導,讓新增內容的流程更順暢。

Mood Points 頁

優化每日簽到卡與固定獎勵卡 UI。

新增 IP 角色 Moobie!

為了提升 MOOD App 整體產品形象與加強與使用者的連結,首次嘗試量身打造角色 IP,將圓潤與「MOOD」的元素融入其中,各種表情動作與人設安排,表達出產品親切與平易近人的價值。