clientVice is a global media company focused on arts, culture, and news topics. Vice has expanded into divisions including the magazine and website, a film production company, a record label, and a publishing imprint.
- UX design
- UI design
- Hybrid App Development
Reaching the market
with more accuracyIn early 2015 the global media empire VICE launched in China - featuring global youth culture, arts, and news through media platforms on their website. We saw the potential for them to reach their millennial target market using the same content with more accuracy, through a mobile app. We met with the VICE中国 team at their Beijing HQ to propose the idea, which we felt was the natural next step for their roadmap. We hit it off and were in business.
Prototyping the UX
to rapidly test usability
From early in the project we animated prototypes in After Effects to communicate our proposed user experience and user interactions. We then took the approach of developing multiple live app prototypes to demonstrate the vast capability of a hybrid app and to give real life application to our ideas, while showcasing several iterations of the unique interactions and experiences we tailored for the app.
An iOS & Android app using a single codebase
To Biuld An Ios & Android App
The beauty of Cordova allowed us to package the application as both an iOS and Android mobile app from a single codebase. The advantage of using a single codebase was rapid prototyping and development, resulting in half the development time usually needed to deploy an iOS and Android application.
3rd party integrations
One of the challenges in the app development was integrating the users’ native video player from their mobile device with the 3rd party Chinese video sources (Youku, Tudou, Tencent, QQ) being fed directly via API from the VICE中国 website. To solve this we created a function to scan the content being provided through the API, identifying the video provider from the embed source, then playing the video in the devices native player, or providing a graceful fallback.
A fast and robust CMS
with node.js & Backbone
Behind the scenes of the app, a content management system was required. We developed a fast and robust CMS, built with Node.js and Backbone, allowing VICE中国 to manage the app long after the release. The key features of the CMS include the ability to send push notifications to both iOS and Android devices (with timers and queues), managing the display and timing of advertisements, and the management of static pages inside the app.
Push notifications allowed us to speak directly to the user to promote featured VICE content without them needing to open the app. Implementing this feature for iOS was straight forward, as Apple Push Notification Service did the heavy lifting. The challenge came when we needed to send push notifications to an Android phone.
With the target users located in China, implementing Google’s Push Service for the Android app was not an option. This was due to the restriction on Google services inside China. Our customized solution was to create a fully standalone push notification server just for Android.
A successful launch
featured ‘best new apps’ on itunes
The greatest validation of success when launching a mobile app on the Appstore is to be featured by Apple. It is the goal of every app submission. So it was to our great delight, that the VICE中国 iPhone app was featured in the “Best New Apps” on the iTunes homepage. The app has since seen many more features on the Appstore in numerous categories and ranked in the Top 10 News apps in China.
Hybrid app takeaways
One of the key takeaways was the importance of each millisecond when it came to tdown animations. We spent countless hours analyzing the animations, working inside Chrome Developer Tools’ timeline tweaking and refining the animations in the interactions. This methodology of perfecting animations has become an important step in our front-end development workflow.
Android needs more love
Android’s lack of webview support came to us as a surprise. With only the latest android versions providing full support to Flexbox and CSS3 animations, we needed to find solutions to support older android devices. Utilizing the Crosswalk project and various nifty tricks we were able to optimize the performance on Android while also providing graceful support to older devices.
The world beyond google
With Google services being blocked in China, and the Android OS relying heavily on Google services, launching an Android app inside China required a different and localized approach. Popular tools such as Firebase, push service APIs, testing and distribution on Google Play are not available in the China ecosystem, which led us to find or create own solutions.