MarSun DiDi

MarSun DiDi是一個錄製、播放影音訊息為主的 NFC 標籤應用工具,搭配NFC感應晶片「Chip Tag」使用,通過手機與Chip Tag的碰觸,立即感應讀寫設定,電子名片、影音回憶錄、智能便利貼…等多種使用場景。-擷取自App Store

MarsunDiDi 是一個錄製、播放影音訊息為主的
NFC 標籤應用工具。其一應用為,透過手機感應偶像的周邊商品、演唱會票卡,播放音樂曲目。

Backgound

本次以「感應,播放音樂」的功能為主,介紹 APP 開發過程

Project Background

MarSunDiDi 的功能一直在持續橫向、直向增長,從基礎的感應即播放;可讓使用者上傳影音、製作時光膠囊回憶錄;到感應播放串流音樂功能等。

本次需求為「感應播放串流音樂功能」。

Challenge ⚠

➡ 1. 開發排程緊湊,以記者會展示需求為優先,分成兩階段完備所有串流音樂的開發。



➡ 2. 受到眾多產品樣式、舊有功能影響,大家都有不同的功能應用藍圖想像,還沒有第一階段執行範圍的共識。


➡ 3. 非單點功能設計,需整合產品軟硬體體驗:
消費者接觸產品(包裝設計)> 感應後出現產品服務內容(Mobile 版)> 下載APP 體驗(APP 版)

Role

負責:
- 設計執行:UI / UX、初版動畫影音
- 前期規劃(User Story、透過投票收斂 User Story 、參考資料蒐集與分析、設計團隊內部討論、Wireframe 版本發展)
- 排程與分工
- 設計系統維護

Team Member

團隊成員:
Tylinne (PM)
Ivan (前端工程師)
Linda (前端工程師)
Celia (行銷企劃)
Leon (3D設計師)
FliexFan (2D動畫師)
柯瑜綉 (視覺設計師)
Biki (視覺設計師)
Doffy (UIUX 設計師)
Emily (UIUX 設計師)

Process

Storyboard

Final Design

Prototype

消費者直接用手機 NFC 感應產品(紀念票卡)後,出現歌單等介面。
(屬網頁 Mobile 版,在無需下載 APP 的情況下即可感應出此結果)

Component

僅先展示 Design System 中,設計師執行設計時使用的 Component - Vairaints。*文件持續更新中*

補充資料 1-上傳你的回憶影音「時光膠囊」操作引導影片

*此版操作引導影片、介面動畫由我負責執行。
影片來源:MarSun DiDi數位時尚生活應用 (YouTube)

補充資料 2-MarSun DiDi 實際產品應用

影片來源:MarSun DiDi數位時尚生活應用 (YouTube)

下個作品:【BuyTicket】網站註冊流程 UI/UX 與Design System 建立