Programmes: A Bite Size Design Process
I'm the lead designer on our /programmes work and seeing as Sophie's away, she's asked me to give you a little detail about the new designs.
We've been testing and developing the technical infrastructure since October 2007's initial beta launch and we've now had the time to refresh the look and feel. Back in October, we'd taken the view to not implement any strong visual design as we didn't want to spend too much effort defining another pan-BBC style when there was so much internal talk of a "lick of paint". We spent most of the early period building strong semantic markup foundations and grappling with the layout and hierarchy of the core information but now, with the arrival of what's being called the "Global Visual Language", we needed to crack open our photoshop and css skills.
As Tim Anderson noted recently, the vast majority of BBC websites have been mocked up as full pages in Photoshop and then passed to someone else to convert into the final code - but the work on /programmes demands a different approach, so I thought I'd shed a little light on our process.
The site is so extensive (over 100,000 pages indexed in Google and growing by the day) that designing whole pages can become a burden. We instead focus on "components" - the repeated patterns across the site. If we can unify the design (and code) here, a more coherent product emerges. We'd been working this way with a list of 30 components since the site went live and it really helped ease the pressure as we could design in bite size chunks. We could focus on just the "episode item" as it appears in a list, the "calendar" from the schedules, "previous/next navigation" that appears on episode, series and schedule views or a simple h1 "heading".
Richard and Bronwyn's team helped us to interpret the new Global Visual Language, and in early February they handed us a visual brief in the form of layout mockups for two of our page types. We could clearly see where they wanted us to head stylistically, but these designs explicitly included just half of the components we needed to update. Fortunately, Olivia - the designer who'd mocked up the brief - was available for a few days, so we had the opportunity to flesh out a direction for most of the missing pieces, and once we felt we had enough to work with, we could focus on the css.
When writing the markup, we'd ensured that each component is represented by an id or class. This gave us enough hooks on the code to approach the css in the same bite size chunks as the design. We were also free to treat the brief as a guideline, not something too rigid, allowing us to improvise when approaching more complex interactions not expressed in a photoshop document.
The whole process from signed-off design brief to the live deploy has taken less than 20 days. Now that we've taken the giant refresh leap to bring us inline with the homepage and mobile, we'll now make many smaller incremental steps to refine each component.
So that's the little things covered, but next on our list is to be ever more integrated with the Channel, Network and Programme sites. We've already got some good ideas about how /programmes can help to knit and weave these programme experiences together and hopefully you'll see this emerge, in bite size fashion, over the coming months.
Jamie Tetlow is a designer in Audio & Music Interactive.
© MMIX~RS~q~RS~~RS~z~RS~26~RS~)
Comments
The new site looks great! You should be proud of it. Now, when is news.bbc.co.uk going to follow suit... It looks very dated compared to the new sites.
I like the new design. From a functional point of view, there should be a better way of querying the system, e.g. 'Dramas on BBC One next week'...
I love it. I've been eagerly watching the new global header being applied to various pages, and I have to say I'm impressed.
Partially due to the nature of the new design: the 'grey bar' pages, whilst they may look stylistically different, all seem to follow the same navigational sidebar, so it's very samely and doesn't match many programmes... in fact, Doctor Who seems to be the only show microsite that to my knowledge doesn't use the same standards. It's good to see there being more creativity being used with the pages seen so far. I look forward to seeing more pages adopt the new style: not just for new things, but old ones too. I do recognise that it's an absolutely mammoth task to rebuild old pages as well as develop new ones, but I have hopes for shows like Doctor Who and Top Gear to have rebuilt sites with their upcoming new series: as they particularly could benefit from it really well (besides, navigating some bits of the Top Gear site, especially the Producer's Notes thingy, is a bit tricky due to the standard navigation).
But I digress, back to Programmes. As I said, good work! It's a really useful thing, especially how it brings together info on the show itself, when it's on air next, and best of all, iPlayer. What I'd personally like to see now is that both those new things, iPlayer and Programmes, get a wider use across BBC.co.uk - for example, it'd be great for future iterations of things like the Top Gear site, which has its own in depth episode guide, so have those pages link to the relevant ones on /Programmes (and vis-versa) - and on that note, have the Programmes database give a general link to a show's microsite if one exists. On the iPlayer note, whilst Programmes treats iPlayer just like a channel (a good move, that) - there's little to no acknowledgement of Programmes when navigating through iPlayer: it's all done through the same programme ID thing, so it'd be useful that if I was watching Ashes to Ashes on iPlayer, it'd have a link to Ashes to Ashes on Programmes.
But, as it is, it's very good: and very useful. It's just a shame it's a bit hidden! The only link I can find to programmes on the homepage is the title of this blog entry, which is only there because I chose the Internet Blog to be shown... ah well - probably as it's still in beta.
But in summary, uhm... yay for programmes. And the new header. And for waffles.
The new look's a great improvement in usability over the pre-style.
The new 'Global Visual Language' looks much better than its predecessor, it's nice to slowly see it being rolled out. (Looking at the homepage, though, 'Text only' and 'Accessibility help' should be in Title Case ;) )
It's really nice to be able to see prior broadcasts and future ones of an episode/series, but it would be nice if the linear chronology of a series was given the same importance - i.e. a tab rather than confined to a 'Browse all episodes' link. (Take a look at Damages on /programmes -- b008q0fs -- and try and find a simple list of episodes without all the duplications for air dates.)
The Programmes pages are good, but what happened to the Programme Catalogue?!? It's been "currently experiencing some problems" for weeks or even months now. It was such a brilliant resource, why has it been removed?
Ed @2, we do have a view for upcoming drama on BBC One although it's not explicitly linked in yet. We have the same kind of views for all the channels whose schedules are live. We've a good idea how we'd like to link this all together to make these lists much more discoverable but have a little bit of work to do to get there... more soon!
JonathanEx @3, our goal is to get /programmes closely integrated with both the channel and programme sites to the extent that, for some, it becomes the microsite. Clearly the likes of Top Gear are bigger beasts and the generic /programmes approach will not be able to fulfill all the nuances so in the meantime we link to these microsites from our pages -- you can see this at the top of the right column of the /programmes Top Gear page. There's only 20 or so of these microsite links in our database at the moment but expect many more to be added. We have indeed been quiet and slightly hidden so far because the underlying data is not at its best, hence the 'beta' label, but we've found it beneficial to iterate in a live environment as it helps push on the data refinement conversations. You should see the data improving over the coming months. Glad you're liking it :-)
Alan @4, couldn't agree more. A simple chronological episode list for any given series is essential. It's something we see around us on our current hand built sites and on the back of any DVD box-set you might pick up. As you've noted we've only built the 'last on' and 'coming up' views of broadcasts and have not yet built a more definitive 'guide' view, one for our to-do list. For the time being it's still possible to extract the same information by clicking the prev/next links from episode to episode (granted that's a little tedious), here's the Damages Pilot Episode as a starting point.
The new /programmes looks lovely, however I was surprised to find that the search box did not search the programmes database but instead took me to that rather lame excuse for an internal search the BBC has.
Would it be possible make a second search box for just /programmes or at least label the main one in a clearer fashion?
Hi, a normal user here, not a nerd. Much preferred the old, clean design. Content is king.
I can't believe the GVL is just web 2.0 circa 2005, all gradient fills and over-size fonts. Amazing the BBC couldn't come up with something more original.
Looks good! Looking forward to it getting some proper traffic from the /tv/ pages, and replacing the current schedules pages.
One small usability comment, on pages like this: http://www.bbc.co.uk/programmes/genres/drama it feels odd for the main visual element, the channel logos, to not be clickable. I spent the first few seconds clicking on them frustrated, and I reckon that'll be a common reaction.
I'd link them to the programme pages, not the channel pages. And then eventually replace them with a thumbnail of the programme (for TV at least).
Frankie
I don't mean to sound rude, but the programme information pages are useless. Especially when compared to the (shut down) Programme Catalogue. Why can the old catalogue not be kept up while it's "incorporated into the programme information pages". The catalogue had people pages, old programmes, and had a logical layout within the pages, where you could see each episode in order, plus you could tell at a glance whether a programme was radio or TV. When will all the information be included in the programme pages, if ever? Please at least just reactivate the old catalogue in the mean time, it worked well, so why has it been shut down? Plus, the new one shows things like non-BBC films, which is incredibly useless, unless it's going to be a full schedule it can barely be used for anything, and each programme seems to have several links to it, it's obviously not ready for public use, whereas the catalogue was.