Challenge Summary
Welcome to "IBM - SiBM Support Easy OnBoarding Responsive Apps Mobile Design Challenge". The goal of this challenges is to create mobile design screens for our new Support Easy Onboarding App. We already have design for the desktop version and now want to make the application responsive in both mobile and tablet. This challenge focuses only on the Mobile version. Please see more details below!!
Round 1
01. Homepage
02. Lets Get Started Screen
03. Step 1 Screens
04. Step Completed Screen
05. Get Certification Screen
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Round 2
01. Homepage
02. Lets Get Started Screen
03. Step 1 Screens
04. Step Completed Screen
05. Get Certification Screen
06. Play the Game Screen
07. Feedback Screen
08. Terminology Screen
09. Helpful Links Screen
10. About Screen
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
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.
How does the apps work?
- Make sure to review the prototype for flow and content
- The customer will accesses the application to complete 5 basic onboarding tasks/Steps which are:
--- IBM ID
--- My Notifications
--- Support Portal
--- Service Request
--- Passport Advantage (Optional)
- Each steps above will be split into 4 sections that explain about tasks purpose/goal:
--- Introduction tab
--- Videos tab (not available in IBM ID step)
--- Quiz tab (not available in IBM ID step)
--- Sign Up tab
- To start the application, the customer must either supply his/her IBM ID or click on a New Customer button and proceed to step/tasks 1.
Screen Requirements:
01. Homepage
- 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 mobile design.
- Clicking "Get Cathy" will open CATHY avatar that will provide an brief introduction before user can start the onboarding steps.
02. Lets Get Started Screen
- CATHY will explain the flow of application from this screen.
- This screen will be appear after user click on "Click on CATHY to get started" link.
- User need to read all CATHY instructions/explanation 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 Screens
- Notice the bottom part of the screen, this bottom bar should always be appear in all onboarding screens (fixed position)
- All 5 onboarding steps will share the same layout characteristics, so we only need to design "Step 1" screens and replicate the layout for others steps.
- There are several sections in "Step 1" that needs to get designed:
-- Obtain an ID Screen
---- This is where a user inputs their IBM ID or selects that they are a New Customer
---- Design 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.
-- Introduction Tab
---- This page introduces the importance of the IBM ID and allows the user to continue
-- Videos Tab
---- 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 layout to manage one, two and multiple videos
---- In desktop version, the video will be played in overlay modal window, how this interactions should be appear in mobile version?
-- Quiz Tab (Question, Answer and Animation videos)
- The quiz area tests the user's knowledge on obtaining an IBM ID
- The app will provide several questions using the "master quiz" screen (overlay modal window).
- This screen will be activate if user choose to take the quiz. User can skip this steps if they want it by simply clicking "skip quiz" or click outside the modal window.
- To simulate the quiz, check Step 1 screen, open the quiz tab and take the quiz, user will be redirected to new screen, you can create it as modal window if you want.
- In this screen, CATHY will provide several questions and everytime user finish the questions, whether it's right or wrong, user will be able to continue to the next question.
- Provide layout for the question and answer (selected, right/wrong), also the explanation if user answer the question incorrectly.
- Notice everytime user will go to the quiz questions, there are animation running that simulate user progress, make sure to provide this interactions in your design.
- Each questions answered will move the user icon to climb the staircase to the top of IBM place/building (this has been managed in the animation, so you only need to provide placeholder to place the animation video).
-- Sign Up Tab
- 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
- User will repeat the "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.
- In this screen there will be an answer to the quiz. User can open the answer by clicking the "Answer" button.
- Create the user infographic (staircase) progress in this screen (how to show it in mobile?)
05. Get Certification Screen
- 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
- 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
- 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
- This screen will explain any terminology or text that being use in the apps.
09. Helpful Links Screen
- This screen will provide helpful links that able to help user to directly using the apps.
10. About Screen
- 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 design one, you have the design for all.
Important:
- Keep things consistent. This means all graphic styles should work together. You will need to update icons and infographics to be consistent with the IBM style.
- All of the graphics should have a similar feel and general aesthetic appearance.
Documentation:
- Desktop Prototype (Use this for content reference) or check the LIVE site here: https://support-easy-onboarding.mybluemix.net/#/
- Desktop Storyboard (For reference)
Screen Size
- Resolution iPhone: 750x1334px
- Please make sure that you create graphical elements in VECTOR format so graphics retain quality when resized.
Target Audience
- Users who need to learn about the Onboarding process to sign up for customer services
Design Guidelines
Follow the IBM Design Language
- Design Language: http://www.ibm.com/design/language/index.shtml
- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
- We need to make sure that there are not any trademark violations. So make sure to use the correct logo. IBM(R), Bluemix (TM), and copyright statements should be checked. The list of copyright and trademarks are here: http://www.ibm.com/legal/us/en/copytrade.shtml
- There should not be any references to SiBM in any of your design
Accessibility:
- Make sure when you are planning your designs you are also thinking about accessibility (http://www-03.ibm.com/able/access_ibm/disability.html).
- You can view the accessibility checklist here.(http://www-03.ibm.com/able/guidelines/web/ibm508wcag.html)
Judging Criteria
- Design Quality and cleanliness of your Design
- How well you follow our design guidelines
- Your design must make sense as Responsive application
- Carefully thought-out user experience and interface
- Consistency
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x768 px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.