Challenge Summary
Welcome to IBM - SiBM - Quick Quack! Wireframe Challenge! In this challenge, we are looking for your wireframes for a brainstorming app that allows the user to brainstorm their own ideas or get others involved in brainstorming your idea.
Important: We are trying to do something new here, unlike a usual wireframe challenge where you create screens and flow in Axure, we would like to use a new tool "invisionapp.com"
In this challenge, you can create more low-fidelity wireframes using any tool (Axure, photoshop, illustrator, sketch, balsamiq) and take your screens and upload them into invisionapp. We want you to learn and use invisionapp to capture your wireframe interactions.
We are looking for you to create your wireframes and the user flow using Invision App.
We are really excited to see your wireframe ideas for this challenge.
Round 1
Please share the link to your invision wireframe along with your screens
- Mobile Screens (Portrait)
You may include any notes/comments about your submission
Round 2
Implement any checkpoint feedback and share the link to your invision wireframe along with your screens.
- Mobile Screens (Portrait)
- Desktop Screens
You may include any notes/comments about your submission
Challenge Details
The purpose of this challenge is to plan this new brainstorming app wireframe. This application will be responsive and for this challenge, we are looking for you to focus on the mobile experience.
Quick Quack is a tool that people can use for brainstorming -- either by themselves or with others. When brainstorming by yourself, you can be prompted with brainstorming tools that can help you come up with new ideas. When brainstorming with others, they can add their ideas, as well.
Significance of the Project Name:
The name comes from the idea of "wild ducks", which is a trait valued by IBMers -- someone who does things their own way.
http://www.ibm.com/smarterplanet/us/en/wild-ducks-podcast/about.html
https://www.youtube.com/watch?v=ksQrJh7s7N0
IBM Design Guidelines:
This is a wireframe challenge. Make sure to use guidance found within the IBM Design Guidelines to guide you in your planning.
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
Not all of the above guidelines are specific to wireframes, but please go through them to understand the overall guidelines and use them appropriately!
Expected Size:
-Mobile app (Portrait): 375 x 667px
- Desktop: 1024 width and height as required
Submission Requirements:
- Include images of your screens using any software or even hand-drawn sketches
- Submit your invisionapp URL and password within a challenge text file. You can password protect your invisionapp prototype (make sure to provide us the password!)
Required Functionality/Use-cases:
Below are the required functionalities, please create screens/sketches as required
1. Login Page:
- User logs in with IBM Intranet ID (which is an email address) and password.
2. Home Page:
User sees a page that lets them
- See their own brainstorming problems
- See the stream of problems other people are working on
- Create a new problem to brainstorm about
3. Problem page
- Field to define the problem
- Fields to type in solutions -- users can add any number of solutions
- Option to receive brainstorming technique assistance
- A way to bring in the crowd (crowd is not included, by default), or remove access to the crowd
- User can demote solutions (solution greys out and moves to the bottom)
- User can re-order solutions, to put the best on top
4. Brainstorm Techniques:
- User asks for brainstorming assistance.
- One of several techniques will display -- user can see what the technique is, and use it or move to the next technique.
- Below are some of the sample brainstorming techniques:
Reverse Brainstorming
Take your problem statement, and state it in the reverse. How would you solve *that* problem. Now, reverse those solutions, and see how they might address your original problem statement.
Teleportation
What if you were solving this problem 20 years in the future? How might you address the problem, given the absence of barriers that you run into today?
Superpowers
If you had superpowers, what would change? If you were Superman? The Hulk? Spiderman?
Exaggeration
What if your problem were 10 times its current size? 100 times? What if it were 1/10th or 1/100th the size?
Resource Availability
What if money, time, people, supplies, were not issues at all? What if you could ask for whatever you needed and have it happen? What would you do?
5. Brainstorming Technique Details Page:
- When technique is chosen, the problem displays, a description of the technique, and a way to respond to that technique, just like you can on the problem page.
NOTE: having another color for each technique page would be helpful!
- User can promote solutions back to the main problem page, and can get back to the main problem page at any time.
6. The user can choose to have anyone in this app look at their problem -- called “bringing in the crowd”. When bringing in the crowd, the user's problem gets added to the stream seen on the home page. Problems are listed in order of time added to the stream.
- the stream shows how many people are contributing to the problem. This is not real-time, but just bumps up the number each time a new person adds a solution
- when editing someone else's problem, your name shows up next to any solutions you provide
- only the owner can remove or reorder solutions
when the owner removes crowd access, all people in it no longer have access (if someone is currently viewing it, they will see a message saying that they no longer have access), and the problem is removed from the stream.
Target Audience:
- IBM Employees
Judging Criteria:
Your submission will be judged on the following criteria:
- User Experience.
- Completeness and accuracy of the wireframe.
- How well your wireframes provide a consistent user flow.
- Any suggestions, interactions and user flow you recommend (provide any notes or comments for the client).
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
Include images of your screens using any softwares or even hand-drawn sketches and add a text files with the link to Invision prototype that you had created with your images.
Source Files
For this challenge, you can create your screens using any softwares or even hand-drawn sketches.
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.