Challenge Overview
Welcome to "IBM - SiBM Support Easy OnBoarding UI Prototype Challenge 1". The goal of this challenge is to create a responsive HTML5 Prototype for our Support Easy OnBoarding Application. The prototype must follow the best practices for coding Responsive applications. This challenge is the first prototype challenge to create the "Base" prototype that we can continue to develop with in future challenges.
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 develop a Responsive HTML5 prototype based on the provided storyboard designs. 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
- Focus on overall Bootstrap/great code structure.
- Replicate the design of the approved Storyboards (PSD Files) for all 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 is a lot of interaction with CATHY (Client Agent To Help You!) character in the application, please check the wireframes and spec details to get an idea where CATHY will be appear.
- CATHY image must have it's different container in your code where user 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.
01. Homepage Screen
- Reference Screens "01_1_homepage.png" and "01_2_homepage.png"
- Default page that will be appear every time a user opens the app
- This page show Introduction Scene to welcome user in the application
- Clicking "Get CATHY" button will trigger CATHY character to appear in the app (01_2_homepage.png)
- Capture the CATHY interaction when showing dialog box in the screen
- In order to start the application, user needs to called CATHY first and click the "Click on CATHY to get started" link to go to the next page.
02. Get Started Screen
- Reference Screen "02_get_started.png"
- In this screen, CATHY will guide the user about what they will see and experience in this apps.
- There are 5 steps/interactions available in this applications, they are :
* Step 1 - Obtain an IBM ID
* Step 2 - Sign Up for My Notifications (Out Of Scope)
* Step 3 - Access the IBM Support Portal (Out Of Scope)
* Step 4 - Register for Service Request (Ouf of Scope)
* Step 5 - Passport Advantage *Optional (Out Of Scope)
- CATHY will show to the user that they will need to go through eachs step, one by one, without skip any of it in order to experience full "Support Easy OnBoarding" interactions.
- Detail content for each steps can be found in "Five basic onboarding tasks_For TopCoders_Verified 7_23_15.doc" document and for this challenge, only "Obtain an IBM ID" screens creation needed in this challenge.
- Click "Let's Get Started" button will bring user to the first step of "Support Easy OnBoarding" journey.
03. STEP 1 Screens - Obtain an IBM ID
- Reference Screen "03_1_IBM_ID.png" and "03_2_IBM_ID.png"
- This is the first step in "Support Easy OnBoarding" interactions
- User will learn and get some tutorials on how to achieve/get IBM ID
- Notice the bottom bar section, it will show user experience journey progress in the apps. Make sure to keep the bottom bar section at the bottom of the screen for all devices (desktop and tablet)
- The progress bar at the center show in which steps user current position. Blue border circle show user current position.
- THe IBM orange circle/medals show how many medals that the user get so far, each time they finish "Step" in the apps, they will earn one medals. These medals can be use to play mini game at the end of the journey/apps (gamification mode)
- User can called CATHY anytime by clicking the CATHY avatar (03_2_IBM_ID.png)
- If user already have IBM ID, they can enter their IBM ID on the left side of the screen and the apps will bring user to the last step in the apps before they close the challenge/continue step (bring user to "06_welcome_back.png" screen)
- If user don't have IBM ID, they can learn and experience some tutorial in the apps on how to obtain an IBM ID, what they need to do is to click "New Customer" button.
- After user click the New Customer Button, they will go to next pages which will explain the user about how to get IBM ID, there will be 4 tabs in the next page which are :
* Introduction Tab
--- Reference Screen "03_3_IBM_ID.png"
--- Introduction sentence about what is IBM ID and it's purpose in the application
--- Click "Continue" to go to the next tab
* Videos Tab
--- Reference Screen "03_4_IBM_ID.png", "03_5_IBM_ID.png", "03_6_IBM_ID.png"
--- This tab will show videos tutorial about how to obtain IBM ID
--- If the tutorial have one video, show "03_4_IBM_ID.png"
--- If the video tutorial over and there are many related videos in the apps, show "03_5_IBM_ID.png"
--- If the video tutorial over and only two related videos available in the apps, show "03_6_IBM_ID.png"
--- Click any of the thumbnail video will play the video to user, click play again will replay the current video and clicking Continue will bring user to the Quiz tab.
* Quiz Series Tab
--- Reference Screens "03_7_IBM_ID.png", "03_8_IBM_ID.png", "03_9_IBM_ID.png", "03_10_IBM_ID.png", "03_11_IBM_ID.png"
--- After user see the introduction tab and videos tab, the application will test user knowledge via quiz series.
--- There will be a popup along with CATHY character to welcome the user to the quiz (03_7_IBM_ID.png), click Begin to start the quiz
--- There will be 4 questions asked in the quiz for Step 1, See the content for Step 1 quiz from "Quiz_Gamified_Onboarding_TopCoders.pdf" document
--- User will see each questions and able to track their quiz current progress/how many quiz the user has been taken via progress bar in the quiz screen (03_8_IBM_ID.png)
--- User will be able to select one of the answer in the quiz, and once they do this, the apps will show whether the user correct or wrong to answer the question.
--- If the answer is wrong show screen "03_9_IBM_ID.png" and show the correct answer in darker color. Notic there are two buttons "Explanation" (to explain the correct answer) and "Next" to go to the next quiz.
--- Once user reach the last questions and answer it (03_10_IBM_ID.png), the will be redirected to CATHY again "03_11_IBM_ID.png" that explain the quiz series is finished.
* Sign Up Tab
- Reference Screen "03_12_IBM_ID.png"
- After going through and experience all the tutorials help, user now ready to create the IBM ID.
- They need to click the "Sign Up" button to register and get IBM ID, the registration it self will be done in different application.
- Once they registered, they will open this apps again and login with their IBM ID
NOTES : There are another 4 STEPS (3 Mandatory, 1 Optional) available in the apps, but for now, Only this STEP 1 needed to be created.
04. STEP Completed Screen
- Reference Screens "04_1_step_completed.png", "04_2_step_completed.png"
- Each time user complete each STEP, there will be CATHY appearance that show the user current progress and visualize in "04_1_step_completed.png" screen.
- Screen "04_2_step_completed.png" showing that all the STEPS in the apps has been complete.
- In screen "04_1_step_completed.png", when user click Next button, it will redirect user to "04_2_step_completed.png".
- If user click Next button in "04_2_step_completed.png" screen, they will be redirected to Certificate Completion Screen
05. Certificate Completion Screen
- Reference Screens "05_1_certificate.png", "05_2_certificate.png", "05_3_certificate.png"
- By default, screen "05_1_certificate.png" will appear in this screen.
- If user click "Get Certification" link, they will be redirected to "05_2_certificate.png" screen
- In "05_2_certificate.png" screen, user will need to enter their name and email address so CATHY can send the electronic certificate to user email.
- Cliking "Submit" button will bring user to certificate preview "05_3_certificate.png".
- If user click "Close" button, it will redirect user to Play The Game screen
06. Play The Game Screen
- Reference Screen "05_4_play_game.png", "05_5_play_game.png", "05_6_play_game.png"
- So, user already finished all steps, they will earn 4 medals/token that can be spent in this screen to play mini games provided by IBM
- Show us simulation when user select the game in screen "05_5_play_game.png" and condition state where user play the game "05_6_play_game.png"
- After user play the games, it also means that user already reach the ends of their journey in this apps.
07. Welcome Back Screen
- Reference Screen "06_welcome_back.png"
- This screen will showed up everytime user logged in back after out from the apps.
- This screen will be appear if user enter the IBM ID in step one and when user click "Continue" button, it will redirect user to the last step where user currently in.
08. About Screen
- Reference Screen "07_about.png"
- Very simple screen to show application purpose.
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
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.