NCTA 10G Experience

NCTA ,the Internet & Television Association is the U.S. cable/broadband industry’s main trade group. It represents major cable ISPs, TV networks, and vendors; advocates on policy; and promotes industry technology roadmaps and initiatives at international events, as well being notable contributors to internet standards and  security quorums. Leadership, accessibility and cutting edge communications technology are strong brand attributes of NCTA and each project we carried out for them had to accurately portray these ideas. A particularly good example is the 10G platform, a the showcase for 10G internet: the cable industry’s next-gen platform which delivers 10-gigabit speeds at ultra low latency, high reliability, and high security.

Our solution

The 10G microsite was built with React/TypeScript, in order to stay lean and responsive, but features headless backing as well as animations and multimedia applications.

One of the challenges when creating visually rich animation on the web is properly translating the animator’s vision to a well optimized web ready format, while also maintaining good integration and compatibility with web native UI/UX. Animations and rich multimedia can sometimes be seen as afterthoughts during design and development: if not well specced, developers tend to resort to standard/vanilla defaults from generic animation libraries;  animations are inserted awkwardly as “iframe” like blocks in the otherwise active web page. Either way, these approaches tend to be unsatisfying for the client, time consuming to develop and often tank browser performance. To tackle this issue in 10G, we worked closely with animators and their native tools, such as Adobe After Effects and Blender. Both platforms now support a relatively new and powerful export pipeline to create Lottie formatted files. Lotties contain all the rich visualization from the native animation authoring platforms, but vectorized in a format that is readily controllable by native web tools. Combined with the powerful low level GSAP motion library, we were able to faithfully and and rapidly create intricate, interactive animations, send them through the client approval and feedback cycle and them transpose these at high fidelity to the browser.  And all this while maintaining excellent performance in-browser.

Creative mini-apps

The site is structured as a set of modular mini-applications, each highlighting different aspects of the platform. We already mentioned our general  approach to custom animation integration, but a particularly interesting example was when when we were called to implement a fully interactive 3D virtual house tour to demonstrate practical applications of the client’s technology within a household context.

We worked alongside a specialist in  3D modelling, which designed schematics in Blender. Next, the designers applied the client branding and visual look and feel, skinning the 3D model. Finally the model was exported and then re-imported as a vector set, ready for deep embedding in the microsite.

Controls and user interaction move fluidly between the integrated model and external web components;  tracking is richly applied to each area the user interacts with and best of all, the model is easily updatable with additional rooms and features ad-hoc.

SEO and client admin

To keep our JavaScript SPA SEO friendly, we implemented server-side rendering via custom PhantomJS solution to improve load performance.

Meanwhile, A WordPress CMS backend was implemented to manage client editable portions of the site, exposing content via REST APIs for straightforward content authoring and administration.