Project TV Shows

An experimental website that keeps me posted on the latest episodes of the TV shows I'm following.

Feature Image Feature Image Feature Image

I've been watching lots of TV shows every week, and often times I have to keep checking if there are new episodes today and whether the online watching site has upload the episodes or not. It came to my mind that maybe I can make myself a website that shows all the information I need.

Design Process:

  1. First, I quickly mocked up a screen in Adobe Illustrator to have a clear view of what it looks and what are the interactions.

  2. Knowing what the interactions will be like, I can start finding resources that can help me achieve that. I used Swiper to build the swiping structure of the website, and used Material Design Lite to set up the card views.

  3. Now I need to fill in the contents. I use Google Feed API to get information from my Episode Calendar RSS feed. With that I can have all the show names, season & episode information, and even the episode title for each day.

  4. After the information filled in, I need to grab some images for the cards and background. I used themoviedb API to get poster images and backdrop images for each shows.

  5. Now that the visual parts are done, I can simply grab the video link for the episodes and embed the video to my website using iframe.

  6. I also added a feature that adds a "NEW" badge to the cards that have updated the videos to the latest episode. I did this by using YQL to crawl update information from the video source website. Another badge is "WATCHED" badge, which I did it by using JQuery-Cookie to remember if I have already opened an episode or not.

The above process took about 8 hours give or take, but the actual time-consuming part is to fix the bugs and fine-tune the detail interactions and transitions. I always feel that it's not good enough and find new ways to do it.

Anyway, the results were great! Now I can just open up the website to see which shows are having new episodes today, I can check if it's updated, and actually watch the video with one click.


© 2015-2016 Youwen Design. All rights reserved.