Viggle Store Web App 2014-2016

  • product design
  • css
  • javascript
  • html

Viggle was a TV companion app that rewarded users for engagement and certain milestones. Users would have the app open while watching TV and the app would present relevant ads and content to go with the on-air shows.

Our company, Choose Digital, was tapped to create an online digital media store that would serve as a reward outlet for users to spend the points they earned by using the app. It was to be a white label store, which wasn’t new for us, but it had to live both on the web and within their native app as well.

We ended up using the same codebase for both environments and found ways to communicate between the native Objective-C code in the app with the web app's server and front-end. Authenticating users seamlessly was one of the bigger challenges.

wireframe thumbnails for Viggle ID app UX flow

Viggle ID app UX flow

There were plenty of wireframes to work through that were used both for development and business-side demos.

presentation slide thumbnails of UX presentation

Viggle Store UX walkthrough overview

Unfortunately I can't include screenshots of the store within the app because it no longer exists (the Viggle app and brand was sold to a competitor who changed the business model), but it was essentially the same as the web-accessible app except with some auth cleverness and some of the masthead and navigation removed, since those were already present in the app’s header and footer. Creating a fully responsive layout allowed us to do that.

We also started to offer streaming movies and a larger library of e-books and audiobooks as well. Our UI used scrolling sliders for each section and “See More” links to help users focus on the content they preferred.

screenshot of Viggle Store homepage

Viggle Store homepage (hat tip, Rdio design team)

screenshot of Viggle Store sidepanel navigation (phone screen)

Slide-in nav for small screens

screenshot of Viggle Store homepage on tablet size screen

Viggle Store on tablet size screen

Combining the technical challenges of supporting both web and native environments with business and marketing requirements, made this one of the most difficult interfaces I’ve ever worked on. We had to use any latest, cutting edge techniques we could find to still find a way to create a smooth flow through the app for users.