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
- 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.
The centrepiece of the website is the 'Global Transfer' page, an interactive 2D map displaying the countries where the app is supported.
Arguably the most complicated page on the site, its size is only 180 KB. This was achieved by:
- Utilizing gzip compression
- 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.
fill to highlight a selected country path. Panning and scaling is controlled by CSS
translateZ to invoke hardware-accelerated transitions and
will-change for ahead-of-time browser optimizations.
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.
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.