³ÉÈËÂÛ̳

« Previous | Main | Next »

Things to Do Mobile: Design

Post categories: ,Ìý,Ìý

Oliver Rich | 16:00 UK time, Thursday, 29 December 2011

screenshot

Things To Do mobile

Hi, I’m Oliver Rich, Senior Designer for ³ÉÈËÂÛ̳ Future Media UX&D. I’ve led the art direction on Things To Do desktop and mobile over the last year. Since our launch of Things To Do ("TTD") on the desktop we have now designed, developed and implemented the first of many mobile releases for TTD.

Just fire up your mobile device’s browser, visit and a slim-line version of the desktop experience is served straight to your smartphone or feature phone.

TTD mobile is one of the first mobile sites to use our new Global Experience Language (GEL) for mobile; a set of design patterns with which we build ³ÉÈËÂÛ̳ experiences.

Thanks to designer Stephen Robertson, the ³ÉÈËÂÛ̳ UX&D team now has a core set of patterns to start mobile website designs from, many of which were shaped by TTD requirements. And with our new focus on four screens for GEL (TV, Desktop, Mobile, Tablet), these are a great foundation on which to improve and build.

Because - as Product Manager Ziad Dajani blogged - TTD aims to tell audiences about activities near them, run by the ³ÉÈËÂÛ̳ and our partners, a mobile presentation is an even more essential part of the location-based offer.

Location

One of our favourite features on TTD Mobile is location search.

The main proposition of our desktop site is built around a user selecting a location, be it a city, town or postcode. So on the mobile site we’ve replicated this for users on the go or short of time.

Just enter your location and we’ll return a list of results. Of course, we’ve added a ‘use my location’ option for those with GPS enabled browsers making it easy to see what’s nearby.

Screenshots of TTD mobile app location search in action

Things To Do mobile location search

Providing important information

One of the key challenges when building the mobile version of TTD was establishing what is the most important information a user needs. Quite simply stripping out images isn’t always the solution.

Our search results needed to be quickly scannable and consistent with the desktop experience for those who were familiar with Things To Do already.

We had to make sure that important information such as opening times and maps were optimised for mobile both in terms of visual and interaction design.

So, for example, on mobile we present inline maps but also give you the ability to use the device mapping (where available on your device) and allow you to ‘locate’ yourself in relation to where an activity takes place; quite handy for those without a physical map to hand.

Companion to TV and Radio

But mobile is not just about location while you are on the go.

We also know that audiences are increasingly turning to their mobiles to come to bbc.co.uk from the sofa when they hear calls to action in our programmes. So, with shows like Countryfile and Springwatch regularly promoting the great activities our partners add (using the Things To Do Activitymaker), a mobile offer makes even more sense.

The design patterns used in the release are the basic module structure, the carousel and tabs - all of which are available on the ³ÉÈËÂÛ̳ GEL website.

Oliver Rich is Senior Designer in ³ÉÈËÂÛ̳ UXD GEL Mobile. Things To Do is part of the Knowledge and Learning Product.

Comments

  • Comment number 1.

    It's really exciting to see that the new mobile GEL designs are starting to roll out.

    However, when I visited the site in IE on my Windows Phone, it didn't redirect to the mobile version.

  • Comment number 2.

    @Josh - tried it now on the blackberry browser and the bbc.co.uk/thingstodo link worked fine (I could see the mobile version). I wonder if the site automatically associates IE with a desktop.

    Oliver, just came across an interesting tidbit on - I imagine the location elements make the design of mobile sites much more challenging. Can definitely see a future with RSS streams, social media etc being directed to mobile devices with location considerations (e.g. topical news/ tweets in your area)... exciting stuff!

  • Comment number 3.

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

  • Comment number 4.

    Seems a bit clunky when first going to it (iPhone), but I really love the UI!

    Very modern, but yet very ³ÉÈËÂÛ̳!
    The location function will also most certainly come in useful at some point!

    But overall, loving the webapp!

    [Unsuitable/Broken URL removed by Moderator]

  • Comment number 5.

    This is excellent! I'm loving the design - can't wait to see the GEL rolled out to more ³ÉÈËÂÛ̳ Mobile sites. The maps are very well done too; being able to pinch-and-zoom the location map is a very nice touch.

Ìý

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.