Interlochen Media -- Apple TV UI Code Challenge

The nonprofit Interlochen Center for the Arts is a recipient of the National Medal of Arts and the only organization in the world that brings together: a 2,500-student summer camp program; a 500-student fine arts boarding high school; opportunities for hundreds of adults to engage in fulfilling artistic and creative programs; two 24-hour listener-supported public radio stations (classical music and news); more than 600 arts presentations annually by students, faculty and world-renowned guest artists; a global alumni base spanning eight decades, including leaders in the arts and all other endeavors. For information, visit Interlochen online at www.interlochen.org.

This tvOS will be used by Interlochen as a central location to showcase the quality and diversity of their programs. In addition, the app will help promote the arts by allowing users to view videos of live performances and listen to recordings of concerts. We are looking forward to  your participation in this challenge!

This is the 2nd challenge in this series. In the earlier challenge, we built a starter project (provided in the forum assets) using Apple's library of templates. We would now like to modify the design as per the updated client inputs. For reference, we are currently running a design challenge  for the iOS version of the application which has comprehensive details on the design guidelines. 

Requirements

Refactor the existing codebase to match the wireframes in attached file apple_tv_comp.pdf. Please make the flow of the application match this as much as possbile using Apple's TVML templates.

• For content please use the demo data provided in the code (JSON) or create more demo data from Interlochen's website and append to the given files.
• The feature screen (Showcase Template in the .pdf) should display side scrollable featured content along with selectable catagories
• The selectable catagories should navigate the user to a catagory screen displaying content of that particular catagory (Performances, Mini Lessions, Radio, etc).
• Selecting media from the catagory screen should take you to details about that media which can include chapter (segments of the media) or one selection to play (Nutcracker Screen).
  • ���Description, Name and Length should be present on this screen (existing screen contains the needed details).
• Legal should just be a screen with placeholder text.
• Examples of Media (beside live radio which is already working in the code, everything should be sample data):
  • ���Videos
  • Live Radio (should be playable in the given prototype)
  • Podcasts

Along with creating templates for the application, we would like cosmetic enhancements to TVML templates as long as they follow the flow and layout (as close as possible) to the wireframes provided. We are looking for a clean application that provides some uniqueness that follows Interlochen’s branding:

• Nothing in the application can contradict Apple’s Apple TV Visual Guidelines

• Follow Apple’s Styles and Attributes documentation for TVML.

• Follow Interlochen’s Branding Guidelines (Interlochen_Graphic_Standards_2014.pdf). Here's a link to Interlochen's website for reference.

• Do not use colors outside of the included color palette (interlochen_web_palette.pdf) unless required from Apple to do otherwise

• All design enhancements (e.g. color, images, branding text, etc.) MUST be pulled from a configuration file in JSON format in the public folder of the client server code. You will create this file globally in the file structure and it will allow for easy changes to the look of the application.

• Do not use any stock photos, nothing should be used that is not on Interlochen website or provided in this challenge.

• Although this is not a design challenge, there needs to be an effort to add some forms of branding to the application. TVML offers little wiggle room for this and that is why we are including it here.

 

How to run provided codebase:

Client Server (interlochen-heroku):

• install nodejs

• install node package harp

• run harp server --port 9001 in the Interlochen-Heroku directory

• All code for the TVML server can be found in the public folder, you should not need to touch code outside of that folder.

Xcode Project (interlochen-appletv)

• Have latest release of XCode (7.2) and open “Interlochen AppleTV.xcodeproj”

• Run project Interlochen AppleTV in Simulator

  • Must run in a simulator since the server will be running on your local machine.

• There should be minimal, if any, updates to the xcode project.

 

NOTE:  1) The provided TVML application provides some start to the UI Prototype, reuse code as much as possible to construct the current design, but feel free to refactor/add as much as needed. Please use the sample data provide in stored JSON files, but feel free to create more as needed.

2) If you have any specific doubts on AppleTV visual guidelines or Interlochen graphic standards, please make sure to ask in the forums.

Final Submission Guidelines

 

• Maintain the file structure of the provided starter code
• All code in the tvOS application must be written in Swift
• All code in the client TVML server must be written in JavaScript & TVML
• The client server should continue to use the node package Harp to run and deliver static content.
• All code must compile against the lastest major release of tvOS and the client server must deliver TVML content with no errors
• Code should be well documented.
• Any alterations to the TVML templates that is not a defult of apple must be configurable by a configuration JSON file in the public folder of the client server (color, images, etc). 
• upload code with a .zip similar to how the starter code is attached.
• Provide a overview video of your submission along with a detailed documentation