ATVPlayer

Advertise on tvOS Player

ATVPlayer is a white-label product from Zensis Limited. It is the first video Ad supported tvOS player SDK and already implemented on ViuTV tvOS app, which is one of the major TV broadcasters in Hong Kong.

My job is to create sales and marketing driven portal site by outlining features and techniques behind, designing a simple identity and setting up basic SEO to get more exposure from search engines.

index_hero_mobile.png
Homepage graphic showing key features of the product

The project took me about two weeks to finish, and all materials are created in a rush but an acceptable quality. I created all graphics, branding assets on the App Store, as well as coded the whole site on my own.

There are few things I took careful consideration when making it:

The Product Name — ATVPlayer

You may curious about why it is called “ATV” and may think of a shutdown TV broadcasting company, but unfortunately, the name just came up by for temporary use without much deliberation. Anyway the product targets globally, my goal is to avoid the product look similar to the following:

ATV shut down in 2016

The identity had to be entirely different from ATV Channel. Therefore I used a grotesque but modern font as the logotype, with 3 colors overlaying each other to visualize its lively and possibilities. The primary purple-blue is also not commonly seen. It creates uniqueness throughout the site.

logo_light
ATVPlayer Identity

SEO

My second concern was setting up basic SEO. If you are an experienced marketing officer, my work is just the fundamental ones, but it was a good start to know and do it yourself.

Headings & Metadata

H1 to H6, everyone should be aware this! During our discussion, we always swap keywords between H1 and H2 (or meta title and description) and arguing which one deserve more importance. Back to basics, if we thought like target customers (managers), we search for keywords like “tvOS,” “Apple TV” or “Video Ad” than technical terms “VAST videos” or “SRT” (unless you want to promote your GitHub Project).

Call to Action

Next, we added CTAs towards “Contact Sales” on each page, which is very crucial to us for making money! Adding these buttons might be annoying, but we also provide different CTAs based on the context to let people find out more before buying.

I ♥️ SVG

I usually export PNGs for app projects. Therefore I always think my life is much easier and the interface looks nicer if images are all vectorized. Indeed a clean SVG can be a lot smaller than pixel images. I cannot think of any reasons not having SVG in the site.

screencapture-atvplayer-zensis-index-html-1497275179644.png
Homepage Screenshot

Afterword

The project is a rather small one compared to client projects. I developed the whole site in HTML and CSS on my own, with some help from a developer on JavaScript issues. Although the work may not show off my skills, design and thinking comprehensively, it was a good chance to develop skills other than design.

Client ATVPlayer – Zensis
Role Design Lead (Zensis): UX, UI, Front-end Development
Platform Responsive Web