Challenge Overview
Welcome to the "FAST!! 72Hours - IBM - SiBM Support Easy OnBoarding UI Prototype Challenge Part 2". The goal of this challenge is to update the Support Easy OnBoarding HTML5 Prototype. Your prototype updates must follow the current structure and use best practices for coding responsive applications. This challenge is the second prototype challenge and is focused on completing the prototype and any updates that are needed.
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. As this challenge is a FAST challenge we will allow documentation updates during final fixes if needed.
Challenge Task Overview
The main task of this competition is to update the provided HTML5 prototype based on the provided storyboard designs and noted requested updates. We are focused on the Desktop but optimized for Tablet view for this challenge. It is very important that you implement and use Bootstrap correctly so we can update the mobile views in a future challenge.
Tips for Success: Ask questions early and get the Copilot or PM's feedback is very important for everyone to be successful in UI Prototype challenges.
Key Requirements
- DO NOT BREAK any layout/functionality from the currrent prototype.
- Focus on overall Bootstrap/great code structure.
- Replicate the design of the approved Storyboards (PSD Files) for all required pages
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- This application will be a responsive HTML5 application - it will need to be scalable for different devices (mobile devices, tablets, and desktops), but for now, focus only on Desktop and Tablet version.
- Ensure you submission clear of HTML and CSS Validation error and warning.
How to use the wireframes
- Use "Final Wireframes!" folder and run index.html
- Close the sidebar by clicking the "x" button on the left side of sidebar for bigger display on the wireframes
- The wireframes create dynamically so all interactions will be happen in single screen
- Make sure to use the navigation/menus in the screen to navigate to another screens (no scrolling please)
- Each screen will be appear one by one according to their respected flow.
- Got any questions, please ask in forum!!
Screen Requirements
General Requirements :
- There are a lot of interactions with CATHY (Client Agent To Help You!) character in the application, please check the wireframes and spec details to get an idea where CATHY needs to be appear.
- CATHY image must have a different container in your code where the client can easily edit the avatar appearance, the current avatar used in current design will be replaced with new avatar design.
- We will have CATHY animated by a 3rd party - the key thing now is to make sure we have her in a <div> or easy access to add the animation.
- IMPORTANT!! There are differents quiz questions in each step, please read "Quiz_Gamified_Onboarding_TopCoders.pdf" for specific questions needs to be provided in each steps.
- There are 5 steps/interactions available in this applications, they are :
* Step 1 - Obtain an IBM ID (Exist)
* Step 2 - Sign Up for My Notifications (Not Exist)
* Step 3 - Access the IBM Support Portal (Not Exist)
* Step 4 - Register for Service Request (Not Exist)
* Step 5 - Passport Advantage (Not Exist)
- In this challenge, we need you to create Step 2 to 5.
Challenge Requirements and Updates:
01. Navigation Issues
- Open the prototype for the first time and try to access the "About" page via top navigation, the link won't work, please fix the link so it will works normally anytime user try to accesss it.
- Make sure when clicking the navigation items all the pages are the correct size/fit the requested browser size correctly (we want to limit scrolling based on the most used browser/screen size - see 02. Remove Cut Off Screens
- Change text for the 3rd step in the footer area from "Service Portal" to "Support Portal".
02. Remove Cut Off Screens
- We want to reduce some content height in several pages in the prototype to minimize some scrolling areas in the content, please update the spacing/margin for the following pages so no vertical scrollbar needed (check "cutoff screens.doc") :
-- "About" page, updates the spacing/margin for each content so the vertical scrollbar not necessary anymore
-- "Two Video" page, updates the spacing/margin for each content so the scrollbar not appear anymore.
-- "Multiple Video" page, updates the spacing/margin for each content so the scrollbar not appear anymore.
-- "Quiz Questions" page, reduce the content height so the modal window can appear without scrollbar.
-- "Sign Up for an IBM ID" page, updates the spacing/margin for each content so the scrollbar not appear anymore.
-- "Certification Prompt" Modal window page, updates the spacing/margin for each content so the scrollbar not appear anymore.
-- "Certificate" Modal window page, updates the spacing/margin for each content so the scrollbar not appear anymore.
-- "Game" Screen, updates the spacing/margin for each content so the scrollbar not appear anymore.
New Screen Requirements:
01. Step 1 - Obtain an IBM ID - Step completed Pages
- The existing prototype already support the first step for the onboarding process, which is "Obtain an IBM ID".
- The "Obtain an IBM ID" contains several navigation and behaviour that already created in the existing prototype, which are:
-- Introduction tab (complete)
-- Videos tab, in two and many video screens, please fix the typo from "Vedio title" to "Video title" .
-- Quiz tab, please add the following interaction screens :
---- If user choose correct answer, the current apps will directly bring user to the next questions, this is wrong interaction. What we need is to show the user first whether their answer is correct or not (green for correct and red for incorrect answer) and then they can navigate to next quiz questions via "Next" button.
---- Whether user choose correct/incorrect answer, they always be able to see explanation of the correct answer for the question. Please change the selection form into paragraph with some explanation text (check wf for the buttons change and complete interactions).
-- Sign Up tab (complete)
-- Step Completed, please revise the following interaction :
---- When user click "Next" link, the current apps will show complete steps screen, this is incorrect interactions. The apps should bring user to the "Step 2 - Sign Up for My Notifications Pages"
---- In this screen, there should be an "Answer" link appear beside the "Next" link, and when it gets clicked, it should show modal window with all answer from previous quiz questions (check wireframes for content and layout and reuse existing storyboard to create this screen).
02. Step 2 - Sign Up for My Notifications Pages
- Replicate all 4 interactions from Step 1 for this pages but with different content:
-- Introduction tab
-- Videos tab
-- Quiz tab, content needs to use can be found in "Quiz_Gamified_Onboarding_TopCoders.pdf".
-- Sign Up tab
-- Step Completed, same screen but CATHY now should be appear in 2nd steps in the chair (step 1 and 2 in green, others in gray).
03. Step 3 - Access the IBM Support Portal Pages
- Replicate all 4 interactions from Step 1 for this pages but with different content :
-- Introduction tab
-- Videos tab
-- Quiz tab, content needs to use can be found in "Quiz_Gamified_Onboarding_TopCoders.pdf".
-- Sign Up tab
-- Step Completed, same screen but CATHY now should be appear in 3rd steps in the chair (step 1,2,3 in green, others in gray).
04. Step 4 - Register for Service Request Pages
- Replicate all 4 interactions from Step 1 for this pages but with different content:
-- Introduction tab
-- Videos tab
-- Quiz tab, content needs to use can be found in "Quiz_Gamified_Onboarding_TopCoders.pdf".
-- Sign Up tab
-- Step Completed, same screen but CATHY now should be appear in 4th steps in the chair (step 1,2,3,4 in green, others in gray).
05. Step 5 - Passport Advantage Pages
- Replicate all 4 interactions from Step 1 for this pages but with different content:
-- Introduction tab
-- Videos tab
-- Quiz tab, content needs to use can be found in "Quiz_Gamified_Onboarding_TopCoders.pdf".
-- Sign Up tab
-- Step Completed, same screen but CATHY now should be appear in 4th steps in the chair (all steps in green).
-- Once user reach this screen, show complete "04_2_step_completed.png" and redirect user to certificate screen which already available in existing prototype.
06. Certification Page (completed - available in existing prototype)
07. Game Page (completed - available in existing prototype)
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.
- You are allowed to use JQuery and Bootstrap framework for this challenge.
Browsers Requirements
- Chrome is a priority
- Latest Firefox, Safari & Chrome Browsers
- IE10++ (can be left for final fixes)
Documentation Provided
- Wireframes, Storyboard and All necessary flow documents can be found in forum!
- Documentation :
* Five basic onboarding tasks_For TopCoders_Verified 7_23_15.doc, show all 5 detail STEPS in the apps
* WF Winner feedback_Topcoder copy.doc, contains documentation about interaction change needed for your prototype.
* Quiz_Gamified_Onboarding_TopCoders.pdf, quiz questions for each STEPS
* Terminology_For_GO.pdf, dictionary and idiom explanation related to the apps.
* End of Support Q.pdf, content for Helpful Linkss
- Base Prototype
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.