My Interaction Design Instructor, Thomas Girard, created an opportunity for me at the beginning of my Mobile Application Design class in my last semester at Emily Carr. He said,

 

To be honest, I was resistant. I left the television industry years ago to pursue design for several specific reasons and had no intentions of revisiting it… until this opportunity. Coming out of the experience I’m realizing now how much potential there is at the intersection of interaction design and television. This project gave me a chance to realize that and has opened up my understanding about the importance of moving away from traditional views of how we access television and towards new ways of accessing it (through our devices, wearables etc).

Television, TV shows, TV guides, subscription services . . . The topic of television is not small, to say the least. My first goal was to find a gap in the industry, figure out what people were looking for, and then create an app to meet the need. But just thinking about it wasn’t going to cut it. The industry is far to big and the possibilities vast. So, I decided to start out by doing some mind mapping.

The highlighted mind mapping trajectory (shown in above right image) likely looks a bit out of whack to the average person, but to me it makes perfect sense. The reasoning behind it comes from my undergraduate degree in Media, Information, and Techno-culture (essentially the study of how society uses and interacts with technology). The words “Alone Together” are directly taken from the title of a book written by Sherry Turkle. The book studies the bizarre nature of human interaction in present day: people alone in a room, but together with others—virtually connected through their devices. From this came the word “isolate,” and by asking the question “how do people isolate themselves when using the technology (television)?” I arrived at the answer “binge watching.”

 

After taking some time to look over and think about the different trajectories my mind mapping had revealed, I found the topic of “binge watching” to be quite unique. The questions starting brewing in my head:

The questions were good, but the answers were even better than I expected: I found answers to problems that I didn’t even know existed in the first place. People were excited when I told them about my concept and offered numerous suggestions about how they would want to use it, and what they hoped it would do. I found myself wishing I had the app the following weekend when I had some free time to kill. But though I knew it would help in the area of television, I still needed to find out: What exactly would it do?

 

In order to figure out exactly what problems the app would be solving, I knew I needed to sort through my ideas and the input that I received from others. As such, I decided to do a card sort. The three images below detail the stages of that card sort and how it evolved.

After spending some time organizing my ideas into lists and figuring out what my target users’ problems were, I started seeing the big picture more clearly. I decided to do another card sort at my next class to organize the flow of the app so that it was clearer in my mind but also more concrete on paper so that I could move forward and start paper prototyping. Below you’ll see the results of that card sort.

Through mind mapping, research, card sorting, and user flow diagrams, what did I discover and decide about the concept?

 

Through mind mapping, research, card sorting, and user flow diagrams, what did I discover and decide about the concept?
Bingers can’t seem to find the right shows to watch in their free time (without spending hours beforehand doing research).
They wasted time not only searching through show titles that they didn’t care about, but also going back and forth between the different providers. For example, “I don’t want to rent this movie if Netflix has it, but closing iTunes and opening Netflix to search for it is a huge waste of time, so I’d rather just spend the money on iTunes.”
Often bingers set out on a plan to watch as much of one series as possible. But providers don’t outright tell you how much time it will take to watch a show in its entirety and pulling out a calculator is a waste of time.

 

An app that carries the user through the process of finding the right show to watch or binge through. It will:
Help users figure out how much time they have to spend
Filter through genre lists and aggregate all of the user’s favourite genres together
Allow users to search specifically for a show and find out which providers offer it
Remove the agonizing back and forth process of searching through providers
Allow users to only display the shows they have time for right now
The neat thing is that bingers don’t have to use all of these features at once. They can use just one of these features or combine them as they’d like to create custom searches that will not only save them time, but also money!

 

The topic of paper prototyping has long undergone debate. Some push back on paper prototyping, saying, "why use paper when we have new, faster tools that allow us to prototype quickly on our computers?" While this may be true, our instructor wanted to make sure that we were able to create, test, and draw conclusions before dipping into elements of visual design. It reminded me of my gymnastics training years ago when we were pushed to "master the basics, then the back flips."

The first round there were many changes to be made. First of all, not all users wanted to do all of the options I had provided. Only some wanted to calculate their hours, others already knew how many hours they had. Others cared about genres, while some just wanted to skip and see what would come up. The same scenario for providers came up. So, I created screens that would allow users to pick whether or not they needed those options or wanted to skip them altogether. This allowed for a quick sprint through the app or a slow detail-oriented experience.

Some users were saying that they already knew the show name or the actor name and just wanted to search specifically to see how much of the show they could watch. This ended up being a pretty common request so I added in a screen with more variables when it came to what the user wanted to watch. The screen started with a list of genres and after three rounds of testing just that screen, I landed with three sections: “pick your genre,” “use a keyword,” or “skip and be spontaneous.”

A paradox I encountered while user testing was that half of my users wanted to have a login where they could save their filters and shows, while others didn’t want to add a step to the process and just wanted to get on with the app. This problem was solved by storing these “favourites” inside the phone rather than on a server. This kept a login/signup feature out of the picture but still allowed users to save filters they liked or specific shows they liked.

Throughout the user testing process I was able to gain insight into more features that my users wanted, features they didn’t want or need that I could take out, and features that I could improve or make more clear. I also learned that sometimes asking questions was important, while at other times staying silent and watching the user flutter around the app was more beneficial.

Finally, I was ready to move on.

I landed on bingetv because it seemed to be the name that resonated with my users the most. The word “binge” is catchy in just the way I want it to be, and adding the word tv on the end helps to clarify what the app is for. I also came up with a slogan to go with it: “your go-to couch time app.” I toyed with the idea of making the app called “couch time,” but in landing on bingetv, I still wanted to keep the couch time in the name.

 

Pictured below are my wireframes. These wireframes were made after user testing was done on my paper prototypes. As such, I avoided spending time making wireframes for pages I did not need. Still, I decided to user test on these wireframes. I printed them out, tried the flow of the app with several users and then made changes. Testing continued as I moved on to my high fidelity mockups.

This is the last stage of my development thus far.

After working for several days to produce these high fidelity mockups, and completing some basic user testing (before bringing it over to Pixate), I’ve realized something very important: user testing needs to continue once the visual design is in place. Interface design might be overlooked as a stage where the user testing has already been completed and it is the last stage before development, but this is not true.

My post-ui testing revealed that several of my ui elements did not allow for seamless user flow and created some confusion. While my paper prototypes had perfected the flow of the app, I'll need to come back and perfect some of the visual elements (for example, the status bar at the bottom might be exchanged for dots to signify completed pages--more testing is needed in order to establish this change). Still, this is a starting point and I am happy with the way that the branding translates into the app. The following two images show the visual design of BingeTV as it stands to date.

I have begun bringing this into Pixate. Since I'm most familiar with InVision and have created countless prototypes using that tool, I have decided to learn Pixate for this project. The reason for this is that while InVision is great for prototyping screen-based apps, I want to be able to create transitions and animations based on single elements/layers. Thankfully my knowledge of Adobe After Effects transfers over a bit, but the learning curve for Pixate is steep so I have quite a few pages to animate still. Nonetheless, I look forward to putting out some GIFs and possibly a live mockup once that process is complete. Watch this space for updates!

*This is an ongoing project.