IBM - SiBM YouMix Design Challenge

Welcome to IBM - SiBM YouMix Design Challenge! For this challenge, we are helping IBM design a Web application to help users manage Bluemix Demos. This site will be used to showcase Bluemix apps.

In this challenge, we are providing you with wireframes to help you understand the application and how it should work. We need you to create visual designs for the new application.

Design Note:
- You are highly encouraged to provide your own design ideas and solutions to this application beyond the provided wireframes.
- Please do not submit just a colored version of wireframes as they are meant to show you what we are looking for and explain the idea.
 - We are requesting a logo as part of this challenge, but that is not the key focus. Create a simple logo that doesn't distract from your application design

Round 1

Submit your initial design for checkpoint feedback
0. Navigation.
2. Homepage.
4. Details Page.
5. Search Results Page.
6. Upload Page.
7. Feedback Page.
- If you have time - Provide us with a click map for your design.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Round 2

Final design plus any Checkpoint feedback
0. Navigation.
1. Logo Idea.
2. Homepage.
3. Login & Register.
4. Details Page.
5. Search Results Page.
6. Upload Page.
7. Feedback Page.
8. Admin Menu Page.
9. Showcase Page.
10. About Page.
- If you have time - Provide us with a click map for your design.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Challenge Details
The goal of this challenge is to design the look and feel or our YouMix application. YouMix is an application that helps manage and showcase Bluemix demos.

Design Considerations:
We are looking for an aesthetically pleasing interface that is consistent with the IBM Design Language and has the look and feel of the Bluemix site (https://console.ng.bluemix.net/). 

- Focus on the user experience of each page and make sure each page has a complete flow.
- Give importance to the overall layout and think about how a user would interact with the content on the page.
- Provide a user flow/click-path, so we can see how the interactions fit together in the application (this helps the review process)
- DO NOT COPY the layout exactly as shown in the given wireframe; it is just a reference for content.

Branding Guidelines:
All submission must follow IBM Design Language
(if you haven't learned it yet - now is a great time!): http://www.ibm.com/design/language/index.shtml
-- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
-- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
-- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
-- Interaction:  http://www.ibm.com/design/language/framework/interaction/introduction.shtml
-- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge spec.

Accessibility:
- Make sure when you are planning your concepts you are also designing for accessibility.
- Since this application will be very visual (colors) - think about color blindness and the need for contrast/labels.
- You will notice the color accessibility suggestions within the IBM Design Language.
- Accessibility checklist.

Target devices:
- Desktop: 1280px width and height as required.

Supporting Documents:
- Wireframes (wireframe.zip).

User Roles:
App Publishers (must be logged in):
- Can add their project
---- links to content
---- description
---- upload a video or link to existing YouTube
---- add a Slack channel or email address.
- Pick from existing categories (and maybe add tags).

App Viewers:
- Can view apps by category and read app descriptions / watch videos.
- If logged in, can
---- like
---- comment
---- access code (external link or download)
---- talk to the team via Slack or email
---- flag as inappropriate.

Admin (must be logged in):
- Create the list of app categories.
- Pick certain demos as "endorsed" -- these will be in their own channel.
- Remove inappropriate apps.

Required Screens:
Please refer to wireframes before you start designing your solution.
0. Navigation:
Please refer to home.html
- We will have a left side navigation for this application:
-- Home.
-- Endorsed Videos.
-- My Showcase.
-- My Uploads.
-- History.
-- About YouMix.
- Also, we will have 9 categories:
-- Watson.
-- Mobile.
-- DevOps.
-- Integration.
-- Data Management.
-- Big Data.
-- Security.
-- Business Analytics.
-- Internet of Things.

1. Logo:
- The most important aspect of this challenge is the application user interface and experience (the logo is secondary)
- We would like you to attempt a new name and logo that goes with your design - do not spend the entire challenge on the logo.  
- We are looking for alternative names to YouMix - any suggestions?
- Create a simple logo that doesn't distract from your application design
- We would like the logo to be professional and conservative
- Follow the colors based on the Branding Information
- Designs must be created as VECTOR artwork so they can be resized without a loss of quality.
- Make sure your logo quality is not diminished when scaled up or down.
-- If the logo can be based on Bluemix logo that would be nice.
- Guidelines for what makes a good logo:
-- http://tannerchristensen.com/rules-for-logo-design/
-- http://justcreativedesign.com/2008/12/02/logo-design-resources/
-- http://www.smashingmagazine.com/2009/08/26/vital-tips-for-effective-logo-design/

2. Homepage:
Refer to home.html
- The User will be able to search for videos.
- The user will be able to filter & Sort videos.
- The user will be able to send his feedback when the user clicks on Feedback smiley at the side.
- Please show
-- Endorsed videos.
-- Newest Apps.
-- Popular Apps.
-- Suggested for You.

3. Login & Register:
Refer to home.html
- People can access the application to browse, without logging in, but to contribute (even to like/comment), they will need to log in with a Global IBM ID that's registered with Bluemix.
- Each user needs to sign in by filling:
-- IBM Intranet ID.
-- Password.
-- Forgot password link.
-- Remember me checkbox.
-- Login button.
If they do not have a Bluemix account, they should be able to sign up for one. We are likely to use the existing Bluemix login experience here, so you may not need to design something specific for this.

4. Details Page:
Refer to detail_page.html
- If a user clicks on a video from Endorsed Apps, he will be redirected to this page.
- User will be able to see:
-- A video and screenshots for the app.
-- Similar Apps & Featured Apps Widgets.
- This will be much like YouTube.
- For the publisher we need to show a Bluemix Badge, The badge looks like what's shown on this page: http://www-03.ibm.com/certify/certs/50001601.shtml. It should show up on the Details page, next to information about the publisher

5. Search Results Page:
Refer to search_for_movie.html
- You will see search results much like YouTube.
- If the publisher does not have a certificate, we should post a message on that page, saying how he can become certified:
-- http://www.ibm.com/developerworks/cloud/courses/getting-started-with-bluemix/index.html
-- So we should have a link to that on the upload page, along with a note that says something like, "Interested in becoming a certified Bluemix Developer?  See this page for certification requirements and training."
- Also Endorsed, My Uploads & History Pages looks similar to this page (endorsed.html, my_uploads.html & history.html), but with small differences.

6. Upload Page:
Refer to upload.html
- From this page user will be able to upload his video.
- User will need to fill:
-- Basic information.
-- Upload Content.
-- Tags.
-- Team.
-- Social Media.

7. Feedback Page:
Refer to feedback.html
- User will be able to add his feedback from this page:
-- Name.
-- Feedback.
-- Send as anonymous.

8. Admin Menu Page:
Refer to admin_menu.html
- This page will contain admin settings:
-- Categories.
-- Settings for each video.
-- Ban/Unban users.

9. Showcase Page:
Refer to showcase.html
- In this page, we showcase some videos and activities.

10. About Page:
Refer to about.html
- In this page, we will show this application is all about.

Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.

Target Users:
- The target audience for this application will be IBM employees plus other people who are interested in Bluemix:
-- App Publishers (these can be both IBM employees and non-IBMers, who have apps that they want to advertise).
-- App Viewers (these are likely to be mostly people outside of IBM, who are interested in learning about Bluemix.  They may be developers who may publish apps in the future or people who are less technical and just want to learn what’s possible with Bluemix).
-- App Admin (IBM employees).

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use are keys to the success as it must be engaging to users.

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

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.