Challenge Summary
Welcome to the Razorfish "Social Jukebox - Music iPhone App Design Challenge". In this challenge, we are looking for your help to create the best UI/UX for our Jukebox Music application that targetted for iPhone devices. Provide us your creative ideas and your great design skills to build this social sharing music application.
We are very excited to provide this cool design opportunity to the TopCoder Design Studio Community - a fun way to showcase your design skills!
Round 1
00) Presentation Screen!
01. Landing Screen
02. Dashboard Screen
03. Playlist Screen
04. Currently Playing Screen
05. Profile Screen
Round 2
00) Presentation Screen!
01. Landing Screen
02. Dashboard Screen
03. Playlist Screen
04. Currently Playing Screen
05. Profile Screen
06. Admin (DJ) Screen
07. Alerts & Notifications
08. Artist Detail Screen
09. Additional Screens
Challenge Timeline, Prizes and Rolling Checkpoint:
The challenge schedule can be found below :
- Challenge Starts at 14:30 EST 10 September 2015 (Start 1st Round)
- Checkpoint Review will start at 09:00 EST 14 September 2015 (Checkpoint Submission Deadline)
- Challenge Ends at 09:00 EST 18 September 2015 (End 2nd Round)
We are offering 8 main prizes slot in this challenge:
1) $1500
2) $1000
3) $500
4) $250
5) $250
6) $150
7) $150
8) $100
Project Overview
Topcoder has been given the opportunity to work with one of the best agencies in the world, Razorfish. For this exciting design challenge Razorfish is looking for the topcoder community to help design their Social Jukebox application that will be used in their London offices.
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 wether 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.
The challenge goal is to create a very cool music application that able to:
- Identifies user through beacons to locate where people are in their office
- Save and Identify their most played tracks from iTunes, Spotify, etc.
- Creates a social playlist based on who is in a particular zone
- Allows employees to compete to become the office "master DJ" through a gamification element
- Enables clients who visit the office to become VIPs and play their preferred music choice when waiting for their host
- Syncs with monitors in the office to determine what is playing, which employee is topping the charts, etc.
- Provides data to management - e.g. the Finance team appears particularly melancoly today
Use Case:
- Once the app is installed in a user's mobile device, it scans through your albums (including Spotify if logged in) and prioritises each song based on the play frequency and play date. Afterwards syncing your preferences with the the apps service.
- This app will use a location service from i-beacons placed in different zones of the office that will detect when a user enters/leaves a specified zone. Upon entering/leaving a zone...the App will notify the user with an alert saying, "you are in the creative zone" etc. The playlist will be generated from all the linked devices in that zone.
- When user mobile connected to our beacon, the beacon then will sync and look at the most played/liked song from the playlists on the user phone and add them to the centralised playlist for the zone.
- Playlists would then be based on the likes of the people in that room. Personal tastes catered to.
- The app would create a smart playlist based on the users in the zone, and would remove repeitition, and create a dynamic playlist. etc.
- We are open to some suggestions for enhancement feel free to think of other creative functionality for this app. What other social aspects could be added to this app to make it fun for users to interact with? Creative ideas will help set your submission apart from the others.
- The app can be used for clients as well that enter the location/zone - For instance, when key clients enter the office - the app could alert the reception staff, or the meeting rooms, let meeting organisers let them know that the client had arrived. Client music overrides other choices. Put VIPs to the top of the tree.
- Extension/enhancement use case for the app:
-- The app could also be connected to the display monitors for each floor or zone. This could lead to a personalized experience for a client who enters the office. Not only will they have their music play, but the display monitors could play a custom showreel for that client as well. . When no client is there, the playlist "sentiment" or data could play different showreels on the display monitors that match the users mood in the zone.
-- "Personalised Office Visit":
--- Another extension case - sentiment/mood analysis running off the back of the playlist selection e.g. the delivery team are happy because they're playing these kinds of songs whereas the admin team are unhappy because X.
--- Dashboard like the FitBit - show the results for each zone over time e.g. Friday afternoon spike for happy songs.
- What is the playlist played over? Speakers.
-- Localised jukebox would then play to a specific set of speakers in that zone.
-- The prototype/proof of concept used Bluetooth speakers with raspberry pi as transmitter (cheaper option for the prototype).
- Is there any master control?
-- Yes we would like some of these features but don't want to over-complicate it for an admin role.
- We want people to contribute to the social fabric of the office.
- Those that contribute the most - might get control for an hour to manipulate the playlist. Reward them, get to be "Super DJ" for a bit. Social currency - earn points or badges to be the Super DJ.
- We don't want to be too prescriptive about how we do this, so use your creativity and explore the possibilities!!
Branding Guidelines
- Design screens for iPhone 6 portrait display (750 x 1334 px)
- Follow our branding guidelines document for color, design style, references, etc
- Use only Fonts that being mentioned in our branding documents (Helvetica and Rockwell) or something similar with it.
- We only need 8 screens plus the presentation screen
- Pick/design what you think will "showcase" this application. You can create alternative screens to the one's listed.
Design Considerations
- The Social Jukebox Application is for Razorfish, so your design will need to follow the Razorfish brand. Please use the provided brand assets and guidelines for your design concepts to ensure that your design works with the Razorfish brand.
- A logo mark for the Social Jukebox is not required for this design challenge, but we encourage you to explore an application logo idea that works well with the Razorfish brand.
- Music applications are rich in visuals and album art. Make sure to utilize this aspect to make your concept visually engaging. Explore unique UI treatments. Use smart typography, and most importantly..have fun with this one! We look forward to seeing your designs.
Screen Suggestions :
Design a storyboard of screens that show your Social Jukebox concept. This is a fun concept, so we're looking for ideas to make your Social Jukebox concept unique. We will provide a few screen suggestions for you to explore, but it is up to you to showcase your design skill and concepts. We're open to additional ideas and user experiences around this application concept, so the only limit to this challenge is your imagination!
00) Presentation Screen!
- Presentation Size = 1920x1080 (16:9 Ratio) - It must be this size!
- We need to quickly take your designs and show it to the audience!
- Spend more time on your presentation screen as its the first thing we will show the audience!
- See attachments of great presentation screens!
01. Landing Screen
- A visually attractive screen that introduces the user to the Social Jukebox
- This screen by default will be appear every time "Social Jukebox" is active in user's device.
- Create a simple logo for the "Social Jukebox". Something simple and clean that does not distract from your screen designs, You won't be judged for your logo creation, just a simple graphic that can be blend with your overall layout.
- This screen will only appear for a second or two, so it needs to be engaging and hence branding the apps purpose
- What additional elements need to be appear in this screen? Loading Bar? Client copyright text, etc? Show us your creativity.
02. Dashboard Screen
- Explore a dashboard concept for this application that allows a user quick access to their music library, what's currently playing on the Social Jukebox, overall mood or sentiment of the music being played in a zone, daily calendar with meeting information, alerts & notifications, stats around "most played" and "office favourites", tracks or artists that the user has favourited, etc.
- The mobile dashboard is going to be key to this application. What are the key navigation needs? What should be the priorities from this page? Remember a dashboard is quick information (and visual!)
- What makes sense to be on the dashboard? (keep it simple)
03. Playlist Screen
- Apps will look at the most played/liked song from the playlists on your phone and add them to the centralised playlist for the zone.
- Show the master playlist for the Zones
- It also should listed favourite song from external apps, save and identify their most played tracks from iTunes, Spotify, etc.
- Enables clients who visit the office to become VIPs and play their preferred music choice when waiting for their host (maybe override current playlist with client device when they are in the zone location)
- Show playlist that becomes hits in specific zone location, the apps will creates a social playlist based on who is in a particular zone (combine and compare each user playlist and also count their selection), When enter to particular office area, show playlists based on the likes of the people in that room. Personal tastes catered to.
- Ability to see details of each song in the list
- Ability to like any song from the playlist?
04. Currently Playing Screen
- Show what is currently playing in a visual way. Track time, time remaining, what's next on the playlist, album cover art,
- The user name who's music this is pulled from, ect.
- Show what song being played in particular zone where user located.
- Next/Previous Song that will be play after current song?
- Lyrics? Artist/album image preview? Etc?
- Who's playlist did the song come from in the zone? Who likes the song in the playlist? Who else has this song on their device?
- Make sure the screen is engaging and show us your creative idea for this screen!
05. Profile Screen
- Users of the application will have a profile screen containing their profile information such as name, position, favourite
- artists and music tracks
- A User can edit their own Profile
- A User needs to quickly see playlists associated with them
- Preferences on how they like to be notified, location preferences, time zone preferences, etc
- The gamification area in the app to engage user to use the app
- Show current user progress to reach Master DJ screen
- What kind of gamification experience that you can suggest to us? Like any song and get some points? What other "sticky" gameification ideas can we work into this app?
06. Admin (DJ) Screen
- VIP users can be DJ for the day and have control over the playlist
- Create a fun and interactive DJ UI experience
- Cross Fade, turntables, sound effects, messaging, shout outs? What cool functionality can we give our DJ's?
07. Alerts & Notifications
- Alerting the user when their music is being played, when and where their meeting is taking place
- When a user enters/leaves a specified zone - it triggers an app saying, "you are in the creative zone" etc,
- Show alert and notifications in this screen
- Gameification messages when points earned or levels achieved.
08. Artist Detail Screen
- Detailed information about the artist being played. Perhaps links out to where a user might be able to purchase that artist, song, or album
09. Additional Screens
- Have another idea for a great feature for this application? We'd love to see it!
NOTES :
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Your design should work with the Razorfish brand. See provided branding guidelines
References/Inspiration to explore :
- Inspiration One
- Inspiration Two
Target Audience
- Internal Employees and Razorfixh Professional Client.
Judging Criteria
- How well you design the mobile application concept!
- How well you design this application for iPhone.
- How well you applied our branding guidelines in your design
- Cleanliness of your graphics and design.
- User interface design ideas
Submission & Source Files
Preview Image
- Create your preview image as one (1) 1920x1080 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
- Also include a copy of your preview image in your submission file
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.