Top Gear on Windows 8 – Zero to Store in 6 weeks, Part 1: Designing the UX

image

I met up with Paul Bishop, Managing Director of Splendid, who recently published the Windows 8 Top Gear News app, to share what it was like working with such an iconic brand.

“We’d already worked on the Windows Phone 7 app for Top Gear, so when the brief came in for a Windows 8 app we jumped at the chance. BBC Worldwide were really keen to build the app in time for General Availability at the end of October and Windows 8 was a great opportunity.

We tend to tell a story when we pitch an idea, focusing on the evolution of the app, how it could grow over the next couple of years, including sketches and screenshots to bring it to life. With this project the challenge with the brief was twofold: how to differentiate the app from the website when you could just pin the website to the desktop and have the same content, plus how to develop the brand on Windows 8 with other properties like the Good Food Guide and Lonely Planet. We ran a quick poll in the office of those who hadn’t worked on or used the Windows Phone 7 app and found the overall Top Gear brand was a bit disjointed. We took that knowledge and tried to pull together all the assets and create a visual design that worked across all properties.

“The groundwork for the application began before we did any interface sketching by articulating the central proposition of the app. Windows talk about this as the ‘What is your app the best at.’ This served as a marker to orientate our thinking and help to drive the product vision and feature roadmap. In a collaborative interdisciplinary session we started to map ideas that would enable BBC Worldwide to fulfil this ambition. This process was a mix of blue sky ideas as well as tactical considerations informed by the existing BBC Worldwide capability roadmap. We used a large roll of paper and scribbled as we talked to give us a sense of the space this app could inhabit in the short, medium and long term”. Neil Noakes, UX designer.

wall-notes[3]

Our initial idea was to create an ecosystem where all these brands co-exist. This starts with the ‘consume’ phase which you can see now in the Top Gear news app – it’s a beautifully designed way of consuming Top Gear content from the website.

The next step is the ‘create’ phase, where users can create their own bundles of content, the content gets social and you can share it more deeply.

We’d normally go through the process of figuring out what the user needs to do and the intended outcomes, considering what devices it will be used on and then do the interaction design. With this project, because we were so time constrained we did the design and wireframes in parallel. We used Axure, a tool that allows you to create dynamic, clickable wireframes so we could demo the intended swipe and bring the wireframes to life and demonstrate the fluidity of the navigation.

We kept things low-fi to begin with by sketching out the core interfaces and using stickies to compose the application map. This meant that in collaborative sessions with the client we could make changes quickly and arrive at a shared view before hooking up the interactions in Axure. This also meant we could get into visual screen design before having a realised clickable prototype. The wire-framing was very quick, illustrating the core templates and navigation flows. We used this with the visual design to develop the actual product”. Neil Noakes, UX Designer

We’d also usually go through user testing but we didn’t have time, we just grabbed people in the office who hadn’t used Windows 8 and hadn’t been close to the Top Gear project – it’s better to test a few people that none! We got some good insights from that testing phase, it made us build on standard controls like galleries and work on the icons functionality, to strike a good balance between leaving people to work out how to use the app intuitively to ensure we followed the Windows 8 guidelines, versus adding some standard visual indicators.

We showed it to the BBC Worldwide team and luckily they loved it, and asked us to build pretty much what we presented at the pitch meeting. That was very lucky since we only had a short amount of time to build and publish the app! You would imagine there’d have tons of red tape with BBC, we were worried they’d want us to start again from scratch – we all knew we didn’t have much time from kick off to publish. However, the process of working with the BBC was amazingly smooth considering they’re such a big organisation and with the limited time involved. We were only able to complete the app so quickly – in six weeks from start to delivery – because the app is so simple and the BBC loved the design from the start. The app feels dynamic and lively but it’s essentially quite a simple app, it really just consumes a feed. Also, because we’ve been working on Windows 8 apps for a year and a half (we also built the original eBay app), we have lots of knowledge within the company which helped speed up the process as we didn’t need to rely on help from Microsoft to get issues resolved – in fact we spotted errors and fed back workarounds to the team at Corp! In order to get an app built that quickly not only does the client have to play ball but they also need to have assets like a feed, or systems already in place.

What was the design inspiration? We followed the same principles as the website, pulling in elements from the magazine and the television programme itself. We also included footage from the DVD and videos from the show in a gallery format. We use bold, bright colours similar to the magazine – they wouldn’t suit a classic HTML page and the colours make the app design quite distinctive. The challenges with the design was coming up with something that didn’t confuse users as to what it was.

There’s a strong interaction model with Windows 8, so when you’re designing the UX for an app it’s easy to either ignore it completely and then your app won’t follow the expected Windows 8 model, or make your app really close to the templates and then your app looks regimented. We wanted to follow the interaction principles of Windows 8 but at the same time include the essence of the Top Gear brand and character.

“The design patterns inherent with Windows 8 takes away a degree of IA overhead, so it’s fast to get a basic model of the application together quickly. The challenge is finding the balance between template adoption and brand ownership and innovation”. Neil Noakes, UX Designer

We went big on colour, giving each section of the content a bold, distinctive colour and also made use of the fantastic photography that comes with working with the Top Gear brand.  On the secondary screens we used strong typography to break up the grid so your eye gets a bit of a breather from looking at photos.

Further into the app at the article level we use a graphic device that goes under the photograph to say ‘this is a horizontal scrolling experience’ rather than vertical, leading the user intuitively through the copy, so you instinctively know there’s more content if you keep scrolling.

“The ability of Windows 8 to multitask via snapping split panels was something we were keen to explore in order to draw utility across applications – although for the first release we’ve focused on the core content experience though implementing Windows 8 grid views and making use of out of the box components such as image viewer and video player”. Neil Noakes, UX Designer

The design model is flexible so there are no dead ends, making it easy to add any new functionality – we made sure we left room to add social features for example, rather than retro-fit it to the design.

Although we didn’t really need technical support from Microsoft, we worked with them on the Ads in Apps SDK to make sure the ads worked properly and also worked on a custom version of the advert, promoting what you can do with ads in apps.

We build on all devices, web, in-car systems and of course Android and iOS applications – it makes sense to work across platforms. You need to design something where the principles work on all devices and all platforms whilst adhering to the models those platforms dictate. It’s different building interaction models for apps versus the web – the interaction model for the web is universal, but with apps each devices does something unique”.

Next up we’ll hear from the team behind the visual design. Watch this space!

For all UK Windows 8 dev and design resources go to www.windows-store.co.uk.

Check out the Windows Advertising Guidelines.

Published by Sara Allison

Sara is the editor of Ubelly - when not heads down scouring Ubelly articles for typos (and not always catching them), she's scouting for new writing talent. Give her a shout @SaraAllison if you've got something to say about development/design and want to be heard.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>