4oD on Android

Delivering a complex product on a fragmented platform

Channel 4 is one of the most recognised and respected brands in British broadcasting, and we’ve worked together to design and build 4oD, their on-demand streaming service, for Android mobiles and tablets.

4oD on Android was the first time we had worked with ribot and we have been impressed by the way they helped us to get 4oD out to our Android users.

Helen Walker, Product Manager

UX Sketching

Developing our concept and vision for the project

After gathering research from the 4oD team on their iOS app, we started with sketching our basic concepts for what it could look like on Android.

We sketched out a number of UX/UI iterations for both mobile and tablet, though mobile led tablet on the project at this stage. The key here was to marry the Google Holo experience with the uniqueness of the 4oD brand and style.

Early Prototyping

The importance of timeboxed experiments

The UX and design phase followed a strict iterative process with demonstrable development spikes. We created a working swipeable tab bar in the first sprint for instance. This was important as it fundamentally differed from iOS and was important to share with the team.

Wireframing made easy

Formalising project decisions

Working with the User Experience, Business Analyst, and Product Owner folk at Channel 4 we got our concepts to a level that we all felt comfortable with. We then moved onto wireframing; formalising the screens that made up the application allowed us to drill down into its finer details. This was made a lot simpler because of the number of iterations and decisions made at the cheaper, faster sketching stage.

4oD & Android. A match made in Holo

Bringing beauty to the beast

Both 4oD and Android’s Holo UI have their own distinct visual styles. Combining these two transformed our wireframes into an application that conveyed both of these brands into one unique experience.

Fragment to be easy!

Creating 4oD for a selection of device shapes, sizes and types

We designed 4oD to work elegantly from small mobile devices up to the largest tablets using Android’s unique Fragments UI architecture. This allowed us to create a flexible framework that could easily adapt to many screen sizes and device types whilst maintaining a sense of consistency in features, user experience and look. We made use of various open source libraries, including the excellent ActionBarSherlock to create a consistent experience across devices.

All together now

The challenges of established brand crossover

We had to make sure that our design language played well alongside the 4oD applications found on other platforms such as the web, TV, and iOS, finding the right balance between consistency and creating a uniquely Android user experience.

Navigreat

How we made exploring and moving around 4oD so easy!

We used swipe gestures and dropdowns to allow simple exploration of the depth of content 4oD offers, whilst still keeping this process simple and fun. More specifically, we made the most of landscape views, exposing more content or changing optimised layouts.

Is that a Phone or a Tablet?

Designing for the ‘phablet’ generation

We put a lot of thought into delivering the optimal experiences for small, medium, and larger screens. We tweaked layouts for each core device size to allow mobile users a quick, snappy browsing experience, while on the tablet we put more of a focus on the exploration of content. The Nexus 7 sat somewhere in the middle, providing an interesting UI cherry-picking process between the mobile and tablet UI elements.

Reflections post-launch

A tale of two strategies

Delivering a product as complex as 4oD on a platform as fraught with fragmentation as Android is no mean feat. Our advice? Early iteration is key, as is the support of your team.

Plenty of UI iterations up front, especially around the core navigation model, enabled us to try out things early and often ultimately establishing if these concepts could become reality by initiating development spikes.

This process was only made possible, however, by support of the fantastic team at Channel 4 whose flexibility, management of the technical implementation, and respect for our knowledge of Android conventions allowed this to happen. The Phase 1 release of the app demonstrates that some of the major challenges around the Android platform have been overcome and foundations for an exciting future laid…

4oD is a complex product and the project was further complicated by the challenges of fragmentation on the Android platform, but ribot have produced a great product that I hope our Android users will be delighted with.

Helen Walker, Product Owner for 4oD