大象传媒

芦 Previous | Main | Next 禄

A refresh of 大象传媒's TV channel homepages

Post categories:

Dave Killeen Dave Killeen | 14:15 UK time, Wednesday, 23 May 2012

Screenshots of 大象传媒 one homepage on three different devices

The same 大象传媒 One homepage on desktop, tablet, and mobile

Hello, my name is Dave Killeen and I am the Executive Product Manager for TV & iPlayer on PC and mobile web platforms.

Today sees the relaunch of three of the 大象传媒's channel homepages (大象传媒 One, 大象传媒 Two,听大象传媒 Four; 大象传媒 Three听relaunched last week) and in this post, I would like to give you an overview of what we set out to achieve and how we went about doing so.

How times have changed

When the team relaunched these channel homepages nearly four years ago, how people interacted with the web and what people expected of it was quite different. 大象传媒 iPlayer was less than a year old and accessing the web through a mobile device was also in its relative infancy; Apple's App Store was 4 months old and Google's Android platform was still in beta.

Four years on, 大象传媒 iPlayer continues to grow from strength to strength with approximately 2bn requests served to audiences last year and an average of听1 in 4 online users in the UK accessed it weekly last week. And mobile web usage in that time has seen equally spectacular growth with nearly 1 in 3 people who visited the 大象传媒 last week doing so on a mobile or tablet device- all 22m of them!

Screenshot of old 大象传媒 One homepage

The old 大象传媒 homepage had two promotional slots showcasing content on 大象传媒 iPlayer

How the purpose of channels homepages has changed

As you can see from the layout of the previous channel homepages above, they were built with the planning of 'offline' TV viewing being front and centre, with little real estate given to showcasing the breadth of channel content that you could consume right there and then.

Where the few opportunities did exist for our editorial colleagues in Vision to curate and promote, it was quite a manual task to do so and as you can see from the following heatmap, it was not the most efficient use of people's time.

Old 大象传媒 One homepage with overlayed percentages

Heatmap showing the percentage of people that clicked through the various links on the page

The opportunity

This refresh opportunity, therefore, was for a much-improved channels homepage presence that would allow each channel to stand its ground uniquely and showcase the breadth of content that it produces in a way which was simply more efficient and a great deal more engaging for audiences.

And with nearly 350 different mobile devices accessing the 大象传媒 website last week, the other opportunity (and challenge!) for the team was to build this in a way which worked just right across as many of these devices as possible - each with their own unique way of displaying content depending on screen size. Gone are the days of having to build a website for one screen!

The approach - serendipitous discovery

Showcasing the breadth of content unique to that channel in a way which would deliver simple and serendipitous discovery was a key editorial goal.

The team devised a logic to blend different automated feeds of content from 大象传媒 iPlayer (most popular, most shared by audiences, popular content that is about to fall outside the catch-up window (labelled 'Don't Miss')) along with links to live programming and a sprinkling of manually-curated items (labelled 'Featured') that together would achieve this goal of a serendipitous browsing experience.

That was the easy part!

The approach - responsive design

More challenging for the team was building this product so that it would work on the majority of smart mobile and tablet devices, regardless of screen size.

This project was the first here at the 大象传媒 that would be built responsively from mobile right up through to desktop. Whilst hugely exciting for the team, it also meant that we did not have other product teams in the business that we could lean on for advice and lessons that they would have learnt along the way. In fact we are still on a learning curve!

In the end, we settled on a range of breakpoints (layouts), that we felt would work for the majority of devices that access the 大象传媒 today and we developed it in a way that allows us to review (or respond!) as the mobile device market evolves with the arrival of new and promising handsets.

generic wireframes across four platforms

The settled upon breakpoints (for now!)

The result and our next steps

Last year, we set out three strategic goals for the TV and iPlayer product portfolio:

  1. Beyond Catch-up
  2. Beyond PC
  3. Beyond Tech-Savvy

We want to position TV and iPlayer as more than just catch-up, to make it available on as many devices as possible and for it to appeal to as wide an audience as possible.

With today's refresh, we have a stronger shout to live programming, to archive collections (大象传媒 Four) and to web exclusive content (大象传媒 Three). Mobile and tablet devices have been taken in to consideration and the user interface across these three platforms is one that is intuitive for mainstream users.

My Vision colleague Dan Taylor, from the editorial side of the business talks through the various features made available in more detail. We hope you agree with us both that these new channels homepages are a great step in the right direction and that they do a much better job of allowing a more varied breadth of channel specific content to bubble up to audiences.

Just as we have been able to extract a heatmap of usage of the old channels homepage design, we will be keeping a close eye on the usage data that flows through in the coming months and plan on making tweaks along the way based upon this and - of course - your feedback. Do let us know what you think!

Dave Killeen is the Executive Product Manager for TV & iPlayer on PC and mobile

Text amended in second paragraph at 0930 on Thursday 24th May, correcting a drafting change that听the host听did not apply correctly. Apologies to Dave.

Comments

  • Comment number 1.

    Congratulations on the launch. They look great!

  • Comment number 2.

    At last, a 大象传媒 redesign that doesn't look a complete mess. Now can you give the Sports guys some lessons in design.

  • Comment number 3.

    It's looks great. Also when are you planning on launching an iPlayer app for the Windows Phone?

  • Comment number 4.

    Looking good, though the way the mouse-over makes the embedded media 'go black' is a little off putting, especially for those of us who like to waft our mice around quit a bit.

    A more subtle overlay would be better.

    (one visual interface reason for this is that the bold images aid navigation, especially when scrolling. When the images disappear each time they pass under the mouse, the visual navigation clues disappear making it a little confusing. Only slightly, but still, I feel there is a better, more subtle way to this (even a delay would help, so that accidental mouse coverage doesn't so quickly make the image go black).

  • Comment number 5.

    Sorry - I miss the scrollable TV schedule at the top. At a stroke you have made the TV web pages practically useless to me.

    I really am not interested in your puffery about other programmes. What I need to know is what is on a particular TV channel now and later.

  • Comment number 6.

    If my current phone (HTC Desire from 2010) is double the size of the mobile bucket, and my next phone (HTC One X or Galaxy Nexus) just about fits the tablet bucket, could you have mis鈥恈alculated the experiences some people are going to have based purely on resolution rather than size & density?

    I need not point out your breakpoints have been heavily skewed by one platform鈥

  • Comment number 7.

    I think it's awesome!

    @Geoff Coupe: Have you seen www.bbc.co.uk/tv/guide?

  • Comment number 8.

    Thanks for the comments - do keep them coming!

    @Nick - there's a trade-off to be made between lengthening the delay and showing the programme information overlay. The design team have some ideas that we'd like to test in due course to optimise the look and feel, however.

    @Geoff / @JCS - yes, do check out the TV Guide (www.bbc.co.uk/tv/guide) that the team recently relaunched. It should hopefully serve you better than what you had before as it will give you a view across all 大象传媒 channels (and that of some other broadcasters). It's not fully responsive (yet!), but there is some good touch scrolling there on tablet that's worth a look.

    @John - as noted above, we're still on that learning curve wrt our responsive design efforts. Device density and how we work with this is an ongoing item of work. Nonetheless, we do hope that a good job is being done for the majority of mobile web users and that this is a step in the right direction.

    Thanks all,

    Dave
    Executive Product Manager for TV & iPlayer on PC and mobile web

  • Comment number 9.

    I think it's really really slick, I already watching a show that I wouldn't have known about unless it appeared in the new page. I also like that the pages for the four channels look + feel the same, I'm more likely to look for what's on those channels now.

    I only use my computer to go online, I don't have another device, so can't comment on that area.

    I noticed that what's on now appears in the middle of the page and there's what's on later at the bottom of the page, so that might help Geoff Coupe?

    Good job 大象传媒!

  • Comment number 10.

    Thats better, adding the iPlayer link to the complete schedule is a good idea, now the ability to transfer the downloaded programme to a usb memory stick for an non smart TV.

  • Comment number 11.

    Why has the scrollable schedule gone anyway? According to your heatmap numbers a full 30% of people that went to the page at all, used it.

    Surely that's a massive success?

  • Comment number 12.

    Lovely; slick interface, nicely balanced, good colour scheme - would fail GCSE ICT....why can't I zoom on my phone! basic feature for something with very small buttons, therefore "not suitable for audience and purpose" Desire impossible to use, Note slightly better. Please allow zoom, means I won't load six different pages before finally getting the "comedy" button I was aiming for. Thanks.

  • Comment number 13.

    For me, there is only one function missing. Can we have an iPlayer on our iPhones that records programmes and allows you to watch them off line later like on the computer? Surely it must be possible? I already have a radio app that records radio programmes for listening to later.

  • Comment number 14.

    Looks great but what I really want to know is when shows will be downloadable onto a iPad or mobile device for offline viewing as it is with a PC. I know this is a flash issue with Apple but shows can be rented through itunes and expire after a limited time so the technology does exist. At the moment this is a real limitation of iplayer.

  • Comment number 15.

    I was wondering if there was any plan to make the Android iPlayer app more radio-friendly. I like to listen to radio programmes but the Android app forces the screen to stay on whilst listening to the show, which is quite bad for the screen (it can cause burn-in).

  • Comment number 16.

    Much slicker interface. So easy to locate what you want, and well-placed previews. BUT why are ITV listings missing from the fuller schedule? ANOTHER PROBLEM: The new Sport layout looks prettier, but we lose so much function. We can no longer check on, for example, the Spanish League (football) results, or see a grid of the Premier League Football results history per club. Please reinstate.

  • Comment number 17.

    It would be good if the option to set your location actually worked - I don't want to know what London viewers are able to see, but everything I look at I need to reset my location - most irritataing.-

  • Comment number 18.

    Picking up on the location mention in #17 it would be nice if it could use the location set on the bbc.co.uk home page.

  • Comment number 19.

    Thanks @Dave Killeen,

    I realised I used the word 'confusing' but really meant 'disorientating'. It might be a dyslexic thing - visually oriented brains and that.

    I just had another play and realised another aspect to this: my eyes and mouse are quite connected - I look at a point on the screen and simultaneously move my mouse there. This causes the disorientation because as soon as the mouse moves to where my eye are pointing, what I was looking at disappears causing the disorientation. There is an unintuitive disconnect here: in wanting to see what I'm looking at requires me to point my mouse somewhere else (often causing my eyes to follow).

    This visual disturbance is most significant in the 'portrait' mode when the screen is narrow and composed entirely of the rollover images.

    Thoughts:
    Perhaps just overlaying a dark strip at the top of the image containing the relevant text would work. This could blended out like a Top Gear lens filter, so that the main visual clue remains. I've also noticed that the actual iPlayer does handle the rollover effects more subtly, which is a good thing.


    One final 'like' is this:
    Colour! You've embraced and used colour! Thank you. It's so lovely to find websites that are not all white on grey on white. They feel cosy and warm as a result, a bit like sitting in a plush theatre.

  • Comment number 20.

    I like the site very much, but you really do need a lesson in plain English. I thought I was reading some strange translation at one point.

  • Comment number 21.

    This is brilliant. Easy to use and now even better in terms of inspirinig to watch stuff I would never have thought to watch. Am a very happy licence fee payer

  • Comment number 22.

    @StanMooreGreen / @ChristopherLawrence - great to see hidden gems are being uncovered in the new UI for you. That was a key goal for us.

    @Ewan - testing and data suggests that the reason we saw such high usage of the schedule strip on the page was due to lack of interest from people in other parts.

    @Prometheus2012 - I'm using it fine on a Desire so I'm not sure what aspect of it that you can't use?

    @DrNick - I will pass your thoughts on to the team.

    WRT other various feature requests mentioned above - I shall share with the team.

    Thanks all.

    Dave
    Executive Product Manager for TV & iPlayer on PC and mobile web

  • Comment number 23.

    With Adobe deciding to get out of supporting Flash on Linux (at least very well), any chance you could let LightSpark's efforts in so they can run the content?

  • Comment number 24.

    "testing and data suggests that the reason we saw such high usage of the schedule strip on the page was due to lack of interest from people in other parts"

    That seems an odd view. If someone's forced to look at a page with something slightly interesting, and a load of completely uninteresting other stuff, clearly they'd go for the slightly interesting thing. However, in reality, no-one's forced to look at the page at all, so they're not just going to click on the schedule out of lack of interest in anything else, they're just going to not use the page. Surely anyone who bothered to access the page and use the schedule is someone who actively wanted the schedule?

  • Comment number 25.

    Will 大象传媒 Alba get a similar page and/or link at the top in the TV channel navigation?

    Also the '大象传媒 One HD' link currently points to the FAQs on the 大象传媒 HD channel site. Surely the URL needs updating to either be on the 大象传媒 One's site or on the /tv site, particularly now the closure of the 大象传媒 HD channel has been confirmed.

  • Comment number 26.

    @JCS and @Dave Killeen - yes, I have seem the www.bbc.co.uk/tv/guide - but it's not what I want.

    I liked the old scrollable view of What's On the channels, complete with image.

    The Guide is merely a web version of an EPG - that's not what I want. I get that on my TV. I don't get the scrollable view of what's on and what's coming on my TV.

    That's why I looked at the web site. Now, with a non-scrollable snapshot of a time-constricted view, it feels like a step backwards. Not impressed.

  • Comment number 27.

    @Alex - I can't comment on that but I will pass this on to the team. Thanks.

    @Ewan - as Finbar would no doubt agree, perhaps I could have been clearer (it has been a long few days!). As with everything when it comes to layout, there was trade-off re the positioning of the schedule strip, although as Geoff suggest above - perhaps bringing back a scrollable schedule strip is in order.

    @Keith - we're not finished yet and have a lot more that we want to introduce over the coming months. Thanks for the pointer wrt HD page branding.

    Thanks all.

    Dave
    Executive Product Manager for TV & iPlayer on PC and mobile web

  • Comment number 28.

    @Dave Killeen Hi Could you tell us if there or is there not a planned app for iPlayer for the Windows Phone, since you are the product manager for iPlayer.

  • Comment number 29.

    I'm more than happy to get feedback and engage (in fact I love it!), but unfortunately we are unable to comment re any future commitments. Sorry Henry.

  • Comment number 30.

    Can you re-add the idents pages? Don't know why you removed them. I know hardy anyone clicked on it but you could just left them as a archive content of their responsible channels

  • Comment number 31.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 32.

    They look great!

  • Comment number 33.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 34.

    Credit where its due, I have been critical of some past changes but this delivers a much enhanced experience.

    On a separate point the new TV guide does not seem to be able to learn location preferences and always defaults to London - perhaps in future that could be tied to home page location preference?

  • Comment number 35.

    On the list, @Matt. Thanks!

    Dave Killeen
    Executive Product Manager, TV & iPlayer on PC and mobile web

  • Comment number 36.

    Stunning. Well done and long overdue.

    I hope other sites like 大象传媒 Alba, 大象传媒 HD and 大象传媒 Parlaiment will get a makeover and links to C大象传媒, CBeebies, 大象传媒 News added to the top navigation bar.

    Also, any changes to the TV homepage on the cards soon?

  • Comment number 37.

    Looks really nice - and thanks for all the useful info you have posted here
    [Unsuitable/Broken URL removed by Moderator]

  • Comment number 38.

    The TV guide looks amazin!!! Although why can't you make the 大象传媒 front page scroll like it does on the TV guide? ie. At the moment we have to press buttons to scroll side to side, why can't you implement the tv guide technology into the homepage, so we can scroll side to side using our fingers on our tablet?

  • Comment number 39.

    Congratulations. I think the new channel homepages look great. Simple and high quality. After the mixed response to the new main 大象传媒 homepage (though over the long term, I think it will prove to be be influential) and the negative response to the new Sports page (admittedly, it was a bit of a mess at first) it's great to see the team hitting the mark straight away this time.

  • Comment number 40.

    I believe this is one aspect in which the 大象传媒 has certainly stuck to solid website design principles - the pages have evolved into something useful for end users and is thankfully easily available on multiple devices.

  • Comment number 41.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 42.

    Why does the TV homepage /tv/ feature a link in the menu bar to Travel when you access the page from the UK?

  • Comment number 43.

    Like others, my initial reaction was "Where's the full schedule link?", and I would have preferred to see this more prominently above the fold, although I can see the logic of placing it where you did.

    Wondering aloud, is there mileage in having a sign-in on these pages, or would that complicate the entry to iPlayer?

    Russ

  • Comment number 44.

    @Rafmarham - yes, plans for other channels are on the radar. Thanks for the comment.

    @timincognito - the various product teams (iPlayer, Homepage and Radio - for example) are currently working with each other to share what we have each done so as to leverage expertise. Well spotted ;-)

    @Richard and @Craig - that pint is on its way to you both. Thanks ;-)

    @DBOne - this was pointed out to me this afternoon and we have raised it with those concerned. It looks like the nav bar at the top of this particular page is rendering the international version (which does not show iPlayer) rather than the UK version. Well spotted!

    @Russ - thanks for the comment. I'm sure sign-in would be useful and think TV and iPlayer product area needs to consider the sign-in proposition so that it more useful to users than it is today.

    Thanks again everyone for the useful and encouraging comments. The team very much appreciates it.

    Dave Killeen
    Executive Product Manager, TV & iPlayer on PC and mobile web

  • Comment number 45.

    I like the design, I hate the fact that anybody who doesn't happen to live in London is yet again treated like a second class citizen.

    We pay just as much to the 大象传媒, why do we have to constantly jump through hoops and click through endless pages to find the information that is relevant to us?

  • Comment number 46.

    @William - could you be more specific in relation to the Channels homepages and what you're trying to do here that you could not do before / or that you would like to do on these pages? Thanks William.

    Dave Killeen
    Executive Product Manager, TV & iPlayer on PC and mobile web

  • Comment number 47.

    I would like to be able to set my region on the TV homepage (the set your region function does not work at all on that page), the full TV guide page and the individual channel pages and for it to be remembered so that I don't have to reset my region every time I navigate to them. Saving the TV guide page as a bookmark is not good enough as I tend to click though the site. The 大象传媒 already has my location as I set it on the 大象传媒 homepage, but for some completely unfathomable reason that only seems to change the weather report and give you a couple of local news headlines.

    As to the individual channel pages, I am quite impressed with them, however the watch live function at times is useless as I have no interest in 大象传媒 London news, I would like to be able to watch the news program from my area.

  • Comment number 48.

    @William - The ability to save location once and have this carry with you through your journey (from Homepage to iPlayer, for example) is on the radar.

    The ability to offer regional simulcasts for live feeds online is also a captured requirement.

    Thanks,

    Dave Killeen
    Executive Product Manager, TV & iPlayer on PC and mobile web

  • Comment number 49.

    I'm sure sign-in would be useful and think TV and iPlayer product area needs to consider the sign-in proposition so that it more useful to users than it is today.

    I note the have sign-in. Favourites too.

    Russ
  • Comment number 50.

    Dave, though functions should not be 'on the radar', they should be part of the initial roll out of the new designs. It is blindingly obvious that location is a major variable affecting what your readers wish to see.

    It is as if you are telling the rest of the country that their needs are secondary considerations and that you are primarily there to service London viewers.

  • Comment number 51.

    @William - I do hear you (as much as it may seem otherwise!)

    Quite a few features had to be descoped in order for us to release 90% of what we wanted so that we could hit release dates prior to teams in other parts of the business getting priority as to what they needed to release (Sport/Olympics for example have more pressing release priorities that needed attention).

    We will get around to this feature. It was towards the bottom of the list due to data and research which I felt gave other work a higher priority.

    I'm never happy with what I release as there is always something I wanted to be included which does not make it in for whatever reason. But I also feel that if I was to wait for everything to be bundled in from the get-go then it is at the expense of shipping more important features sooner.

    Your request has been heard loud and clear and I'll be back here with a more helpful announcement on this blog post in due course when we get you (and others!) what you rightfully expect.

    Thanks William.

    Dave Killeen
    Executive Product Manager, TV & iPlayer on PC and mobile web

  • Comment number 52.

    Regional relevance is not a 'feature', it is an essential part of a web site purporting to be a news, TV, and sport hub for the entire United Kingdom.

    I'm sorry but is says everything about the 'London first' culture that you state that providing around 50 million people a website that is relevant to them is 'towards the bottom of the list'.

    As you brought up sport, why are the links to the four nations sports pages buried at the very bottom of the sports homepage? That alone is one of my biggest gripes about the design.

    As to the Olympics, I am looking forward to seeing it, but the all consuming, everything else has to suffer because of it attitude it seems to generate it is really start to get grating.

  • Comment number 53.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 54.

    I have used the contact form twice to see if a technical issue on the website can be corrected but not heard anything and nothing has happened so let's see if it helps posting here.

    There's been several comments made regarding the schedule which I concur with so no need to repeat however when you do get a schedule, for whichever channel, on the page I find one big bugbear - with the old schedules it was possible to right click on a programme to open the information on it in a new tab. Now this is no longer possible. The only options are to click on the programme and open details of programme over the schedule or, if you want t keep the schedule visible, duplicate it and then click on the programme in the new tab. Can the 'Open in a New Tab' link be reinstated'?

More from this blog...

大象传媒 iD

大象传媒 navigation

大象传媒 漏 2014 The 大象传媒 is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.