Tientien Organic 田田蔬果

田田蔬果 REVAMP↑

自從田田蔬果問世已經三個年頭過去了！田田一路走來秉持初衷，嚴選在地小農有機耕種的蔬果，以簡單便利的訂購方式將新鮮美味宅配到府，吸引不少忠實客戶持續支持。
這次田田的改版不僅從品牌識別上重新設計下手，在網站的規畫上也以行動裝置優先思考編排，並用了転転尚未嘗試過的新開發方式，讓網站更輕量、Loading 超快，更體貼客戶。

The Power Of “O”

為什麼要換Logo？田田從來就不是一家單純銷售的商店，打從一開始的目的就是要幫助大家可以吃得更健康。田田提供認證有機商品 (Organic)，讓消費者能品嘗食物最原始的風味 (Original)，也期待消費者能廣為接納 (Open-minded) 新的消費模式。田田希望能與消費者一起重新認定『食物價值』，以新型態便捷的消費方式、不僅擁有健康，也與環境友好。

因此田田以：土地、環境、生產者和消費者之間的完美循環為理念，只要每星期買一、二次有機食物，就會鼓勵更多農民投入有機生產、支持「在地生產、在地消費」，透過良好的交互作用、互相依存，構成更完善的系統，給我們及下一代更好的環境。

品牌・消費者・農友的串連

沿用這個新的識別系統，我們不僅將圓、圈、循環的概念帶入整個UI的設計中，更以數位裝置優先思考設計 (Mobile First) ，想要透過資訊快速的網路世代，藉由視覺吸引年輕族群、產生連結，下修消費者年齡層，傳遞健康飲食的觀念。我們也處處留心網站細節，像是更進一步在蔬果分類中做『無毒栽種』、『有機轉型』、『有機栽種』等過濾器，機會教育初次接觸有機農業的消費者外，同時更明確標註蔬菜的有機類別。

這一次我們新增一個區域：『小農主打星』，讓消費者可以認識這些默默努力耕耘的農友，知道他們每一口吃下的蔬果是由誰的手呵護長大。這不僅是一個小農可以曝光的平台，消費者可以更多了解不同的有機農業耕作法、農場、和蔬菜的背景故事，對手中收到的菜能產生情感連結，讓消費更有溫度。

操作更容易，結帳更簡單

在購物流程上，秉持著使用者友善體驗 (UX Friendly) 的精神，我們嘗試在E-Commerce的流程上最簡化，設計『一頁3步，完成訂購』的不換頁結帳設計。消費者登入後添加商品至購物車，就能夠在同一個畫面確認商品、確認地址、完成付款。

對於田田的老客戶，我們也特別設計了『快速購買』，讓消費者可以快速瀏覽本日可供購買的清單。由於有機蔬果的生長不定時也不定量，透過條列式一覽表讓已經習慣在田田購物的消費者可以更輕鬆完成他們的訂購流程。

簡單－健康－生態－公平－關懷

這一次的開發以 Vue.js 來進行，是転転前端開發對新潮技術所做的嘗試，在專案的架構與開發流程上顯得更有條理，而 Vue.js 讓網站頁面切換無需重新載入，提供更加流暢的瀏覽體驗，並以 Nuxt.js 為底來處理 Server Side Render 來解決 SEO 的問題 。

希望透過這次的 Revamp，田田不僅是更體貼過去支持者的需求進行改善，也有機會觸及到年輕的世代。過去在傳統農業社會裡，人們因食物而聊天，在田裡交換經驗跟人生故事，『食物』不只是你吞進肚裡的東西，而是你的生活安排、價值選擇、人生態度。田田期盼能傳遞有機的飲食觀念：身和心是不可分割的整體，吃健康的食物、才會有健康的身體；支持在地農產，支持健康社會生態。