Challenge Overview
Challenge Task Overview
The goal of this challenges is to develop prototype for our new Support Easy Onboarding App. We already have the desktop version (needs to be updated) and now want to make the application responsive in both mobile and tablet. Please see more details below!!
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
- 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 new Portal will be a responsive HTML5 application - it will need to be scalable for different devices (mobile devices, tablets, and desktops).
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Please re-use as much as possible codes from our desktop version for mobile and tablet version.
- IMPORTANT!! DO NOT BREAK any layout or functionality in the existing prototype.
Background Overview
The Support Easy Onboarding Application is a customer facing application to help streamline the onboarding process for support services. Review the provided desktop prototype and design screens to learn how the application will work. The onboarding process will be gamelike to help teach customers how to sign up for various services. We are looking for the application design to be engaging, educational and of course fun to use. We want to give the user a sense of accomplishment through the onboarding process.
Task Requirements
Desktop Prototype Updates Requirements
During mobile screen design challenge, there are some updates happen in the layout content and flows which affected the desktop prototype :
- Disclaimer Modal window, remove the "Close" link and add "X" button at the top right of the white modal window.
- Helpful Links, Remove the content and follow content for mobile and tablet.
- Landing Page, Change text button "Get Cathy" into "Launch"
- Landing Page, Change "Click on Cathy to get started" link into "Want to get started?" once user click "Launch" Button and Cathy avatar appear.
- Steps 1 to 5, Remove Quiz tab from all steps (1-5) in the application, this section is no longer needed in the apps. Remove the videos from the desktop/web structure too.
- Feedback Modal window, Please updates the text area to be more smooth with the whole layout. Change the border to gray color, expand the text area size a little bit more larger, etc.
- Certification Sent Modal window, Updates the font to match with overall layout.
Mobile and Tablet Requirements
01. Homepage
- Mobile References "01-Disclaimer.png", "02-Home.png", "03-Menu.png".
- Tablet References "01-Disclaimer.jpg", "02-Home.jpg", "03-Menu.jpg".
- This is the default screen when user opens the application
- Notice the "Disclaimer" popup when user first time open the apps, make sure to include this interaction in your prototype.
- Clicking "Launch" will open CATHY avatar that will provide an brief introduction before user can start the onboarding steps (check desktop storyboard for CATHY appearance).
- In Tablet and Mobile version, the main navigation will be hidden and can be appear if user click the hamburger menu.
02. Lets Get Started Screen
- Mobile References "07-Get-started.png", "08-Start-tip1.png to 11-Start-tip5.png".
- Tablet References "07-Get-started.jpg", "08-Start-tip1.jpg to 11-Start-tip5.jpg".
- This screen will be appear after user click on "Want to get started?" link.
- CATHY will explain the flow of application from this screen.
- User need to read all CATHY instructions/explanation/tips before able to start the onboarding steps.
- "Let's Get Started" button will stay disabled until CATHY finishes explaining the apps flow, after CATHY finishes explaining the apps flow, then the button will be active and user can start the onboarding tasks.
03. Step 1 to 5 Screens
- Mobile References "12-Start-step1.png", "13-Step-1-intro.png", "14-Videos.png", "15-View-video.png", "16-Sign-up.png".
- Tablet References "12-Step1-Log-in.jpg", "13-Step1-Intro.jpg", "14-Step1-Videos.jpg", "15-View-video.jpg", "16-Step1-Signup.jpg".
- Notice the bottom part of the screen, this bottom bar should always be appear in all onboarding screens (fixed position)
- This application have 5 steps that needs to be create which are:
-- IBM ID (explained below)
-- My Notification
-- Service Portal
-- Service Request
-- Passport Advantage (Optional)
- All 5 onboarding steps will share the same layout characteristics and flow (different content).
- Please create all flow belows for each steps:
-- Obtain an ID Screen (available only for Step 1 - IBM ID)
---- This is where a user inputs their IBM ID or selects that they are a New Customer
---- Create the error messaging for when a user provides the wrong IBM ID (simulate this by clicking Login button without entering any input in text field)
---- If a user doesn't have an IBM ID, they can create one using the "New Customer' button
---- If the user clicks the new customer button, they will be redirected to the "Introduction" tab of Sign Up tutorial screen.
---- If user already have IBM ID and successfully logged in, they will be redirect to the last page they interacted with in the apps.
-- Introduction Tab (All Steps 1-5)
---- This page introduces the importance of the IBM ID and allows the user to continue
-- Videos Tab (All Steps 1-5)
---- Video showing the user on how to obtain an IBM ID
---- Design the video thumbnail and video player area. There can be many videos in this screen so show us your layout variation.
---- User can view the video or skip to the next tab.
---- Create variation of layout to manage one, two or multiple videos in this screens.
-- Quiz Tab (Question, Answer and Animation videos)
---- This section originally exist in our desktop apps.
---- The quiz area is no longer needed for this apps based on latest requirements from client.
---- Please help remove the quiz area from desktop prototype (without breaking any layout structure).
-- Sign Up Tab (All Steps 1-5)
- Once the user completes the tutorial, the app will provide a button for the user to go and create their IBM ID. This button will take the user to an external site to create their IBM ID.
- Once the user receives an IBM ID, they will be redirected back to this app to finish the tutorial.
- Provide Registration Finish Modal window
04. Step Completed Screen
- Mobile References "17-Step-completed.png", "18-Completed-step.gif", "19-All-steps-completed.png".
- Tablet References "18-Step-completed.jpg", "19-All-steps-completed.jpg".
- User will repeat all section in "Step 1" process for Step 2 to 5 until all steps completed.
- Every time the user completes a step, this screen will appear to show their progress in the staircase and notify them about their progress.
05. Get Certification Screen
- Mobile References "20-End-notification.png", "21-Certification.png", "22-Certification-sent.png".
- Tablet References "20-End-notification.jpg", "21-Certification.jpg", "22-Certification-sent.jpg".
- After user finish all the 5 steps, they will be rewarded with certification
- Once CATHY showed up after user finish the game, user can provide their name and email to get their certificate of completion.
- Provide form entry to the user to enter their name and email, also provide an option to provide secondary email address.
- Provide design for "Sent Certification" Modal window.
06. Play the Game Screen
- Mobile References "24-Play-the-game-info.png", "25-Play-game.png".
- Tablet References "23-Play-game-info.jpg", "24-Play-game.jpg".
- This screen will appear after user gets certification.
- User can redeem their IBM token to play games that available in this screen.
- Right now only one games available to be played which can be found from this link: http://easyonboarding-game.mybluemix.net/
- If user token enough to play the games, the "Start" button will be enable and clicking that link will bring user to the games page.
07. Feedback Screen
- Mobile References "23-Feedback.png".
- Tablet References "17-Feedback.jpg".
- User can provide their feedback about this application via feedback form.
- Right now in desktop version, this screen created as modal window, show us the best way to presented this screen in mobile version.
08. Terminology Screen
- Mobile References "06-Terminology.png".
- Tablet References "06-Terminology.jpg".
- This screen will explain any terminology or text that being use in the apps.
09. Helpful Links Screen
- Mobile References "05-Helpful-links.png".
- Tablet References "05-Helpful-links.jpg".
- This screen will provide helpful links that able to help user to directly using the apps.
10. About Screen
- Mobile References "04-About.png", "04.1-About-scroll.png".
- Tablet References "04-About.jpg".
- Simple screen to put additional information about the application
General Notes:
- User cannot go to the next step if previous step not completed yet.
- Bottom Bar will will appear throughout the steps (how should this be designed in mobile)
- Steps 1-5 have the same page layout; once you create one step, you just need to duplicate the others.
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 Bootstrap or AngularJS for this challenge.
Browsers Requirements
- Safari Mobile & Android Browser
- Desktop Browser such as Chrome, Firefox, Safari, and IE11+
- Latest Mobile Firefox, IE & Chrome Browsers
Documentation Provided
- Mobile and Tablet Storyboard and Existing Desktop Prototype can be found in forum!
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.