01 · 背景
田田從來就不是單純銷售商店，而是健康飲食的推動者。品牌提供認證有機商品（Organic），讓消費者品嘗食物原始風味（Original），並期待消費者更開放（Open-minded）地接受新消費模式。我們用土地、環境、生產者、消費者的完美循環為設計理念，將圓、圈、循環的概念帶入整個介面設計。
透過行動優先的設計思考，用視覺吸引年輕族群，下修消費年齡層。我們在蔬果分類中加入「無毒栽種」、「有機轉型」、「有機栽種」等過濾器，讓消費者邊購物邊認識有機農業。
田田從來就不是單純銷售商店，而是健康飲食的推動者。品牌提供認證有機商品（Organic），讓消費者品嘗食物原始風味（Original），並期待消費者更開放（Open-minded）地接受新消費模式。我們用土地、環境、生產者、消費者的完美循環為設計理念，將圓、圈、循環的概念帶入整個介面設計。
透過行動優先的設計思考，用視覺吸引年輕族群，下修消費年齡層。我們在蔬果分類中加入「無毒栽種」、「有機轉型」、「有機栽種」等過濾器，讓消費者邊購物邊認識有機農業。
02 · 系統
新增「小農主打星」區域，讓消費者認識耕耘的農友，知道每一口蔬果來自誰的手。這不只是小農的曝光平台，更是消費者了解不同有機耕作法、農場故事的窗口。
消費者對手中收到的菜產生情感連結，購物變得有溫度。我們也處處留心細節，在蔬果分類中更進一步明確標註有機類別，讓初次接觸有機農業的人能邊購物邊學習。
03 · 體驗
在購物流程上，秉持著使用者友善體驗 (UX Friendly) 的精神，我們嘗試在E-Commerce的流程上最簡化，設計『一頁3步，完成訂購』的不換頁結帳設計。消費者登入後添加商品至購物車，就能夠在同一個畫面確認商品、確認地址、完成付款。
對於田田的老客戶，我們也特別設計了『快速購買』，讓消費者可以快速瀏覽本日可供購買的清單。由於有機蔬果的生長不定時也不定量，透過條列式一覽表讓已經習慣在田田購物的消費者可以更輕鬆完成他們的訂購流程。
04 · 成果
簡單－健康－生態－公平－關懷
這一次的開發以 Vue.js 來進行，是転転前端開發對新潮技術所做的嘗試，在專案的架構與開發流程上顯得更有條理，而 Vue.js 讓網站頁面切換無需重新載入，提供更加流暢的瀏覽體驗，並以 Nuxt.js 為底來處理 Server Side Render 來解決 SEO 的問題 。
希望透過這次的 Revamp，田田不僅是更體貼過去支持者的需求進行改善，也有機會觸及到年輕的世代。過去在傳統農業社會裡，人們因食物而聊天，在田裡交換經驗跟人生故事，『食物』不只是你吞進肚裡的東西，而是你的生活安排、價值選擇、人生態度。田田期盼能傳遞有機的飲食觀念：身和心是不可分割的整體，吃健康的食物、才會有健康的身體；支持在地農產，支持健康社會生態。