Big Blue Career Quiz WeChat Mobile App

Welcome to "Big Blue Career Quiz WeChat Mobile App". This challenge goal is to create web application that run only in mobile phone within WeChat apps which will be use by IBM recruitment team for Campus Recruitment program. The end user will take a quiz about career or psychology on mobile. At the end of this challenge, we are looking forward to see the best UI/UX possibility for this application, join us NOW!!

Round 1

01. Cover/Splash Screen
02. Dashboard/Welcome Screen
03. Questionnaire Screen

Round 2

01. Cover/Splash Screen
02. Dashboard/Welcome Screen
03. Questionnaire Screen
04. Result Screen
05. Submit/Final Screen
06. Thank you Screen
07. Screen Elements Design 

Challenge Goals
Our client want to create a web application which will be run ONLY in mobile phone within WeChat apps for campus recruitment program. This application will be triggered/activate when student received some images/link under their WeChat apps from their friends/colleagues/or recruiters and clicked/tapped the image/link. By doing this, they will be redirected to the Career Quiz apps and user will be able to take some quizzes in the apps. The application then will send the quiz result to recruiters for analysis to check whether the user is potential candidates or not for recruitment program. 

User Scenario
1. Miss Wang, a recruiter of IBM campus program of IBM GCG (Greater China Group). She gets the analysis report based on the answers of  the career quiz which is taken by a graduate on mobile. She can push the suitable open positions and give some suggestions on career to the candidate's mobile phone.

2. Mr Zhang, a graduate, he found this career quiz on his Social Networking Service (SNS) from his friend, the questions are fun, and the user interface is attractive, so he took this quiz and submitted his email address or phone number at the end.  Then he became a potential IBMer. After a while he received a notification, which told him what job or which position is very suitable for him. He submitted his resume on this position and became an IBMer after interview. He also shared this application to his friends and classmates on his SNS, so that more and more people know IBM and IBM campus recruitment program. Finally, IBM get more and more high-quality candidates.

Attachment : 
- Big Blue Career Quiz Mobile App Design.zip, contains color palettes, client logo and initial flow for the apps.

Screen Requirements :
We would like you to suggest features/screens that this app should incorporate

00. Navigation Solution
- Provides us a clear navigation for this application.
- Please design a navigation solution that would be easy/engaging for a the application user!

01. Cover/Splash Screen
- This screen is the entrance of the application after user click/tapped the link/images being shared to them.
- Needs some branding added to reflect that this application belong to IBM, add client logo somewhere in this page (for sponsor).
- Create some simple logo for this screen.
- This screen needs to attract user attention, make it fun and engaging for university student.
- Explore how this screen should created and works!!

02. Dashboard/Welcome Screen
- This screen needs to welcome the student user and inform them about the application purpose in a cool way.
- An instruction to start quizzes via button? what should the best approach to notify user to start the quiz?
- what needs to be presented in this screen to help student user knows about the application purpose fast.
- Explore how this screen should created and works!!

03. Questionnaire Screen
- This screen will show set of questions which will list the question and options of the answer. 
- Questionnaire can have multiple pages, depending on how many questions being asked in the quiz.
- One question per page, the pages can be switched by button or gesture.
- Create 3 screens for the questionnaire :
* First page of quiz screen, contains next button, no previous button, content of the question and some instructions on how to choose the answer. 
* Middle page of quiz screen, contains prev and next buttons. 
* Final page of quiz screen, contains prev button and no next button, some notification that indicates this is the last question, for ex. text "Show me my results!".
- Needs to show progress step, how many questions has been answer by the student user by total questions available in quiz? 
- ability to save for later? in case student user needs to pause the quiz for other activity.
- Content can be dummy right now, provide us with complete set of UI form interactions (checkbox, re-ordering, radiobox, text area, text input, selectbox, etc).
- Explore how this screen should created and works!!

04. Result Screen
- This screen which will show the result based on the answer given. The result could be a score or short summarization.
- Needs some nice presentation for the score result, graph or chart? big score result text? some character design to encourage user result? 
- Needs some design for "next step" to go to Submit/Final screen to enter their personal information.
- Explore how this screen should created and works!!

05. Submit/Final Screen
- This screen will ask user to enter his personal information.
- Major info needed is user real name and personal email, feel free to add another info needed for the apps.
- Explore how this screen should created and works!!

06. Thank you Screen
- After user enter his personal information and hit the "post" button, it will show Thank you screen!!
- Needs some cool presentation for this screen.
- Explore how this screen should created and works!!

07. Screen Elements Design 
- Icon, which could best describe the application, it will be used for sharing.
- Background, suitable for the application's style.
- Banner, it will show the slogan of the recruitment program.
    
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Content of this application later will be developed using chinese language, but for now, we will use english for the content, just make sure consider about this when design your screens.
- This is a web-app run inside the browser inside WeChat.

Design Guidelines
- Font and colors : Font is open to designer, you can use our color-palettes.zip as starting point in your design but feel free to expand the colors.
- Orientation : Responsive.
- Create it for 2 different devices :
* For iOs use 640 x 1136 px resolution
* For Android, use 1080 x 1920 px resolution
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!

Design Considerations
- Your design should indicate this is an IBM application, maybe a logo, or other elements.
- The most of end users will be students, so the design should be vivid and attractive. 
- The application should be easy, fun and ease to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!

Target Audience
- University Students
- IBM Campus Recruiters 

Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application

Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission 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.