Challenge Summary
Welcome to "IBM - Mobile Quiz Apps Design Challenge". This challenge purpose is to create look and feel for our new mobile application that give the user ability to create and answer set of questions related to their interest. At the end of this challenge, we are looking for the best UI/UX design for the application. Join us NOW!!
Round 1
00. Navigation Solution
01. Login Screen
02. Dashboard/Home Screen
03. Quiz Screens
04. Score Result Screens
Round 2
00. Navigation Solution
01. Login Screen
02. Dashboard/Home Screen
03. Quiz Screens
04. Score Result Screen
05. Leaderboard Screen
06. Create Quiz Screens
07. My Profile Screen
"IBM Quiz" is a mobile application where IBMers can take mobile quiz on any of the topic of their interest. IBMers can also make their own quiz to be taken by IBMers around the globe.. Check more details below!!
User Scenario
- Steven is a network engineer who works at IBM Cambridge and use public transport to commute to his office, which takes around an hour on each side. He tries to make his commute productive by reading latest news article related to his field.
- Recently he heard about the quiz app from his fellow IBMer and decided to give it a try during his commute. He downloaded the app from IBM app store and login with IBM credentials.
- On home page he can see 2 options, play the quiz or post new quiz questions. He selects the ‘Play Quiz’ from home page and start taking the quiz. He finds the quiz quite challenging with some of the questions but still able to successfully complete the quiz. At the end of the quiz he could see how many questions he answered correctly and which one was wrong along with their correct answers. He shared his score in the app scoreboard where he could see how he performed compare to other IBMers that using the same apps.
- He finds out that he can also make his own quiz and that can be taken by other IBMers all around the globe. He decided to make a quiz on networking with his own set of questions and answers in the app (via Create Quiz).
Devices:
Apple IOS 7+ iphones
NOTE : The app is intended for a phone form-factor, for iOS. (We may later develop a tablet version, but we want to build the phone version first)
Attachment :
- wf.zip, Please do not change the basic flow of the screens -- the wireframes represent how we want the app to work.
- client_logo.zip, contains set of client logo that needs to be put in the screens as sponsor (use IBM logo only).
Screen requirements :
We would like you to suggest features/screens that this app should incorporate
00. Navigation Solution
- Provides us a clear navigation concept for this application.
- Please design a navigation solution that would be easy/engaging for a the application user!
01. Login Screen
- User needs to login using their IBM credential before able to use the apps.
- Provide us error scenario if user enter wrong credential and try to login.
- Think and explore how this screen should be create!!
02. Dashboard/Home Screen
- After successfull login, user will be redirected to this page.
- There should be a welcome screen text, followed by profile picture and which level the user currently, below the level there should be information about user global and country rank.
- There should be 2 buttons for user that they can choose, "Play Quiz" and "Create Quiz",
- "Play Quiz" will bring user to start answering all quiz questions in different screen.
- "Create Quiz" will bring user to create and enter new questions for the quiz.
- Think and explore how this screen should be create!!
03. Quiz Screens
- If user choose "Play Quiz", this screens will appear by default.
- For user that just play for the first time, there will be a overview screen (modal) that showing the quiz general rules, information and how the scoring will be done.
- The main quiz screen contains 1 question at a time, with 4 different choices that can be clickable/selectable.
- Questions and answer of each question can be vary, it can be text or images (question 6), provide variations of this screen for text and images.
- There will be a timer and current scoring information available in each question, along with quit button at the bottom of the screen if they want to stop answer the quiz.
- If user click/choose one of the answer, apps will show immediately whether the answer is correct or wrong, green for right answer, red for wrong answer.
- The correct answer will be provided immediately after user confirm their answer.
- Think and explore how this screen should be create!!
04. Score Result Screen
- After user answer 10 questions from the quiz, they will be redirected to this screen.
- This screen will show app user score after answer all the quiz questions and their total points and level.
- Also, user will be able to see new badge they received if they doing good performance and reach threshold for getting a new badge when answering the quiz questions.
- There should be several interactions that user can do in this screen, like sharing, see leaderboard or play another quiz.
- Think and explore how this screen should be create!!
05. Leaderboard Screen
- User can see their position along with other IBMers position from this screen.
- Leaderboard will be shown based on global and region location (where user belongs to).
- Think and explore how this screen should be create!!
06. Create Quiz Screens
- User can create/post new quiz questions for the apps.
- There are 2 steps for posting new quiz questions, the first step will ask user to put the questions topic and how many questions the user want to adds.
- The 2nd steps is to create question and the answer choices (4 answer), clicking one of the radio button means that is the correct answer for the quiz question. This 2nd step will be repeated until all questions number that user want to add is reachable.
- User can choose whether they want to put only text or images in their questions and answers.
- Think and explore how this screen should be create!!
07. My Profile Screen
- This screen show profile information of the app user.
- Basic information about the user, his/her level & achievements information around the IBM quiz apps will be shown here.
- Think and explore how this screen should be create!!
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
Design Guidelines
- IBM Style Guidelines : http://www.ibm.com/design/language/index.shtml
- Orientation : Portrait.
- For iOs use 640 x 1136 px resolution (iPhone 5)
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
Design Considerations
- 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
- Internal Employees from Client Company.
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.
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.