Highlights

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.

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.

The mobile layout for the interactive map supports multi-touch panning and pinching to navigate the map.

Supported 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.

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.