I joined Dijit Media to lead the design efforts for the NextGuide media discovery platform for broadcast and streaming content. What we originally referred to as Social Guide was spawned from the company’s original product, the Dijit Remote for smartphones and tablets.
The remote was a tool, without much opportunity for financial growth. It was a paid-app, which is where revenue came from, so it had a rather low cap. Dijit needed a new plan for growth.
Dijit's initial plan was to expand the remote from smartphones to the iPad, and to incorporate a discovery guide to go along with the local listings feature in the current app. (The example below is not my work!)
But the new Chief Product Officer had a bigger idea for the product, which was less about the remote and more about the content. He called his idea “a TV Guide on steroids.” It was to be a rich media guide, but one designed to show users accessible content tailored to their preferences with influences from their social graph.
I was initially brought in to do some visual design concepts, but that quickly evolved into lead UX designer and co-product designer.
Finding the best thing to watch on TV or streaming online was difficult for most users. Either the content wasn’t relevant, or it took too long to discover. Finding out if something was available on streaming required going to multiple sources.
I needed to understand who we were creating the product for, other than anyone who watched live TV or Netflix. I needed to identify those that had the most potential for using and evangelizing the product. I needed to write user stories, their goals, and possible scenarios. Fortunately, Dijit had a good sized community of users we could survey. We also surveyed as many people as we could in our networks and compared that against available market data. From that, I crafted these personas:
This is one of the personas we utilized:
And his scenario:
Using the surveys and the market research data, I was able to identify the goals of our users. These were prioritized based on recurring patterns, and how well they aligned with current business objectives.
After settling on our users and their primary goals, I mapped out the possible paths and the features through the app. With a solid understanding of who we were designing for, and the problems we were trying to solve for our users, we began ideating on possible solutions.
To help users quickly distinguish between movies and TV shows, I chose to use landscape images for TV (matching the aspect ratio of TV screens), and portrait images for movies since they looked like movie posters. (Positive response from users validated this assumption, and the idea would carry over into all future iterations.)
There were two primary directions we explored. The first was a magazine-like approach, sort of like a traditional TV guide, which displayed most of the relevant information up front.
The other was a less conventional approach, showing less information, but a lot more content options.
I made high-fidelity mockups of the two directions to put in front of test subjects to which they responded to best.
Early tests showed us that users preferred to see more content options than content information, so we shelved the magazine concept and dove into the tiled view concept.
In this "tile" view, users could see quite a few options for shows they could “watch now.”
The content initially shown to the users was defined by a combination of user preferences and availability. Users would see what is on now (or about to air), what’s new to streaming, and what their friends are watching or interacting with. Categories could be accessed by swiping left or right, or directly through the menu. Users could add or remove categories based on genre or even custom interests.
We did a few iterations in an effort to know just how much visual information users needed to see up front, and how much was too much. The rest of the information that users might want to explore was placed on content cards that could be accessed by tapping on a show tile.
An additional feature would allow a user to save their search keyword as an alert and/or a custom category. For example, if a user searched for the keyword “chuck norris,”, the user could get an alert whenever shows or movies featuring Chuck Norris. They could also jump to that custom category, or “interest.”
One of the final stories we addressed was the social features integrations, and designed the Social Pane. This allowed users to see which of their friends from their preferred social network were in the app, so they could connect to discover something good to watch.
We launched the app as “NextGuide” to critical acclaim from several highly respected sources–including Robert Scoble.
Skeuomorphism design style was still the mantra at Apple, and demands for FX heavy graphics were high, which influenced the final visual design of the app.
Through our analytics, we found that we had more users trying to interact with NextGuide on smartphones than tablets. It was apparent that we needed an iPhone app, and decided on a mobile-optimized web versions for other devices.
This was about the time rumors of Apple ditching skeumorphism for flat design started surfacing. I took advantage of this to make a sea change in visual design to bring the products in line to current design trends, and improve the product.
The biggest UI change was also to have the biggest–and positive–impact on the business. I moved the main Action buttons to the forefront, placing them on the show tiles, rather than one level down on the show detail card. This dramatically boosted user interaction; we saw a huge uptick in users saving titles to Favorites and Watchlists. We also created our “Remind Me to Watch” feature, which grew out of the “set alert” action we had in the app, and proved to be the most valuable feature of the platform–for users and the business.
As for the website, what we began calling the WebGuide was designed to work and look beautiful on all devices, regardless of viewport size. With more than six breakpoints, there were few devices the site did not display nicely on.
Using MixPanel and Optimizely, we were able to A/B test features, and design elements for both the iPhone and WebGuide on mobile & desktop, and optimize accordingly.
The new modular design developed for the iPhone would make updating the iPad app quick and easy, but before that could happen, Dijit was acquired by Viggle. Unfortunately, the acquisition put on hold many of the product updates we had in the pipeline, and almost all support on the apps stopped as members of the team were re-deployed throughout the new organization.