Challenge Overview
Welcome to the TCO15 UI Prototype Championship "Social Jukebox - Music iPhone App Prototype"
This contest is for TCO15 Onsite Finalists competing in Yogyakarta, Indonesia ONLY.Please do not register or submit if you are not one of the 6 finalists.
Topcoder has been given the opportunity to work with one of the best agencies in the world, Razorfish. For this exciting challenge Razorfish is looking for the Topcoder Prototype community to help rapidly prototype the Social Jukebox application that will be used in their London offices.
Right now in New York City Razorfish is hosting their customer Tech Conference and Blake Walles will be presenting your UI Prototypes on stage Wednesday September 23!
In this challenge we will not be creating every screen and every page for production. We will be creating prototype code (using best practices) to showcase the design, specific interactions and essentially allow users to "test" if the application makes sense to them (or does it need additional design iterations). Many Topcoder clients are looking to "rapidly" prototype designs for quick user testing and iteration and now you have a chance to showcase your skills!
Final Submission Guidelines
About the Application
The Social Jukebox Application is a fun way for employees and guests of the Razorfish office to play their favourite music over shared speakers in different "zones" or areas of the Razorfish office. The application will use i-Beacon technology to access employee and guests music playlists and pull their favourite tracks from Spotify and other music applications to generate an office playlist.
Users will have the opportunity to be "guest" DJs and help shape the track order and overall playlist, and Razorfish guests will be given VIP status and their music will be moved to the front of the playlist.
In addition to being a fun social jukebox, the application will alert Razorfish front desk employees when a client has arrived at the office and will relay meeting room information and times to the office guests.
The application will also track the mood or "sentiment" of the employees who are in a particular zone of the office displaying whether they are in a good mood, sad mood, upbeat, or the general emotion associated with the type of music that is being played. This will display for each zone in the office.
We just completed this initial design (fellow TCO15 Prototype Finalist Chekspir was the designer) and now we are looking to create a quick prototype!
Challenge Details
- For this challenge you only need focus on Mobile layout for iPhone.
- We would also like to view the application using Chrome browser
- All possible linkable pages should link to each other.
- For your submission you just need focus on spec stated below
- Provided storyboard created on iPhone 6 size (Retina and 750px), your submission need support other size like iPhone 4, 5 and 6+ using best practices of Responsive Web solution.
- We should be able to trigger the navigation to get back to the Dashboard, logout etc (to reset the flow)
- Pay attention to all small details, let us know if need clarifications.
- Match similar fonts in your submission. Use "Helvetica” and “Rockwell" fonts (see downloads)
- Application will be developed as Hybrid application. We are open to any framework suggestions like AngularJS, Ionic Framework, etc
- Also you can use open source javascript library like jQuery.
Files Downloadable
Download Storyboard from attachment
Helvetica for Razorfish.zip - Helvetica Font
Rockwell for Razorfish.zip - Rockwell Font
app-icon.zip - App Icon
UI Prototype Page Requirements
00. Application Icon
- We need your prototype support the App icon, so we can add to homepage. Refer some these sites for instruction how to add the icon to homepage:
http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7
http://gravitybrake.com/2012/06/04/three-steps-to-a-fullscreen-web-app-on-ios-safari/
- App Icon need create for these following sizes:
- 114px by 114px iPhone and iPod Touch (Non Retina Display)
- 57px by 57px iPad (Retina Display)
- 144px by 144px iPad (Non Retina Display)
- 72px by 72px
01. Splash Screen
01-Social-Jukebox-Splash.jpg
02-Social-Jukebox-Splash-Loading.jpg
03-Social-Jukebox-Splash-Loading2.jpg
- This screen by default will be appear every time "Social Jukebox" is active in user's device.
- Gradient background image need created as css properties
- Social Jukebox logo placed in the center of screen
- We need display loading animation for the 3 dots
- You can show equalizer in the bottom of screen as sequence rotating images with hide/show
02. Dashboard Screen
04-Social-Jukebox-Dashboard.jpg
- This is a key screen for the UI prototype
- Dashboard Page Title need to be editable
- Left menu need open the left sidebar
- In the right side there’s a Preference icon and can be dead link
- In the main content area of Dashboard you need create swipeable slide. Read more details below:
Left Side Navigation
- User can open the navigation using the top left hamburger menu (screenshot: 48-Social-Jukebox-Main-Navigation.jpg)
- You just need set the left side navigation moving left, no need move down like storyboard look
- When sidebar opened, display the logo on top of screen, and these following menus:
-- Dashboard
-- Playlist
-- Library
-- Calendar
-- My Profile
-- Notifications (Show number indicator in the right side)
-- Settings
- Show active and inactive state for related menu
02. Dashboard Carousel
- Dots pagination need reflect current slide
- Set different style for active and inactive slide
- Need to set every slide Title to be editable
- You need create the 3 slides with these slide requirements:
1st Slide (Album Art)
04-Social-Jukebox-Dashboard.jpg
- “DJ Mode” button in the left side can be dead link
- Entire Album Art + playing bar + profile thumbnail can be single image, but need to be tappable and take user to
- Make sure the image look sharp!
- “Playlist” button in the right side can be dead link
2nd Slide (Overall Mood)
15-Social-Jukebox-Dashboard-Slide2.jpg
- Entire chart and the legend can be image based.
- Make sure the image look sharp!
3rd Slide (Most Played Songs)
16-Social-Jukebox-Dashboard-Slide3-Most-Played.jpg
- For this screen you need create fluid columns
- But all thumbnails with number indicator can be single image
- Make sure the image look sharp!
Dashboard Tab - Music Library
08-Social-Jukebox-Dashboard-Slide-Actions.jpg
- Tab content need to be scrollable
- Album art + the icon can be single image
- Album Text Information need to be editable
- In the right side there’s icon for swipe interaction
- User can drag each row and show additional area for “Add to Queue” and “Hide this Song” buttons. (09-Social-Jukebox-Dashboard-Add-to-queue.jpg)
- Both menu can be dead link
- Tap “Add to Queue” need show up the “Song added” pop up and set the color to green colored (10-Social-Jukebox-Dashboard-Song-Added-Notification.jpg)
- Thanks button inside the pop up need dismiss the pop up
- After added to queue, you need show the icon in the right side.
- Blur effect can be image based, make sure it look sharp!
Dashboard Tab - Search
12-Social-Jukebox-Dashboard-Search-Bar.jpg
- No need for this interaction - out of challenge scope
Dashboard Calendar
13-Social-Jukebox-Dashboard-Calendar.jpg
- Use image based for date in the left side of each row
- Other text format need to be editable
- Each row need to be tappable and can be dead link
- fyi: arrow need always placed in the right side
Dashboard Favorites
17-Social-Jukebox-Dashboard-Favorites.jpg
- Basically this screen using similar layout and function like 02. Dashboard Tab - Music Library
- Match the content like storyboard look
- Show different action buttons for Favorites page (18-Social-Jukebox-Dashboard-Favorites-Actions.jpg)
Dashboard Notifications
20-Social-Jukebox-Dashboard-Notifications-icon.jpg
- You need show number indicator for the tab icon
- Date need to be editable with date format like storyboard look
- Each row need to be tappable and can be dead link
03. Playlist
22-Social-Jukebox-Playlist.jpg
- User landed on this after tap Playlist menu
- Arrow menu placed in the left side that will take user to Dashboard
- Search menu placed in the right side. Click this button can be dead link
- Below the header bar, there’s 3 tabs for “All Areas”, “Office Favorites” and “Filters”
All Areas tab
- Album art can be single image,
- Text information need to be editable
- User thumbnail and the icon can be a single image. This can be dead link
- fyi: in the 1st row, there’s an icon for equalizer. This can be dead link
- User can do swipe right to see additional action buttons for “Buy this Song” and “Add to favorites” (24-Social-Jukebox-Playlist-Actions.jpg)
- Both menus can be dead link
- User can scrolling to the bottom of page while header and tab remain fixed on top of screen
- Tap on thumbnail need take user to (04. Currently Playing Screen)
Office Favorites Tab
26-Social-Jukebox-Playlist-Favorites.jpg
- Basically this screen is similar like All areas tab
- But there’s heart icon in the right side
- User can also swipe from the right side
Filters Tab
27-Social-Jukebox-Playlist-Filters.jpg
- This is Filters tab look
- Match the row content
- Show different icons for some rows
- Set different styling for active (green colored) and inactive state (red colored)
04. Currently Playing Screen
28-Social-Jukebox-NowPlaying.jpg
- This is Currently Playing look and feel
- Arrow menu in the left side take user back to Playlist screen
- Notice there’s heart icons in the right side of header bar
- We need the DJ mode and playlist buttons that placed in the left and right to be clickable
- There’s slide pagination below the action bar
- Each row need to be editable and should be scrollable
- There’s input in the bottom of screen with Send button. This input field can be fixed at the bottom of screen
- Swipe the content area will take user to Lyric screen (29-Social-Jukebox-NowPlaying-Lyric.jpg)
- User can scrolling the page content, whole content can be image based
- Need toggle function to change the heart color into red (30-Social-Jukebox-NowPlaying-Love.jpg)
- After that, pop up show up (31-Social-Jukebox-NowPlaying-Love-Confirmation.jpg)
- Tap the Thanks button need hide the popup
- Favorite icon placed in the right side with the Preference button.
- Tap the menu button need change the icon color into green and swipe down the equalizer setting screen (32-Social-Jukebox-NowPlaying-Equalizer.jpg)
- Equalizer screen can be single image based
05. Profile Screen
39-Social-Jukebox-Profile.jpg
- User landed on this page from the Profile menu
- Arrow button placed in the left side
- And the edit button in the right side
- Whole profile screen can be image based
- But the “DJ Status” button can be separated links.
- Tap the “DJ Status” button need trigger the pop up (39-Social-Jukebox-Profile.jpg)
- All image can be single image, text need to be editable
- Thanks button need close the pop up
- Create tab function for “Music”, “Friends”, “Favorites” and “Preferences”
- Each row need swipe function that will show additional “Send Message” and “Delete”
- Both can be dead links
- Create tab content for “Friends” (42-Social-Jukebox-Profile-Friends.jpg)
- Each row need swipeable
- Other tabs for “Favorites” and “Preferences” can be dead link
06. Admin (DJ) Screen
35-Social-Jukebox-NowPlaying-Dj-Mode.jpg
- Admin (DJ) Screen will show up for every page inside your prototype, when user changes the orientation to landscape view
- The user will see the tutorial screen the first time being used (36-Social-Jukebox-NowPlaying-Dj-Mode-Information.jpg)
- Tapping the thanks button will hide the information
- The entire DJ screen can be single image based
- Comment button can be a dead link
- Equalizer button can be a dead link
Client Priorities (The items that are considered highest prototype priorities)
- Creating quick "rapid" prototype using quality and efficient HTML/CSS3
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/HTML5
- Commenting: You can leave out code commenting during the TCO Championship
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code - reviewers will accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
JavaScript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Safari Browsers on iPhone 6 (Landscape & Portrait View)
- Chrome Browser on Chrome
Entries must be your original work, and must not infringe on the copyright or licenses of others. All standard TopCoder Terms, TopCoder Policies and TCO15 Rules apply to this contest.
Internet
- You are allowed full access to the internet
- You are allowed to research open source solutions and libraries
- Do not collaborate with others during the challenge - your submission must be your own effort.
What to Submit
- Your working prototype files
TCO15 Eligibility
To be eligible for this challenge, you must meet the eligibility requirements listed on the Contest Details page, along with the following additional eligibility requirements:
- You must be listed as a finalist for the round you are competing in.
- You must be present at the start of the Round.
- You must be a TCO15 Finalist and you must be competing onsite, in person, during the TCO15 Championship Finals.
- You must abide by the rules of the onsite championship rounds.
- You must not cheat. All designs submitted must be your original work created solely by you and for the purpose of this competition.
- You must be in good standing with TopCoder with no disciplinary actions against your account.
Placement and Winner Selection
- All submissions from the Prototype Competition Rounds automatically pass screening.
- After the challenge the Review Panel will review the submissions
- There will be no Appeals Phase in the onsite challenge.
- The UI Prototype Challenge will have an additional “Admin Scorecard” that the TCO Admin will use for final assessment of the prototype reviews, prototype code and prototype visual presentation.
Overall Champion Winner Selection
The winner of the Prototype Competition will be the Onsite Prototype Competitor with the highest placement given by the Review Panel and TCO Admin during the Championship Round. The champion will be announced on Tuesday, September 22 during the awards ceremony.