Challenge Overview
Challenge Summary
Welcome to the IBM - SiBM Cognitive Catalyst Portal UI Prototype Challenge! The goal of this challenge is to create the HTML5 Prototype for our new Cognitive Catalyst GitHub Community Portal using the provided storyboards from our last challenge.
As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
We look forward to seeing your UI prototypes!
Project Overview
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.
Challenge Requirements
The purpose of this challenge is to develop an HTML5 (Angular) prototype based on the provided storyboard designs. We will provide the wireframes and all storyboard screens to help you understand the workflow.
We are looking for the prototype to be created using AngularJS. This app will be designed to be a responsive desktop app (1280px). The app will primarily be used on a desktop, but it should be be responsive as well (only desktop is in scope for this challenge, mobile is out of scope and will be built in the future).
Also, your prototype must work properly in all the required browsers.
Required Screens:
We are looking for the following screens to be included in the UI prototype:
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) My Dashboard
Goal: Provide a user with a dashboard that is personalized for them.
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/
Key Prototype Requirements:
- We would like to ensure prototype is responsive and it must leverage Angular.
- Test in all the required browsers (see the list below)
- Ensure your submission is clear of validation errors and warnings (HTML, CSS, JS).
- You are provided with a wireframe and storyboards.
- Screens/layout in wireframes and storyboards might be different, wherever the screens/layout are different, storyboards takes precedence - please follow that! (Wireframe should be helpful with the flow).
Technology Requirements:
- JavaScript
- HTML5
- jQuery 1.11
- AngularJS 1.2
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use JQuery (MIT License) for this contest.
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use JQuery (MIT License) for this contest.
Browsers Requirements:
- Firefox, Safari & Chrome Browsers.
Challenge Inputs:
Storyboard files
Wireframe files
NOTE: Screens/layout in wireframes and storyboards might be slightly different, wherever the screens/layout are different, storyboards takes precedence - please follow that! (Wireframe should be helpful with the flow).
Final Submission Guidelines
The complete prototype that covers all screens.