Challenge Summary
Welcome "IBM - Mobile Quiz Apps Wireframe Concepts Challenge". We are looking for creative idea about the best user flow for our new quiz games that will run through mobile devices. This apps will give user ability to answer seet of questions related to IBM company. At the end of this challenge, we are looking to see a creative ideas, interactions and user experience "wireframe concepts" that will help us to design and build UI/UX in the next phase of this project!
This challenge is focused on "wireframe" output and results. Be creative in your wireframes! This is not just about creating a generic wireframe experience. Wireframe a unique user experience for the mobile quiz application!
Round 1
Initial wireframes concept for client review.
Round 2
All requirements as stated in challenge details with client feedback applied.
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 come across various topics to choose from for the quiz. He selects the ‘Technology’ topic 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 in the same quiz.
- 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.
Application Scenario :
01. Login Scenario
- App user needs to enter their IBM account first to be able use the application properly. We also needs to make sure the client logo appear somewhere in this page (see attached file -- you only need to use the IBM logo, not the others). Note that the terminology to use for login is "Intranet ID" and "password", and the button is "Log in". Do not include a "Remember Me" checkbox or "forgot password" -- these are not supported.
- Provide us with error login scenario.
- What else needs to be put in this screen? Show us your ideas!!
02. Dashboard Scenario
- After successfull login, user will be redirected to this screen.
- In this screen, user will view 2 options, play or post quiz.
- Highlight the play quiz as major attention of this screen.
- What else needs to be put in this screen? Show us your ideas!!
Play Quiz Scenarios
03. Choose and Play the Quiz Scenario
- If user choose to play the quiz, user will be able to select and play any quiz available in the apps!
- What is the best way to present quiz level to the app user? via select level, or direct play where apps will start new quiz that depends on user current level? what is your idea?
- User should be able to see quiz related information before play it.
- Think and expand your ideas about how this scenario needs to be developed!!
04. Answer Questions Scenario
- This scenario will show once user start the quiz.
- There will be at least 12 questions for each level and at least 3 level will be available in the game apps, arrange how this information can be presented in the game play.
- Questions can be created using only text or can include images as part of it.
- Answer will always be radio button, so only one answer is allowed for each questions.
- After user choose one of the answer, there should be direct indicator/confirmation to let the user knows whether their answer for each questions right or wrong.
- User can skip the questions if they don't know about the answer.
- Maximum 4 answer options are possible for each questions.
- Think and expand your ideas about how this scenario needs to be developed!!
05. View Score Result Scenario
- User will be able to see result of the quiz score after finish answering all questions in this apps.
- We need some way that makes the score result screen interesting for our user.
- What is the best way to do that? Highlight the score result, create badges everytime user break some quiz records, etc?
- Besides summary of the quiz score, we also needs details of the quiz calculation from questions 1 to the ends.
- Each level shows the user 12 questions, but those display randomly out of the 30 for that level
- Score is computed by # correct + shortest time
- Think and expand your ideas about how this scenario needs to be developed!!
06. See Leaderboard Scenario
- Besides looking at their own score, user also can compares their achievement with other members in user connection network.
- Leaderboard style for each level? Or head to head score? what is the best way to compare the score?
- Think and expand your ideas about how this scenario needs to be developed!!
07. Share Your Score Scenario
- User also will be able to share their score to internal social media in IBM company or user social media account.
- User will be prompted before share their score to socmed account.
- Think and expand your ideas about how this scenario needs to be developed!!
Post Quiz Scenario
08. Create New Quiz Scenario
- Besides play with the quiz that has been created by other user in the apps, user can create their own quiz with set of questions.
- User will needs to enter the quiz title and brief of what the quiz will talk about.
- After title and brief filled, user will be asked how many questions will be available in their quiz.
- User will needs to enter questions and 4 answer options for each questions until the quiz questions number reached.
- While entering questions and 4 answer options, user also needs some way to be able marked which answer is the correct one.
- After all questions has been entered, user should be able to save the quiz, preview it and launch the quiz in the apps.
- Think and expand your ideas about how this scenario needs to be developed!!
Branding Guidelines
- We are looking a clean wireframe designs, and clear wireframes interactions.
- Create your design for mobile devices, user iPhone 5 ratio when create your wireframe!
Wireframe Expectations
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The apps flow must be very easy to use and intuitive. Keep that in mind when create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
- Use note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Target Audience
- Client Internal Employees
Judging Criteria
Your submission will be judged on the following criteria:
- Wireframe Concepts! Did you try or suggest something new?
- Completeness and accuracy of the areas of functionality and content
- How well your wireframes provide a consistent user flow and clear information architecture for the application
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.