Ask HN: Review the landing page of my web TV app

Looked like one of those fake ad landing pages at first glance. I think the reason for this is that there is a lot of whitespace (maybe off-white would work better) and the header text isn't stylized.

Additionally the slogan "Watching Web Videos Is as Easy as Watching TV" seems too long, I had to read it before I really understood it...imagine that! It really is a simple sentence, but somehow the meaning was a little obfuscated by its layout and sizing. I think the main reason for this was that the text was too big...bigger than the "Topchan.tv" text at least.

The 3 steps could definitely pop a lot more. Adding background colors to those boxes should help with that. They have to look separated, not really mixed in with all the other text.

You could replace the text "Watching Web Videos Is as Easy as Watching TV" and "Let you watch web videos like regular TV" with just "Watch web videos like regular TV", much more concise.

The try it now button seems uninviting, probably because of the mechanical looking font.

You could probably reduce all 3 steps into 1 step of "Try it now!" and just have a button.

You could get rid of everything else and just have the text "Watch web videos like regular TV" (centered) and under it have a button that says "Try it now" and I think it would come across better. You should then also have a "Learn More" button where you can have more text. Text is distracting, your goal is to get them to click the button, make it a focus.

Just my 2cents

1) Compress all of that stuff into a dickbar at the top of the home page (not the landing page you've linked to...get rid of that altogether) along with a button that allows them to dismiss the explanatory/walkthrough text. E.g. a nice 100px high welcome bar that says who/what/why. Alternatively you could do a screen overlay. But get me right to the content.

2) Once I get to the page, the iconography isn't very intuitive. I have to hover over each icon to see what it does. You're making me figure out that there are channels and segments and clips. I assume that segments are made up of clips and are shown on channels? Or are clips made up of segments? Probably that one. But you see what I mean? Maybe put the hover text beneath each action icon.

3) Adopt a more common convention for your icon organization. You've got this 2x5 grid but...people's brains are used to media interaction icons being horizontally organized from left to right, from "previous" to "next", with play/pause at the center.

It feels like a spam page. Pages that look like this usually are littered with AdWords. In fact, after my one-second initial scan, I thought the category links were AdWords. Aside from that, here are my quick thoughts:

1) The banner / feature being incorporated takes away from the initial impact. Separate these out and place the feature image with the headline text. Here are some WooThemes that illustrate this:

http://demo.woothemes.com/?name=sealight http://demo.woothemes.com/?name=delegate http://demo.woothemes.com/?name=optimize

2) Spruce up the "Start watching on Topchan.tv..." section. The typography isn't too bad, but it's bland. Play around with backgrounds, borders, and images, to make it more visually appealing.

3) The logo is blurry and the Topchan.Tv text next to it doesn't really feel like a logo. Make your logo stand out a bit more. To do this, try making the text and image work together. Also, don't feel like the Topchan.Tv text part of the logo needs to be HTML text. It can, and probably should, be an image.

4) The category links don't stand out at all. The text could be bigger. I'd play around with styling that a little more as well. Mix bold with regular text. Use lines to separate them. Let them breath with some whitespace.

5) The "Try it Now" button: make it orange instead of blue and change the font. I'd make the bevel a little more subtle as well.

The logo - Carve a logo out of the banner and stick it in the top right. You're wasting a lot of screen space. Shrink the height to around 85px.

The Try It Now button → Use a more normal font and regular capitalization. Also, change the button text to “Start Watching! >” Increase the padding or shrink the font. Also, use a lighter gradient. Top part is whiter, bottom part is darker. Make a hover state for the Try It now button. You can just reverse the gradient.

Get rid of the header and entire paragraph underneath "Watch Web videos like regular TV." Put "Watch Web videos like regular TV." under or next to the logo as the tagline. The description isn't helpful and for a video product, you want to show not tell.

I'd make a series of screenshots and arrange the steps alongside vertically instead of horizontally. Make them animated and include big arrows and Labels. "Surf channels by clicking here" "Surf categories by clicking here."

The remote control -> Put small labels or mouseover css overlays for the buttons. People aren't going to wait for the alt text mouseover.

One of the strengths of web video is the ability to have more information about what's next. Put some information about what the next channel and previous channels are.

Also, think about prefetching the screenshot previews of the next few channels so they can load faster.

Interesting idea I guess, but the design looks horribly outdated... could really use a designer's touch.

"Watch web videos like TV" and "try it now" are the two things that people really need to see. Your "try it now" button should attract more attention.. you can try repositioning it, or increasing the size, or changing the color.

Add a header above the channels at the bottom saying "our channels" or something. I didn't realize what those links did until I clicked them.

Little bit boring to be honest. The green color used for the topchan.tv is pretty ugly.

I think you should really highlight the 3 steps, put boxes around them or something. Make them the centerpiece to your landing page.