← 返回所有作品 Case Study · 2025

I'M BAKERY

線上烘焙訂購平台 — Website + Mobile App,讓忙碌一族也能輕鬆預訂、外送或到店取貨。

時程2025
類型Website · Mobile App · F&B
工具Figma · Prototype
I'M BAKERY 應用程式畫面 mockup 集合
Highlights

為忙碌一族而生的線上烘焙平台。

I'M BAKERY 是一個專為忙碌一族設計的線上烘焙訂購平台。

有鑑於傳統麵包店主要以實體店面銷售,我希望能改變消費體驗,轉型至線上。這個平台提供一個流暢的線上預訂流程,讓您可以選擇到店取貨,或直接將新鮮烘焙品宅配到府

這種彈性不僅能節省您寶貴的時間,確保您不會錯過最愛的品項,也大幅提升了購買新鮮麵包的便利性。

Design Insights

設計洞察

作為 I'M BAKERY 的設計師,從概念發想到使用者驗證的整個流程,我的目標是解決傳統麵包店的痛點,讓更多用戶受惠並有店家擴大客戶群。

Major Iterations

主要設計迭代

根據使用者測試的回饋,我進行了三項關鍵的設計調整,目標是打造一款直覺、高效且令人愉悅的互動產品。

迭代 01

更清晰的選擇 · 簡化流程

版面簡潔流暢,清晰度與直覺性兼具,讓用戶能更直覺地使用與查看內容,整體體驗大幅提升。

迭代前畫面
Before
迭代後畫面
After
迭代 02

更清楚的訂單確認

我優化了付款完成頁面。原先僅顯示「訂單已確認」,迭代後加入訂單詳細內容,讓顧客能清楚檢視已付款的品項,提升資訊透明度。

訂單確認頁面迭代前
Before
訂單確認頁面迭代後
After
迭代 03

提升視覺辨識

使用者反映點選後不夠清晰,我將原本的外框顯示改為填滿呈現。清晰的視覺對比顯著提升了辨識度。

選取狀態的視覺辨識迭代前後對比
Quick Look

產品畫面快覽

客製化選項畫面
增加客製化選項,讓使用者享有更獨特的專屬體驗。
使用者評論畫面
使用者可以留下對店家的評論與建議,店家能更了解顧客需求,使用者也有被重視的參與感。
Wireframes & Prototypes

線框圖與原型

我將想法轉化為一個互動式低擬真數位原型,並讓五位潛在使用者進行測試,以驗證設計並收集回饋。

低保真原型
Low-fidelity prototype
I'M BAKERY 線框圖
Wireframe
Try it

來看看這個專案吧

點擊下方圖片,直接在 Figma 開啟 App 與 Website 兩種互動原型。

App
I'M BAKERY App prototype 預覽
Website
I'M BAKERY Website prototype 預覽