IBM - SiBM Cognitive Catalyst Portal Screen Design Challenge

Challenge Summary

Welcome to the IBM - SiBM Cognitive Catalyst Portal Screen Design Challenge!  In this challenge, we are looking for you to design the screens for our new Cognitive Catalyst GitHub community.  The Cognitive Catalyst Portal will be for all community members including IBMers, and IBM Partners.  Overall, these designs should foster a collaborative and engaging experience which inspires open source development.

For this challenge, we need you to create screen designs for the new Cognitive Catalyst Portal based on the wireframes from our last challenge. 

We look forward to seeing your creative screen designs!

Round 1

Round 1 will focus on the following screens for the new application:

1) Landing page
2) Projects Page
3) Project Details Page
4) Learn / Community Standards 
5) Profile Page

NOTE: If anything is unclear, please ask for clarification on the forum and we will be happy to help!

Round 2

In Round 2, you will need to include all Round 1 screens (updated based on checkpoint feedback).  For Round 2, you must also include all the remaining functionality described in the project documentation, including the following screens:

1) Landing page
2) Projects Page
3) Project Page
4) Learn / Community Standards 
5) Profile Page
6) News, Blogs and Events Page
7) Wish List 
8) Forums
0) Launch Icon

Challenge Description

The purpose of this challenge is to design screens for a new portal for the Cognitive Catalyst GitHub community.  The wireframes for this new app have been provided, and additional details about the screens are provided below.

Project Background Information

Cognitive Catalyst is an open source community for the development of Watson platform extensions and tools to enable and accelerate the development of cognitive applications.  The project is hosted on GitHub and is accessible by everyone to use and collaboratively create open source software that interacts and enhances the functionality of the Watson services.  IBM has initiated the project and will turn over ownership to the community.

Design Guidelines

- The screens designs will be for a new responsive app: the Cognitive Catalyst Portal.
- Screen size: This app will designed to be a responsive desktop app (1280px). The app will primarily be used on a desktop, but it should be be responsive and should work well on mobile devices as well (640px).  
- Important: For this challenge, we only need you to create screens for the desktop size!  We would love to see a proof-of-concept example of a mobile version of one or two screens as well if possible, but the primary focus should be on desktop size.
- All screens and functionality described in this challenge spec and the wireframes must be included in your submission.  

Required Screens:

We are looking for the following screens to be designed:

0) Launch Icon:
- Please make sure to design a simple app launch icon (64x64) for this new application (see: http://www.ibm.com/design/language/framework/visual/iconography)

1) Landing page
Goal: easy discovery of new community activity
- News (blogs, social) – anyone can submit a topic to be posted, moderators will review
- Featured projects (active/ trending) projects
- Project list
- Search bar 
- Login: use GitHub for logging in 

2) Projects Page
Goal: Finding projects categorized by the various Watson services. (https://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/services-catalog.html)
- Number of projects for each service
- Number of developers

3) Project Details Page
Goal: Discern more information about a specific project. Find similar projects. Interact with Project Maintainer (owner) for help, improvements, and other topics of interest.
- Project descriptions
- Installation instructions
- Watson service
- Project statistics (pulls, commits, branches, favorites, etc.)
- Feature recommendation/ request

4) Learn / Community Standards 
Goal: Understand the community rules and standards for contributions, guidelines and user roles, and licensing. This is only editable by the moderators. But the community can create a forum to vote and change the guidelines and moderators. 
- Community Standards: https://github.com/cognitive-catalyst/cognitive-catalyst/blob/develop/CommunityStandards.md
- Contributing: https://github.com/cognitive-catalyst/cognitive-catalyst/blob/develop/contributing.md
- Structure: https://github.com/cognitive-catalyst/cognitive-catalyst/blob/develop/Structure.md

5) Profile Page – Developer landing page
Goal: Discern more general information about an individual developer, including if they’re an IBM, IBM Partner, top contributor, etc..)
- GitHub username
- Photo (could source from GitHub if needed)
- Cognitive Catalyst contributions (if any)
   - Number of projects
   - Forums posted
- Support of Open Badges for developer recognition (http://openbadges.org/earn/)

6) News, Blogs, and Events Page
Goal: Anyone can submit a topic to be posted, moderators will review
- Similar content to the News, Blogs, and Events section of the landing page

7) Wish List 
Goal: Provide a list of items which the community would like to see developed as another project on Cognitive Catalyst. Users will able to be submit ideas to the list but will not be posted without moderator approval.

8) Forums
Goal: Forum page for engaging all users in discussions about their various projects, and sharing tips and best practices. Moderators will be able to remove unsolicited content.
- Improvements / feature recommendations
- Project Issues
- Tips/ best practices
- Community Improvements/ Suggestions
- Moderator elections

User Roles:

Moderators will be set up in the system – Three levels of access are needed
Goal: Divide three different levels of editable access based on user’s role
- User – base level access to change their own profile information, and post on forums
- Project Maintainer – medium level access to edit their profile and project(s) page
- Moderator – top-level access to edit every project page, forum, wish list, and ability to filter and then post community wide updates from any user or project maintainer

Helpful links:

- Cognitive Catalyst Landing Page: https://github.com/cognitive-catalyst
- Cognitive Catalyst Overview: https://github.com/cognitive-catalyst/cognitive-catalyst/blob/develop/README.md
- Watson Services: (https://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/services-catalog.html)
- IBM Design Language: https://www.ibm.com/design/language/

IBM Design Guidelines

All submissions MUST follow IBM Design Language, please refer to the client website: 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.
-- Creativity is also welcome!

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: http://www-03.ibm.com/able/guidelines/web/ibm508wcag.html

Documentation Provided

- Wireframes: Contains the basic ideas for screens, content, and the flow of the application

Target Audience

- All community members including IBMers and IBM Partners.

Judging Criteria

- Overall Design and User Experience (UX)
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design
- How well you capture the requirements in this challenge spec and from the wireframes.

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 original 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.
-  See more information about Final Fixes.