ENG
UA

MENU

Milestones of the TET project:

4 different languages
in one admin panel for easy and fast content management
AJAX technology
No loading between important sections and pages
User-oriented tea collections

Objectives in TET case:

  1. Remain classic and traditional spirit of the brand, not shaping it into online store style

  2. Make a versatile multi-language website with a variety of product ranges

  3. Harmonically align contemporary effects, styles, and geometry with the candid brand book and brand image

  4. Simplify in-house team working processes with an assortment of each region

OLD and NEW TET Website

Shapeshifter letters with video

The First Screen of the Main page had to be “powerful” but not overloaded with effects.

On the main page, we added a mesmerizing and aesthetically satisfying effect - when a smooth shift of geometrically shaped brand letters accompanied by a light pleasant video.

Although the idea of object transformation is not unique, this was a sophisticated mathematical challenge due to the different amounts of angles in each object. The process of finding the solution is shown in the drafts.

Shapeshifter letters with video

Design Brainstorming

After analyzing competitors, our primary idea was to make colors of every series - tea collections - exclusive. But after a few rounds of communications with the TET team, we found out that each region would have different tea series and new ones might appear soon. A few early drafts and calculations are shown here
Design Brainstorming
Design Brainstorming
Design Brainstorming
Drag

Expressive Product card

Therefore, we brought identity to the Product card, putting there ingredients and a map with the places of origin

To make the Product page more representative, especially for potential dealers, we connected each packing option with a corresponding image

Expressive Product card

Responsive performance

Obviously, we ensure the correct representation of the content on mobile devices with common resolutions
Responsive performance
Responsive performance
Responsive performance
Responsive performance
Responsive performance
Responsive performance

Tips for navigation and loading

Consequently we have decided to unify the style of tea collections by bringing an interesting opening effect by loading current sorts within the main catalog page

Thanks to AJAX technology, we provided a unique URL for each opened collection on the catalog page

Moreover, the website was advanced with trouble-free and seamless inter-anchoring navigation

Conclusion on goals reached

The TET case is the perfect example of how precisely we transformed the customer’s vision of the website into a high-quality digital product accurately preserving the integrity of the primary idea
Conclusion on goals reached
Conclusion on goals reached
Drag

Such gentlemen and ladies mastered this project:

Project Manager
Communication and Control
Account Manager
Communication and Reporting
Senior Marketer
UX Prototyping
Marketers
Benchmarking and Prototyping
UI Web-Designer
Mockups and Design
Front-end Specialist
Implementation of a Design
Senior Programmer
Comprehensive Back-end and Mentoring
Programmers
Back-end Coding

Tools
Used

Marketing:
  • Сompetitors analysis
  • Unique responsive design
  • Figma
  • Basic On-page SEO
  • Multilingual with 4 languages
  • And a lot of cool and stylish animations
Development:
  • HTML5
  • CSS3
  • SASS
  • JS
  • Ajax
  • PhP7.3
  • MySQL
  • WordPress
  • ACF

Visit web-site

Thanks for being awesome!


One of our koalificated expert will get back in touch with you soon! Have a great day! 😉

    Subscribe Us

    Thanks for being awesome!


    One of our koalificated expert will get back in touch with you soon! Have a great day! 😉

    Thank you!
    One of our koalificated expert will get in touch with you shortly