4oD on Android
Delivering a complex product on a fragmented platform
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.
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.
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.
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.
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.
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.
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.
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.
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…
