IBM - SiBM - Quick Quack! Responsive Design Challenge

Welcome to IBM - SiBM - Quick Quack! Responsive Design Challenge! Recently we completed the wireframe challenge for a brainstorming application, this challenge deals with the creation of designs based on the provided wireframes.

Note: Wireframes are just provided for content references, please make sure to go through the

We are really excited to see your designs for this challenge. Focus on creating a simple and engaging and fun! mobile experience. Make sure to embrace the IBM Design Language when planning your solution.

Good luck on this challenge.

Round 1

Submit your initial designs for Checkpoint Feedback
- Screens for Mobile

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.
- Screens for Mobile + Desktop

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Purpose of this challenge is to come up with design for the brainstorming app. This application will be responsive and for this challenge, we are looking for you to focus on the mobile and desktop screens.

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

Please keep this in mind while you are working on the designs for this

We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).

We had provided the wireframes for content and flow references, please DO NOT COPY the look & feel and this challenge’s purpose is to come up with better user experience and design!

Design Considerations:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- What should the priority features be?
- How quickly could you find information?
- Stock Photos: Feel free to use any images related to this concept.

Supporting Documents:
Wireframes: Contains the basic ideas for screens, contents and flow of the application..
- Mobile: https://invis.io/Q45B0TSBK
- Desktop: https://invis.io/GE5B0X47H

IBM Design Guidelines:
All submissions MUST follow IBM Design Language, please refer to the client website: 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
-- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge spec.
-- Creativity is welcome! We want this app to be fun to use.
-- The app is for helping people come up with ideas to problems -- so think about how to promote creativity, through the UI of this app. Does that mean interesting colors? Fun icons? 
-- Make sure the name “SiBM” does not appear anywhere in the app -- that is a TopCoder term, not an IBM term.

Design Size:
- 1280px width and height as required
- 640 x 1136px (portrait view)

Required Pages:
We are looking for the below pages to be designed..

You are not required to follow the layout from wireframe, looking for your help to improve this and think about user experience - please DON’T just color the wireframes.

0. Login:
- Looking for a simple login page that allows the user to login with their IBM credentials
- Please show us how the error screen will look like in-case they enter wrong credentials.
- Please show your thoughts on a logo for this app -- something involving a duck would be appropriate!

1. List of Problems (home screen):
- This screen shows the list of brainstorming problems, they will be able to see their own problems as well as the problems posted by others.
- Problems are listed by most recently active at the top.
- If a brainstorming technique is being used, consider reflecting that in the color of the item listed (Note -- the wireframe shows that brainstorming techniques are done by individuals, but I actually anticipate that the problem owner will switch these on, and everyone working on the problem will see it in the view appropriate for that brainstorming technique)
- The user will have the ability to create a new problem from this screen.

On the list of other people’s problems, please make it possible to search, so that you could find a particular problem / person if you wanted
- The list of other people’s problems should show a picture of the person whose problem it is
- Maybe list useful information, like how many answers have been posted, last posting date, how many people have been contributing (not real-time, just by how many people have posted answers)

On the list of your own problems, you should see at a glance:
- Is the problem open to the crowd? (and maybe be able to switch it from here)
- List of problems that have closed (these go at the bottom of the list, but won’t show for the crowd list)
- Most recent solution posting date
- the ability to close a problem -- think about what should show when you close a problem?
- the ability to delete a problem -- think about what should show when you delete a problem?

Tap/click on a problem to open it and view the details (described below).

2. Create New Problem:
- User can initiate the creation of a new problem.
- They will need to enter the title and description of the problem

3. Problem Details:
- This will show the details (Title and description) of the problem along with any answers that were received. It should probably be possible to edit the description -- although this was not shown in the wireframes.
- Clicking on “? Techs” (please use an icon for this -- it’s meant to give you help via a brainstorming technique) will allow them to view a brainstorming technique that they can use to think about their problem in another way.  
- Need the ability to allow crowd access from the problem details screen. The owner of the problem 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.
- The owner can also remove crowd access. 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.
- The owner should probably also be able to close (i.e., accepts no more solutions) or delete a problem from here. Think about what the problem would look like once it’s closed. In terms of crowd-access, if someone is currently viewing the problem and it’s closed, they should see a message just like when crowd access is removed.
- We would like to see an option to share, click on it would just allow them to share this problem's link thorugh email, etc..

Answers:
- List of answers that were contributed are shown here
- If an answer was derived using a brainstorming techniques, denote which technique was used (for example: in the wireframe, you can see that the 4th answer will have a text “teleportation”)...looking forward to design ideas on how this can be denoted
- If an answer came from another person, the answer should indicate who entered it
- All answers should show a time stamp of when they were created.

Add Answer:
- Clicking on “Add Answer” will allow the user to add an answer to the problem, we need to have large text area (something like the wireframe) to enter an answer. Another UI approach to showing entering an answer is fine -- for example, I could picture a large Plus sign that was for adding another answer, and a field that grew as you typed.
- You can add answers to your own problems or to other problems, if the problem is opened to the crowd.

Managing answers:
- The problem owner can manipulate the list of answers -- they can demote an answer, which moves it to the bottom of the list and greys it out. They can reorder the answers, to put the ones they most like towards the top. They should also be able to delete an answer. Only the owner can perform these actions.

4. Brainstorm Techniques:
- When user asks for brainstorming assistance (“? techs”), we show this screen!
- One of several techniques (see sample techniques below) will display - user can see what the technique is, and use it or move to the next technique. The techniques will be listed
randomly, so the user never knows which technique they will see when they click the list.
- List of answers that were derived using the technique are shown as they are added by the users...owner can decide on which answer is more suitable for the problem and decide to include that to the list of answers!

The Brainstorm technique page is just like the problem details page, except:
- in addition to showing the problem, details, and answers, the information about the technique displays.
- it probably should be possible for the user to click to get more information about a particular technique.
- each brainstorming technique should have a distinct look. Think different colors, backgrounds, etc.
- users can Promote answers made with a brainstorming technique, which will put them back to the regular Problem Details page. 
- NOTE: I don’t know how you would get back to the answers that you don’t promote -- I am open to suggestions.

The problem owner decides when to use a brainstorming technique. The brainstorming technique is used until the problem owner decides to return to the regular problem brainstorming experience (i.e., to turn off the 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?

Target Audience:
- Only IBM Employees

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

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 files

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.