TNG Website

Mobile app website with interactive 2D map and intelligent support knowledge base.

  • Responsibilities: Creative lead, frontend & backend development
  • Technologies: SVG, CSS3, Zend, Solr/Lucene
  • Timeframe: June 2015 – September 2017

Highlights

  • Multi-language, responsive, IE7-compatible website
  • Interactive 2D map using SVG and CSS3, with 180 KB total page size
  • Support knowledge base with Apache Solr/Lucene and JIRA integration

For this project I was responsible for project management, creative direction, and all frontend development.


The TNG Website is the accompanying website for the TNG Wallet mobile app. The website contains information such as app features, news, and a customer support knowledge base and ticket system. The website is fully responsive, supports three languages, and is compatible with IE7 and Android 4.2.

The website has a bright and cheerful colour palette of the brand blue mixed with yellows, purples, and whites, complimented by rounded corners and illustrated graphics. A combination of thick rounded and thin sans-serif typefaces adds a playful yet professional tone to the copywriting.

The front-page features a hero section that is regularly updated for major events. We primarily use SVG elements combined with CSS animations, transitions, and transformations to create eye-catching and light-weight designs.

For the licensing announcement we drew a guilloché pattern in Illustrator, exported it as an SVG, and animated each line with CSS and JavaScript.

Interactive map

The centrepiece of the website is the 'Global Transfer' page, an interactive 2D map displaying the countries where the app is supported.

The interactive map was built using a multi-layered SVG, JavaScript, and CSS transitions & transformations.

Arguably the most complicated page on the site, its size is only 180 KB. This was achieved by:

  1. Compiling JavaScript using the Closure Compiler in advanced mode
  2. Utilizing gzip compression
  3. Compressing SVG instruction data and writing it directly inline on the page, thereby reducing the number of HTTP requests and increasing gzip compression effectiveness

The page was built by drawing a path of the world map in Illustrator and dividing from it outlines for each country into separate layers. The leftover path is then reunited and transformed into a single compound path. The artboard is then exported as an SVG, separating the world map and the country path layers into separate groups. The instruction data for all layers is stored in a database which is rendered as SVG layers on the webpage.

CSS selectors and JavaScript event listeners were added to the country paths, with CSS declarations changing SVG attributes such as fill to highlight a selected country path. Panning and scaling is controlled by CSS translate and scale transformations, with the values being calculated by JavaScript. Smooth transitions are achieved by using translateZ to invoke hardware-accelerated transitions and will-change for ahead-of-time browser optimizations.

Screenshot of the Global Transfer page mobile layout with a country selected.
The mobile layout for the interactive map supports multi-touch panning and pinching to navigate the map.

Support website

A custom-built customer support knowledge base was developed using Zend, MySQL, and Apache Solr and Lucene. Customers can search for support articles in all languages supported on the website, view related articles, browse article categories, and submit support tickets.

When browsing any support page the colour palette changes to a vibrant green in order to invoke feelings of safety, security, and positivity.

Using Apache Solr and utilizing Apache Lucene's intelligent keyword and phrase-matching provides accurate and reliable search results for all languages used on the website.

Support ticket submission is integrated with the company's internal JIRA system. Submitting a ticket automatically creates a JIRA ticket with relevant information and sends the customer an email and in-app notification of their ticket reference number for future follow-up.

Screenshot of the support ticket submission mobile layout suggesting potentially helpful articles.
To reduce ticket submission and increase self-help rates, potentially helpful articles are suggested during support ticket creation both on the website and in the app.