Big Blue - Visualization/Heat Map Display Design Challenge

Welcome to Big Blue - Visualization/Heat Map Display Design Challenge.

Welcome to the IBM Watson Ecosystem Dashboard Challenge. The goal of this challenge is to design and implement a cross-platform Dashboard application for the IBM Watson Ecosystem.

In this challenge you are provided with wireframes from the previous challenge.

Round 1

Submit your design for a Checkpoint feedback:
- Log in screen
- Dashboard/Heat map screen
- Partner summary screen
Notes.jpg: Any comments about your design for the Client

Round 2

Final Design plus any Checkpoint feedback:
- Log in screen
- Dashboard/Heat map screen
- Partner summary screen
Notes.jpg: Any comments about your design for the Client

Background:
The Watson Ecosystem is at the forefront of cognitive computing, allowing businesses to embed transformative question/answering capabilities within their applications. The Watson Ecosystem is growing fast and as the number of partners and the variety of domains grows, the Ecosystem needs scalable ways to manage these partners. One of the ways the Ecosystem plans on managing the partners it works with is through a Dashboard that allows the user to aggregate information about Ecosystem partners in a customizable way.

Objective:
Design and build the Web Application for the Ecosystem Dashboard. In particular, the Ecosystem envisions the default view to be a Visualization, such as a heat map, where each UI element in the Visualization represents a different partner and a visual cue to distinguish between different partners is based on a customizable statistic/metric. The application should provide filters that change the perspective of the Visualization and provide a mechanism to customize the view for a given user (i.e. user profile or save function). Other than that, the target audience for this application will be Watson Ecosystem engineers and managers looking to make decisions based on aggregate trends. To that effect, the UI/UX should be simple, intuitive but should also provide powerful functionality for uncovering trends.

Supporting Documents:
- Click thru wireframes (Wireframe.zip).

Screen Sizes:
Desktop: 1024px width and height as required.

Design Considerations:
- REMEMBER: DO NOT COPY the wireframes exactly - The wireframes are meant to help guide you and let you understand the application the audience would like to see designed. Think about the user experience/user interactions and show us your solutions!
- Review the wireframes - they are very detailed and will help, but do not copy 100% the layout, be creative!

Required Screens:
The application should provide the following screens, with the following UI and functionality as described:

0) Navigation  

• This is not a separate screen, but an aspect of the application
• At a bare minimum, the navigation should provide an extensible and very intuitive means of moving between the different screens in the application and new screens which may be added in the future:
  -- Go to 'general' dashboard screen. (should be completed by the first checkpoint)
  -- Go to a user customized dashboard. (completed by the second checkpoint)

1) Log in screen

• Screen should be single sign on
• Once the user logs in, they immediately go to the Dashboard screen

2) Dashboard/Visualization screen
- The dashboard screen should be divided into three parts:

1. Primary focus and function of this screen:  a Visualization displaying information about Watson Ecosystem partners

1. A prime example of the sort of Visualization that works for this type of information display is a Heat Map (see example links)
2. However, if you can determine a better design pattern to use to express the qualifiers and metrics for the Watson partners, you’re encouraged to do so.  The most important aspect of the Visualization is that it provides a useful and easy to understand way to show the user the status of the different Watson partners.  The example links also give approaches on the problem of visual display of the presented information.
3. Functionality: To that same effect, the application must provide a way to customize the look of the Visualization based on different Key Performance Indicators. Examples of some of these metrics are: precision/recall (on training data), etc.. For this part, we expect you to implement a small number of metrics but we expect the application to make it easy to add new metrics.   The default state for this should be showing All Partner Information that is available to the user.
4. The partners are indicated by what we’re calling the partner UI element - in the Heat Map example, this usually means a square with the partner’s name and a summary of partner information displayed on mouseover.  In the Heat Map example, this also means that the size of the square is based on a user chosen metric, the color representing the partner’s status.  
5. Every partner UI element should include:  Name, Hover/Rollover summary info, Relative Size indicating user-chosen metric, Color showing relative status of partner.
6. Sizing Functionality: Within a given view, the size of each of the partner UI elements on the screen must be tied into some metric. The size and location of these squares should adjust based on the other partners of the screen.

2. A Filters component that allows the user to define different filters that control which partners are visualized (see Filtering functionality below for more detail)

3. Filtering:  A Qualifiers or Metrics Component that allows the user to specify two things:

1. A metric that determines the size of each partner UI element
2. A metric that defines the color/heat level for each partner UI element

• Each partner UI element should display the name somewhere within its square
• The user can click on the square and go to the partner summary screen for that user
• Optional, if it is appropriate to your design and interaction model: A hover/rollover effect for the visualization element depicting the partner square providing a brief amount of additional information regarding the partner
• Include an icon or other Call to Action to download csv Report based on Qualifying Info being displayed on the Visualization (no need to display the actual report or download process)
• There should be a means of saving the customized display of a Visualization, whether this will be to a user profile or a system-side saved state is TBD, but some UI element should provide the user with a means to save it
• Alerts should be displayed indicating critical states for different partners as determined by user-customized metrics

4) Partner Summary Screen

• Should provide a partner summary screen that provides summary statistics on that given partner.
  -- Activity position
  -- Can include what domain do they belong to, what content are they focused on, what connections they have to other partners
  -- Can include graphs or charts giving the user easy insight into the partner details
  --  The graphs/metrics shown in the example mock up are just examples and placeholder UI elements can be used to represent them as shown, but should be designed in a manner to allow  more metrics to be added as the application continues development
• Should also allow the user to easily transition back to the original dashboard screen.
• there should be a means to add/pulling in new metrics as simple as possible
• Include an icon or other Call to Action to download csv Report based on Partner info being displayed  (no need to display the actual report or download process)

Target Audience:
- Watson Ecosystem engineers and managers who are looking to make decisions based on aggregate trends.

Example/Information Links:
Gallery of Visualizations:

• http://www.tableausoftware.com/public/gallery
• http://phylogenomics.blogspot.com/2014/01/top-alternatives-to-quilt-plots-and.html

Heat maps:

• http://stn.spotfire.com/spotfire_client_help/heat/heat_what_is_a_heat_map.htm
• http://usagereports.elsevier.com/help/webuser/webhelp/lang_1033/Heat_Map_widget.htm
• http://peltiertech.com/WordPress/heat-map-excel-conditional-formatting/
• http://gis.stackexchange.com/questions/256/how-to-build-effective-heat-maps
• http://www2.microstrategy.com/ProductHelp/9.4.1HF4/WebUser/WebHelp/Lang_1033/creating_a_heat_map_visualization.htm

Judging Criteria:
Your submission will be judged on the following criteria:
- Visualization Display functionality and UI/UX
- Flow between the screens and interactive elements
- Filter functionality
- Wow factor (both in terms of UI/UX and overall functionality)

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.