Challenge Summary
Welcome to IBM – Tradeoff Analytics Service Mobile Demo Design Concepts Challenge!
The Tradeoff Analytics service helps people optimize their decisions while striking a balance between multiple, often conflicting, objectives. The service can be used to help make complex decisions like what mortgage to take or which laptop to purchase. Tradeoff Analytics uses Pareto filtering techniques to identify the optimal alternatives across multiple criteria. It then uses various analytical and visual approaches to help the decision maker explore the pros and cons of their alternatives.
We currently have the client website. This is to show you what the Tradeoff Analytics service is and what it does. We need you to redesign the online demo both improving the UX and designing it for a mobile experience.
In this contest we are looking for DESIGN CONCEPTS on how this Application Demo could work. What should the user see and experience when using the application?
Round 1
Submit your design for a Checkpoint feedback:
1. Please show the early draft of your ideas for the 2 main views of the demo
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus Checkpoint feedback:
1. Please show the early draft of your ideas for the 2 main views of the demo
2. Any additional screens, views, modals, pop-ups or interactions that show more details of the demo
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
Tradeoff Analytics helps users make better choices to best meet multiple conflicting goals, combining smart visualization and recommendations for tradeoff exploration.
The goal of this challenge is to have improved designs for the demo found on client website, so we are looking for design concepts, so you need to explore the website and understand how it works and provide us with new design concepts for the client.
Demo Link: http://tradeoff-analytics-demo.mybluemix.net/
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Branding Guidelines:
All submission MUST follow IBM Design Language (if you haven't learned it yet - now is a great time!): 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.
Accessibility:
- Make sure when you are planning your concepts you are also designing for accessibility.
- Since this application will be very visual (colors) - think about color blindness and the need for contrast/labels.
- You will notice the color accessibility suggestions within the IBM Design Language.
- Accessibility checklist.
Design Goals:
- How should this application be designed?
- How quickly the user can find what he wants? What should the priority features be?
- Read the user story and decide what should the priority features be?
- How quickly can the user understand and interact with the app?
- The application should be easy to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be MODERN application design!
Target devices:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Make sure you create graphical elements in “vector” format, so when resize for retina versions, graphic still look sharp! It will be great if you can also provide the landscape version.
Suggested Screens/Features:
The following screens are suggested screens from us, please feel free to add other screens and features that work fine with what we are trying to accomplish here.
Live Demo:
For this sample demo, we want you the designer to come up with “something a user buying for a professional situation” as our sample data, this might be laptops for example. Please notice its not a sample data option in the demo site.
You task in this design concept challenge is to come up with business user scenarios, and think of what are the sorts of items the user could try to analyze? What should be the criterias? how would user view the information? If you need any help here dont hesitate to start a thread in forums where we can all discuss this and try to come up with things to use in the designs.
1) Try the Service
- In this page user would be able to try the service.
- They can look at the raw data about the item they are buying.
- Click Analyze Sample Data and explore the output.
2) Explore the Tool
- Play with the filters and see how it will help you make a decision.
- How can the user organize and examine the information presented about the list items?
- What would be the ideal ways to show how the different measurements for the professional products would display in relation to one another and for the individual products (such as Brand, Price, Weight and Screen Size)?
- How can the user change the input into the graph(s), and how do the graphs change when this happens?
- How can the user remove specific criteria (e.g. Price) and how does that change the visual display of information?
- How can the user interact with the different nodes of information and how do the UI elements convey the information about the models to the user in a clear and meaningful way?
-- First Round drafts can be lower fidelity or have the basic concepts down, but Final Submissions should show any interactions, pop-ups, modals or other UI or interactive elements to convey how this demo works effectively.
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.
- The application should be designed for iOS and use the IBM design language!
Target audience:
- Anyone who wants to compare between products to take a decision.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
- 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.