TienTien

Simplified identity and digital experience for an honest-to-goodness food delivery service.

2017
E-Commerce
https://tientien.tw/

Summary

TienTien Organic Food Delivery Service has been dedicated to the online organic food delivery field for three years. This time, along with the new brand identity, TienTien began to roll out its latest website designed with mobile-first thinking which is developed with Nuxt.js. Offering users a fast-loading experience, it is a relatively new lightweight framework which we had never tried before this project.

The Power of O's

The Chinese character "田" ('tien') represents the farmer's field; it's shape is made of four square plots of land. In the same vein, TienTien's mission rests on the four tenets of organic, original, open-mindedness, and online. The four O's form a more sustainable consumption cycle that values both individual and communal health. The O's became the foundation of TienTien's new identity system.

A Better Way to Taste Goodness

This time, we used Vue.js for front-end development. This is a relatively new framework we've never tried before, which provides a more flexible and modular solution on a structure and developing a flow. Vue.js also helps to achieve smooth page transition while browsing the website that gives a pleasant experience for users. Furthermore, we included Nuxt.js as a solution to SEO with server-side rendering.‍

From Brand to Customers to Farmers

Following the established visual system, we developed the UI system with the concept of "circle" also integrated mobile-first thinking into the UX design. To attract a younger generation having interests in organic products, we classified the vegetables into more specific categories to fit eCommerce shopping experienced customers to find their needs easily. There is also a new section introducing organic farmers and their products, where consumers can know how these key contributors practice natural-growing, the stories behind what they have purchased, hence engage them with the source of products.

We simplified checking out in between three steps without page changing. It is crucial in eCommerce website designing to avoid of complicated register and signing, which offers a pleasant experience to users.

Digital identity with a fresh new look

We are excited to introduce TienTien with a new appearance. The one thing that had never changed is the core value of its concept - support organic farming - not only enhances the nutrients of soil but also creates a positive consuming society. And we believe, we are what we eat.

TienTien
TienTien

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.