Challenge Overview
Challenge Summary:
Welcome to the IBM - Quick Quack UI Prototype Challenge! The goal of this challenge is to create the HTML5 Prototype for a mobile-based application using the provided "Quick Quack" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
NOTE: This challenge will leverage Bootstrap (http://getbootstrap.com/getting-started).
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 will allow documentation updates during final fixes (but still required).
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop an HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements:
- We would like you to use bootstrap.
- Test in all the required browsers (see the list below)
- Ensure your submission is clear of HTML and CSS Validation errors and warnings.
- 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).
Required Pages:
Login:
Reference: 00 Login.png
- User will be able to enter the username and password.
- Please make sure the first letter is not capitalized.
- When a user enters wrong credentials, we show the error screen 01 Login Error.png.
Dashboard:
Everyone Problem
Reference: 02 Dashboard - Everyone's Problems.png (mobile) / 07 Everyone's Problem.png (desktop)
- This screens lists all the problems.
- Clicking on “Search” icon at the top expands to show the search text field as shown in ‘03 Dashboard - Everyone's Problems Search.png’
- At the bottom, we have a “+” icon, we show the modal window as in ‘11 New Problem.png (mobile) / 08 New Problem.png (desktop)’.
My Problems:
Reference: 05 Dashboard - My Problems.png (mobile) / 04 My Problems.png (desktop)
- Initially, we would like to show an empty “My Problems” screen (04 Dashboard - My Problems - Empty.png (mobile) / 03 My Problems - Empty.png (desktop)).
- By default, please show this tab as selected.
- Once a user clicks on the “+” icon shown at the bottom of the screen, we show the modal window as in ‘11 New Problem.png (mobile) / 08 New Problem.png (desktop)’ and we assume user has created a problem and show many problems under “My Problems” as shown in 05 Dashboard - My Problems.png (mobile) / 04 My Problems.png (desktop).
- This screen lists “My Problems”, same as everyone’s problem but will have additional options.
- In mobile view: On swiping a problem to left (06 Dashboard - My Problems - Swipe.png) will reveal additional options as shown in 07 Dashboard - My Problems - Actions.png.
- Tapping on “delete” will show ask for confirmation if they okay to delete the problem as shown in “09 Delete Problem.png (mobile) / 05 Delete.png (desktop)”.
- Tapping on “close” will show ask for confirmation if they okay to delete the problem as shown in “10 Close Problem.png (mobile) / 06 Close.png (desktop)”.
- They will be able to switch on/off crowd access to a problem. thy should be able to toggle this option!
- In desktop, we also show a way to filter through the problems based on their status (All, Open, Closed, Starred), you can just allow these links to be clicked and change the views (each view will contain same problem.
Confirmation Modal:
Reference: Mobile [09 Delete Problem.png / 10 Close Problem.png] / Desktop [05 Delete.png / 06 Close.png]
- For prototype, tapping “Yes” / “No” will just hide the modal window.
New Problem:
Reference: 11 New Problem.png (mobile) / 08 New Problem.png (desktop)
- They will able to give a name and description to the problem.
- Clicking on “Create” will take them to 12 Problem Details.png (mobile) / 09 Problem Details.png (desktop) screen.
Problem Details:
Reference: 12 Problem Details.png (mobile) / 09 Problem Details.png (desktop)
- At the top, we have the back button that takes the user back to the “Dashboard” screen (05 Dashboard - My Problems.png (mobile) / 04 My Problems.png (desktop)).
- Below the title, we have a collapse icon that will collapse the problem / description as shown in 13 Problem Details Hidden.png, clicking on the expand icon in 13 Problem Details Hidden.png will reveal the details again (this is applicable only for mobile).
- Edit: Shows the edit modal window as shown in 15 Edit Problem.png
- Delete: This will ask for confirmation if they okay to delete the problem as shown in “09 Delete Problem.png”.
- Close: This will ask for confirmation if they okay to delete the problem as shown in “10 Close Problem.png”.
- Email: Make it a dummy link for now.
- Show Techniques will take the user to “20 Brainstom Technique - Teleportation.png”
- Under Answers, we show the list of answers that were received..
- User will be able to swipe each answer to the left to view additional options (16 Manage Answers.png):
- - - Delete: Will show a confirmation, similar to how a “Delete Problem” is handled..just need to change the name to “Delete Answer” instead of “Delete problem.
- - - Demote: A user will be able to demote an answer, clicking on this will move that particular answer to the very bottom in the list of answers and change its appearance to grey as shown in 19 Answer Demoted.png.
- - - Drag Icon: A user will be able to drag an answer up or down the list of answers and re-order them based on what they think is more appropriate!
Edit Problem:
Reference: 15 Edit Problem.png
- This is same as New Problem screen, just that problem name and description would already be filled in as shown in 15 Edit Problem.png.
- In desktop: We don’t have an edit problem screen but it looks same as 08 New Problem.png (desktop), just that problem name and description would already be filled in.
- Clicking on “Save / Cancel” will just hide the modal window.
Add Answer:
Reference: 17 Add Answer.png (mobile) / 09 Problem Details.png (desktop)
- In mobile: This is shown as a modal window.
- In desktop: This is shown as textbox above all the answers.
- Clicking on “Save” in this view will save the answer under that particular problem, it would be great if you can show something functional.
Brainstorming Techniques:
Reference: 23 Brainstom Technique - Teleportation.png, 24 Brainstom Technique - Reverse Brainstorming.png, 25 Brainstom Technique - Superpowers.png, 26 Brainstom Technique - Exaggeration.png
- Users will be able to move between each of the techniques by clicking on the left / right arrow shown on either side of the brainstorming technique title.
- Clicking on “Add Answer” will show the modal window and clicking on save in “Add Answer” (27 Add Answer.png) modal will add an answer under that particular technique.
- Owner of the problem will be able to decide whether to include this answer to problem details, under each answer in mobile view they will have a button “Include” clicking on which will include the answer under problem details.
- Answers included using these techniques will have the appropriate solid colored line in their left.
- User will be able to swipe each answer to the left to view additional options (16 Manage Answers.png):
- - - Delete: Will show a confirmation, similar to how a “Delete Problem” is handled..just need to change the name to “Delete Answer” instead of “Delete problem.
- - - Demote: A user will be able to demote an answer, clicking on this will move that particular answer to the very bottom in the list of answers and change its appearance to grey as shown in 19 Answer Demoted.png (mobile) / 10 Select Demote.png (desktop).
- - - Drag Icon (3 vertical dots shown to the right of each answer): A user will be able to drag an answer up or down the list of answers and re-order them based on what they think is more appropriate!
Specific HTML/CSS/JavaScript Requirements:
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 in both Mac and PC environments.
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.
- UPDATE: Client prefers Angular JS or Ionic as opposed to JQuery (so please avoid JQuery).
Browsers Requirements:
- Latest Chrome, Firefox
- IE 10+
- Safari & Chrome Mobile Browsers.
Documentation Provided:
- Storyboard Screens, PSD, Wireframes files can be found in forums.
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.