Big Blue - Visualization/Heat Map Display Wireframe Challenge

Welcome to Big Blue - Visualization/Heat Map Display Wireframe Challenge.  The goal of this challenge is to design and implement a cross-platform Dashboard application for the IBM Watson Ecosystem.
In this challenge, we are looking for wireframe (Axure) solutions based on requirements from our client. We’re also looking to the community to come up with interesting ideas for the workflow - we’re absolutely open to creative solutions!
At the end of this wireframe challenge, we are looking to have a complete solution for the user experience and flow of the application.

 

Round 1

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

 

Round 2

Final Design plus any Checkpoint feedback:
1. Log in screen
2. Dashboard/Heat map screen
   a. A version of the Dashboard which shows a saved/customized state as set by the user
3. 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.

 

Wireframe Expectations:
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all use cases mentioned in challenge details below.
- We’re focusing on this being a web application, but keep Responsive Design principles in mind as this will probably move in a cross-platform direction in the future
- You MUST use wireframes note pane in every single screen 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.

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:
-- Primary focus and function of this screen:  a Visualization displaying information about Watson Ecosystem partners:
--- A prime example of the sort of Visualization that works for this type of information display is a Heat Map (see example links)
--- 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.
--- Functionality: 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), size of the company, etc.  If you choose to use a HeatMap the expectation is that there are metrics to control the size/color of the Partner UI elements (see Qualifiers component below)
--- 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.
--- Every partner UI element should include:  Name, Hover/Rollover summary info, Relative Size indicating user-chosen metric, Color showing relative status of partner
-- a Filters element that allows the user to select subsets of partners to be displayed. This selection/filtering process will happen based on statistics/metrics/categories. For example, the filters element may have a “Geographic” filter which allows the user to select “North America”, “Europe”. Another example would be to select all partners of a certain “size” (top 25% of partners). The result of active filters is that only those partners that are filtered/selected will be displayed on the Dashboard/Visualization screen
-- A Qualifiers or Metrics Component that allows the user to specify two things:
--- A metric that determines the size of each partner UI element
--- A metric that defines the color/heat level for each partner UI element
- Finally, below are additional pieces of functionality for the dashboard screen:
-- 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

3) Partner Summary Screen
- A partner summary screen that visualizes a single partner at a more granular level.
-- There should be a title/subtitle element at the top that contains summary/categorical information across the top (Name of partner, geographical location, industry/domain, etc.)
-- The rest of the summary screen should provide powerful visualizations for different individual statistics
-- 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
- Summary Screen functionality and UI/UX
- Wow factor (both in terms of UI/UX and overall functionality)

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.