PlayOn: Process 2015

After two years, we are finally about to release a massive overhaul of not just the core product (3 separate software products now rolled into one), but also an entire brand relaunch. I’ve been privileged to oversee every part of this process, from early conception and iteration to it’s final launch coming out in August. From brand redesign and entire web redesign, to tackling the core products, it’s been a massive undertaking, but I’m pretty thrilled with how it’s come together. Below is a very brief look at the soon-coming launch with some of the very extensive process outlined as well.

Main PlayOn App

The main desktop app (which if you’ve never used it is similar to Spotify, but for streaming, casting and recording videos and any content really, from the web to your PC, smartphone or TV. You can record anything on the web to watch later, and our software even lets you skip the ads, which is fantastic.

Here’s a preview of the old (currently live) version of the product:

Popular_titles

 

As you can see… it’s rather bland. The product itself is fantastic. It works like a charm (most of the time) and give you a god-like power over internet television. Any video, any time, no commercials and on any device. The problem is, this great underbelly is entirely unwieldy. It’s like having a Rolls Royce engine strapped to…. well, whatever the worst car ever design was. Not to mention the entire software suite was fragmented- Want to record something? You have to use “PlayLater”; an entirely separate piece of software. Want to cast something? Need PlayCast. Want to watch vids? PlayOn. And so on. There was much more thought in the early days of Playon going towards marketing than to actually giving users a fantastic experience. Ultimately, the entire brand was charmless and lackluster. But despite this they have gained millions of followers.

Starting Over

In the first days of digging in it was pretty obvious we needed to eventually break out of the fragmented product lifecycle and move into a comprehensive and intuitive user-centered product that both redefined the PlayOn brand and which could keep up with other major brands in the playing field (Chromecast, Apple TV, Hulu, Netflix, Sling TV, etc…)

But there was a limitation on our end and that was precisely how to achieve these broad goals. So I set out to connect with the users themselves.

I sent out a survey,something of an ethnographical study into who our audience and ideal users were, (that’s what you get working with an anthropology major). You can read UX best practices and research all day, but in the end, I wanted to understand what a day in the life of a user looked like (to a degree). What were their viewing habits? What kinds of content did they want to watch? Movies or ongoing television series?  Did they want something similar to Netflix robust browse experience with tons of content being fed to them, or did they want to be able to favorite shows and be able to always pick up where they left off? There were so many facets to this, never minding the raw tools we were providing, to understanding what would make a good product. So I asked them. We surveyed 7,000 users, with something like 50 logic-based survey questions (the follow up questions would shape to previous answers). And people talked. A lot.

Our next priority became sifting through the mountains of data we had just begun to collect. Here are some sample questions and feedback:

1
3 4 5 6 7 8 9

*With a generated word cloud/listing of most-mentioned terms in user comments:

10

 

 

As you can see, I asked all sorts of questions. I was curious. I needed to understand our user base. I walked away with a slowly-forming picture in my head of what our product needed to be; users who sitting in cool, earth-toned living rooms after dinner with a glass of wine, most wanting to watch a television show- something short and sweet after a long day (meaning we needed a more romantic, darker UI that wouldn’t be too jarring like Netflix’s old fire-engine red splash screen…). Users were curious but picky. They wanted recommendations and a social sense of “what other people around them were watching”, but overwhelmingly wanted to be able to favorite (what we now call ‘subscribe’) to their favorite shows so they could easily get back to them. But not even just a queue of favorites, a living subscription agent that could check every hour and see if a new episode had aired and then tell them at work that not only was a new episode out, but we had just recorded it for them and queued it up commercial-free. Our users were incredibly vocal.

So, with this wealth of knowledge in hand, I began working on several iterative prototypes. I will highlight the main desktop UI, but keep in mind the entire product suite encompasses mobile, various TV UI’s for Roku, every major gaming console, Chromecast, desktop players and even various browser plugins.

This wireframe changed many, many times as we continued iterate, experiment and, most importantly, talk with users. Ultimately, here is some of the wireframes that I used for beginning the main app build with the design/dev team:

Main-App-Wireframe Support-flow

 

Obviously this product is much more complicated a beast then that; several dozen main body views, various states for the record queue, alerts, modals, cast controllers, etc. But at it’s heart I concluded that there are three main aspects to the new PlayOn; User Driven content (like personal media and recordings), consumable content (any show or movie or video clip on the web), and the Record Queue, which let’s them check the progress of media they are recording- much of it automated. It’s like a magical kitchen that knows your favorite dishes and always has them ready, always has something new for you to taste, and there’s always a wonderful smell coming from the oven. Delicious.

With this all in mind, we began to design, all the while carefully crafting a new brand identity as well. (Read more about the current website redesign here).

 

Iterations

I think it’s fair to say that wire framing is the easy part. The problems always seem more cut and dry; UX itself is a puzzle of varying and ever-shifting pieces, but ultimately they fit together somehow. Styles on the other hand are a pain. Especially when your project lifecycle lasts months or even a year or more. And for a major rebrand and product relaunch, it can easily last over a year with a small team.

Below are some of the early iterations of our product design. As with ever large project, the moment you design one thing, you realize there are a hundred unique use cases that need specified and detailed out, (what if a user clicks this button, but isn’t logged in, and there’s a problem with their internet connection? What are we supposed to show?). By the time you’ve sufficiently thought through the magnitude of UX problems, every designer comes to resent their first couple drafts for being too inflexible and graceless. Here you go:

Redesign V.1 (not really, but let’s jump to here)

2

1,png

 

Looking back, the colors are washed out (was going for soft and warm…), the two column view in the center panel is scrunched and additional info looks terrible. The record queue errs on the side of “clean” so much that it looks empty. Also, hate the font.

So, went back to the drawing board, talked to some users… and that brings us to-

 

PlayOn V.2

4

3

 

Litter better here. Based on feedback, I’m keeping the strong hero imagery front and center as much as possible. It’s eye-candy and re-enforces the powerful ‘content-forward’ aspect of browsing.

Also while this design is in process, I am pushing the company away from it’s 10-year history of $40-$60 one-time pay business model towards a freemium model. Benefits being; mass exposure. If you have a great product and it’s designed with the user in mind, get it out to as many people as possible. There are great ways to reinforce upgrading, but limiting your user base will always limit your ability to grow (note: I might very well change my mind on this based on new evidence). This model appeals more towards the younger (and much more numerous) demographic, who also, it seems, are entirely against the idea of cable and traditional media consumption.

Here we go with V.3

5

 

No long tirade here- but feedback tells us the single-column center view is a major improvement. More open space = flexibility. Some content has lots of description, some has little. This let’s us accommodate. Also, starting to play with user-prompted information. Accordions for more info while browsing, filters up top. More iconography throughout the app to make it less word-heavy.

 

And let’s just jump to the final release V.4

6

10

11

7

9

8

 

With this final (for now) iteration, we are putting graphics front and center. Content in the center body is entirely fluid, stripping away lines and section breaks that box content in. We’ve also implemented the new branding in (an entire other post in-and-of-itself) which is much more mature, ‘trustworthy’ and in-line with user’s expectations of a media brand/identitiy. The UI too is still ‘soft’ without being washed out; structured without seeming too boxy or UI-forward. I’ve tried to bring in organic elements too, with header backgrounds for views and folders with no artwork, and adding in additional logic for when we can find artwork thumbnails but no high-res background artwork to fill the space. Every single view is consistent in it’s UI, but unique in it’s hero image artwork. It makes one feel like you’re heading down a familiar but every changing adventure into the world of internet television.

This doesnt even begin to touch on the intuitive features we’ve evolved; smart messaging and notifications to alert you to new content and seamless troubleshooting, support that meets you where you are and UX elements that are hidden until you need them- then magically springing to life.

Content for another post.