https://tientien.tw/

Tientien Organic 田田蔬果

透过有机消费,重新认定食物价值
田田蔬果 REVAMP↑

自从田田蔬果问世已经三个年头过去了!田田一路走来秉持初衷,严选在地小农有机耕种的蔬果,以简单便利的订购方式将新鲜美味宅配到府,吸引不少忠实客户持续支持。
这次田田的改版不仅从品牌识别上重新设计下手,在网站的规画上也以行动装置优先思考编排,并用了転転尚未尝试过的新开发方式,让网站更轻量、Loading 超快,更体贴客户。

田田蔬果 REVAMP↑
The Power Of “O”

为什么要换Logo?田田从来就不是一家单纯销售的商店,打从一开始的目的就是要帮助大家可以吃得更健康。田田提供认证有机商品 (Organic),让消费者能品尝食物最原始的风味 (Original),也期待消费者能广为接纳 (Open-minded) 新的消费模式。田田希望能与消费者一起重新认定『食物价值』,以新型态便捷的消费方式、不仅拥有健康,也与环境友好。

The Power Of “O”

因此田田以:土地、环境、生产者和消费者之间的完美循环为理念,只要每星期买一、二次有机食物,就会鼓励更多农民投入有机生产、支持「在地生产、在地消费」,透过良好的交互作用、互相依存,构成更完善的系统,给我们及下一代更好的环境。

品牌・消费者・农友的串连

沿用这个新的识别系统,我们不仅将圆、圈、循环的概念带入整个UI的设计中,更以数位装置优先思考设计(Mobile First) ,想要透过资讯快速的网路世代,藉由视觉吸引年轻族群、产生连结,下修消费者年龄层,传递健康饮食的观念。我们也处处留心网站细节,像是更进一步在蔬果分类中做『无毒栽种』、『有机转型』、『有机栽种』等过滤器,机会教育初次接触有机农业的消费者外,同时更明确标注蔬菜的有机类别。

品牌・消费者・农友的串连

这一次我们新增一个区域:『小农主打星』,让消费者可以认识这些默默努力耕耘的农友,知道他们每一口吃下的蔬果是由谁的手呵护长大。这不仅是一个小农可以曝光的平台,消费者可以更多了解不同的有机农业耕作法、农场、和蔬菜的背景故事,对手中收到的菜能产生情感连结,让消费更有温度。

操作更容易,结帐更简单

在购物流程上,秉持着使用者友善体验 (UX Friendly) 的精神,我们尝试在E-Commerce的流程上最简化,设计『一页3步,完成订购』的不换页结帐设计。消费者登入后添加商品至购物车,就能够在同一个画面确认商品、确认地址、完成付款。

操作更容易,结帐更简单

对于田田的老客户,我们也特别设计了『快速购买』,让消费者可以快速浏览本日可供购买的清单。由于有机蔬果的生长不定时也不定量,透过条列式一览表让已经习惯在田田购物的消费者可以更轻松完成他们的订购流程。

简单-健康-生态-公平-关怀

这次开发是以Vue.js 来进行,是转转前端在这次开发时对新潮技术所做的尝试,对于专案的架构与开发流程上显得更有条理,而Vue.js 让网站页面切换无需重新载入,让浏览体验更加流畅,并以Nuxt.js 为底来处理Server Side Render 来解决SEO 的问题。

希望透过这次的 Revamp,田田不仅是更体贴过去支持者的需求进行改善,也有机会触及到年轻的世代。过去在传统农业社会里,人们因食物而聊天,在田里交换经验跟人生故事,『食物』不只是你吞进肚里的东西,而是你的生活安排、价值选择、人生态度。田田期盼能传递有机的饮食观念:身和心是不可分割的整体,吃健康的食物、才会有健康的身体;支持在地农产,支持健康社会生态。

Paving a lasting way with tech

客户
  • 田田蔬果
日期
  • May 2017
产业
  • 脚踏车
服务项目
  • Prestashop (E-Commerce CMS)