Redesign the concept of interactive TV.
We started in small groups researching the types of video content provider’s are out there such as Comcast, Netflix, Amazon Prime Instant Video, Hulu, AppleTV, etc. We came to the conclusion that there was room for improvement for all the platforms.
From there we were given the freedom to start sketching ideas about what the interface for this service would look like.
Below is my first sketch.
After our first class critique, I received positive feedback on my use of a carousel, but that the rest looked like an “excel spreadsheet” or table layout. I decided I wanted to go in a different direction getting some inspiration from some of my classmates’ designs. Below is my second sketch.
I needed to figure out how the interaction between different devices would be and what their roles are. I decided that the smartphones, tablets and laptops would be used as remotes or as smaller viewing devices. Television or Computer monitors would be purely viewing devices.
This is my preliminary sketch for the interface for the smartphone as a remote.
I did a site flow to get an understanding of the flow of the interface to make sure that I made pages that connected and didn’t lead to a dead end.
My professor facilitated a white boarding exercise during the middle of our project in order to pull out the good concepts from all of our ideas in order for everyone to be able to incorporate them into their design, with everyone’s design still being incredibly unique.
The main points I chose to focus on from our white boarding process were:
- Consolidated library: to have a single access point to content on all platforms (Cable TV provider, Netflix, Amazon Prime, Hulu, etc.)
- Using a mobile device (smart phone or tablet) as a remote and as another viewing screen
- Have the ability to come back to whatever you were watching previously: resume function
- Have the ability to view other profiles, share your profile, and have multiple profiles on one system
- The freedom to pick and choose what you want watch, a la carte subscriptions
Areas of my design that were unique and I chose to focus on were:
- Subscription based content viewing system
- Scheduled or routine based viewing
- Viewing across multiple devices (TV monitor, laptop/desktop, tablet, smartphone)
- Voice or Face recognition sign-in feature
After our second class critique, I wasn’t entirely sure of the direction I wanted to go with the interface so I basically just recreated my sketch in Illustrator.
After our next class critique, my professor liked my use of color, but that my sizing for my fonts were all too big. So in my next interaction I made those changes and I started to develop the foundations for more of the pages for the interface.
After our next class critique, my professor liked the flat design, but encouraged me to think differently about the signin process and suggested that I include thumbnails of the content that was ready to watch now or that could be resumed. In this iteration I also began to design the interface for the remote device. I realized that there was overlap with the signin and decided to tackle that in my next iteration.
Not a whole lot changed on the main viewing device interface, I ended up adding a little bit to the remote device interface.
I decided that the dark grey background washed out the rest of the colors so I changed it to black in this iteration. I spent a lot of time on this iteration working on getting as complete of a design as possible. I hadn’t quite figured out how I wanted the subscriptions page to look or how exactly the remote device interface was going to work. But at this point I was very pleased with how my design was turning out.
This is the last iteration I did for my course. I had, for the most part, completed my vision for the design. The first portion are all the interface components of the viewing device interface, followed by the components for the remote viewing device interface.
For my final presentation in the class, I came up with a scenario for the interface.
Individual parts of my presentation:
Setting Content to view at a later date: