client

Vice 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.

services

  • UX design
  • UI design
  • Hybrid App Development
  • AngularJS
  • Node.js

Reaching the market

with more accuracy

In 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.

Early prototype testing parallax scrolling

An iOS & Android app using a single codebase

To Biuld An Ios & Android App

In deciding which development approach to take for the app, we reviewed the functional requirements, the allocated budget, and the large and technologically diverse audience in China. To meet the requirements, our solution was to build the app using Cordova, a hybrid mobile application development platform. This would allow us to use core web technologies such as HTML, CSS and Javascript as the foundation of the application. We then harnessed AngularJS and its UI Router to enhance the user experience and bring the interactions to life with ‘app-like’ authenticity.

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.

Wireframe app design
Wireframe app design
Wireframe app design
Wireframe app design
Wireframe app design grid guide
Wireframe app design grid guide
Wireframe app design grid guide
Wireframe app design grid guide
VICE app UI design
VICE app UI design
VICE app UI design
VICE app UI design

3rd party integrations

Video

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.

YouKu video - VICE首发|2060MTV打歌榜

Comments

Engaging and retaining the users through commenting on articles is an integral part of the VICE platform. Our challenge was ensuring all comments from the website and app were synchronized.The VICE中国 website uses a localized 3rd party comment system - Duoshuo.

The problems came when our developers uncovered Duoshuo did not provide a fully featured RESTful API to implement. It was then we knew we were on our own to create a solution. Ingeniously, our team came up with ways to encrypt and decrypt the app data within Duoshuo's comments, creating a replica of missing features on our own server to complement what existed. The result was a successfully synchronized comment system used by hundreds of thousands of users on the app and the website.

VICE doushou commentVICE doushou commentVICE doushou commentVICE doushou comment

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.

Vice APP CMS - Push notification scheduling
Android push notification

Notifications

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.

Featured "Best New App" on Apple Appstore
250,000+ app downloadsDownload on the AppStore

Hybrid app takeaways

Animation optimization

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.

Have a project in mind?

CONTACT US