KG Layers UI Redesign Challenge

Challenge Objectives

Welcome to the “KG Layers UI Redesign Challenge.” In this challenge, we would like you to create an improved and updated UI for an existing web application. This tool is used by scientists studying genetics to help them visualize data in various ways to help them with research and predictions.

Challenge Summary

• UI Design for a desktop web application: 1366 x 768px (No Scrolling).
• Desktop view for approximately 10 distinct screen features
• Content and functionality based upon the detailed user workflow requirements
• Creative redesign with current best practices to improve the user’s experience

Round 1

ROUND 1
Please submit the below screens for the checkpoint round
01. Upload File & Select Visualization
02. Volcano Plot + Knowledge Graph Prediction
06. Spider Plot Visualization
07. User Feedback (functionality)

Round 2

ROUND 2
Please submit the below screens for the final round along with any updates mentioned in checkpoint feedbacks
01. Upload File & Select Visualization
02. Volcano Plot + Knowledge Graph Prediction
03. Volcano Plot (alone)
04. Knowledge Graph Prediction (alone)
05. Reactome Enrichment Analysis
06. Spider Plot Visualization
07. User Feedback (functionality)

GLOSSARY

• Gene = The basic unit of heredity; made up of DNA. Humans are estimated to have 30,000 genes. Genes have a multitude of different functions.
• Pathways = Genes (and other biological products like proteins) are organized into pathways that group genes by function.
• Examples include the Gene Ontology (GO; https://en.wikipedia.org/wiki/Gene_ontology) and KEGG (https://www.genome.jp/kegg/pathway.html)
• Graph / Network = A graph, also called a network, is a way to organize related information using nodes and edges. For example, if you’re creating a social network, a node might be a person, and an edge might connect two nodes if the two people they represent know each other.
• Node = A fundamental unit of a graph/network; also called a vertex. Can represent an object, like an airport, gene, or person. Nodes are connected by edges.
• Edge = A fundamental unit of a graph/network; represents a relationship between two objects by connecting them. For example, if nodes are airports, edges might represent direct flights between those two airports.
• Knowledge Graph = A mathematical graph (a.k.a. network) where nodes represent biological entities like genes, proteins, diseases, drugs, etc. and edges represent known connections between two nodes. For example, two genes may be connected if they share the same pathway, or a gene and a disease may be connected if the gene is known to be linked to that disease.
• DeepLink = An algorithm that predicts new edges in the Knowledge Graph-based on existing links. Outputs scores range from 0 (no connection at all) to 0.99999 (strong likelihood of link).

APPLICATION BACKGROUND
KG Layers is a tool that allows users to upload data files and create visualizations based on the complex variations that are of interest to them. The files are gene lists, and can include additional columns like log fold change, p-value, and additional categories. Currently, the user is able to view details in two formats:
1. As a Volcano Plot, with overlaid information from Knowledge Graph/DeepLink predictions. The user can also view Volcano Plot and DeepLink Predictions separately.
2. Two network views showing pathway hierarchy and gene connections.

• We are providing a mock version of the current tool. Please experiment with this interface to see how the workflow operates in practice. (Link to the current tool will be shared in forums)
• See static screens as a reference for the functionality and sample content required.
• Visualizations will be created using Streamlit (Streamlit is an open-source Python library that makes it easy to create and share beautiful, custom web apps for machine learning and data science). Your solution should take into account the limitations of this framework wherever appropriate.

APPLICATION OBJECTIVES
Improve the design and workflow for users. Primary users are scientists; therefore, a clear focus on results and visualizations is important.

Expected Solution:

• Fresh creative solutions to the layout and flow to improve user experience. Controls and displays should be better and more effective than the current tool. 
  Note: The type of graphs used should remain the same (Volcano Plot, Spider Plot). We are looking for better UI design for the interactions, and better styling (colors, shapes, fonts, arrangement) to improve clarity and detail in the displayed graphs.
• The tool must be simple and intuitive to use.
• All the steps required to see desired results should be clear to the user at the initial view.
• Data visualizations are primary and must utilize the most screen area.
• Visual details must be clear and easy to distinguish on the visualizations (clear color choices, distinct icons or symbols).
• All content should fit within the viewport, with no scrolling. Focus on using the screen area efficiently.
• Ability to hide /minimize calibration options (panels, settings, menus) once completed.
• Reduce clicks required to switch between Volcano Plot + Knowledge Graph Predictions and Reactome Enrichment Analysis options.
• In the Reactome Enrichment Analysis – Enriched Pathways Network, pathway names can be quite long; please ensure that these are easily legible.

AUDIENCE

• Scientists doing genetics research
• Individuals have varying levels of technical proficiency

PERSONA 
Name: Gwen Swenson
Occupation: Research Scientist
Work Location: Office at a large lab facility
Role & Goals: Analyze detailed data related to genes and their pathways using KG Layers.
Frustrations:

• The interface to generate usable visualizations is clunky and unintuitive on first use
• She is not able to customize the visualizations to easily see the details she is interested in viewing. For example, in the Volcano Plot/KG Layers visualization, the colours used for certain layers are indistinguishable from the base color, which is confusing
• When Gwen changes settings in the tool to see another type of visualization, she loses the details she previously generated.
• There isn’t an easy way to provide feedback to the developers of the algorithm for future improvements
• There isn’t a record of what she’s done – once she leaves the webpage, any trace of previous work is gone
• The names of layers, functions, and pathways can be very long, which makes it difficult to see them if they’re fully displayed, or understand how specific they are if they’re trimmed

Wants:

• A more intuitive tool with default paths and direction to her common tasks.
• An interface that will alleviate her frustrations and allow her to do her job efficiently.

EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

Creativity: 5
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented

Aesthetics: 8
1: low-fidelity design, wireframe, or plain sketch
10: finished looking visual design

Exploration: 8
1: strictly follow an existing reference or production guideline
10: open to alternative workflows/features not listed here that would help the overall application

Branding: 8
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success

REQUIRED SCREEN FEATURES & FUNCTIONALITY 

IMPORTANT: Solutions should redesign the UI. Use the sample screenshots and the current tool to understand the content and functionality. We are looking for a creative redesign to offer a better user experience.

• Create a workflow according to the specific features and functionality described below.
• Focus on the Expected Solution notes listed above.
• Use the KGL_Walkthrough.pdf for references below (link provided with challenge assets).
• Experiment with the mock tool to understand the current interactions (tool link provided in the forum).

00. Global Elements: 
These elements are available and/or displayed in the UI at all times.

• Application Title / Logo
• Navigation (only if needed for design solution)

01. Upload File & Select Visualization 
Reference: Please refer to the flow on pages 1 to 3 in KGLayersWalkthroughvF.pdf 
At the initial view of the KG Layers tool, the user must have the ability to:

• Upload a .CSV file (Sample CSV file).
• The file is required to include at least one column to display the Network view, and three columns to display the Volcano Plot / DeepLink overlay view. Columns:
  • gene name (string) (required for all visualizations)
  • fold change (float) (required for Volcano Plot)
  • p-value (float) (required for Volcano Plot)
  • an additional number of other columns desired (string) (optional)
• Identify the appropriate column containing Gene names (column names read from file)
• The user selects the visualization(s) they wish to generate. Choices available are:
  • Volcano Plot + Knowledge Graph Predictions (the combination is the default)
  • Volcano Plot (alone)
  • Knowledge Graph Predictions (alone)
  • Reactome Enrichment Analysis (alone) Note: This visualization may not be viewed in combination with the others.

02. Volcano Plot + Knowledge Graph Prediction 
Reference: Please refer to the flow on pages 3-14 in KGLayersWalkthroughvF.pdf 
This visualization display is the default selection for the tool. If the user selects this view they must have the ability to:

• Map appropriate columns for fold change and p-value. These column name choices are read in from a file. Once mapped, a Volcano Plot will display.
  • Required for Volcano Plot and/or Predictions.
• If desired, select a column from the uploaded document by which to color the genes.
  • Optional for Volcano Plot only
• Select a Layer of Interest (e.g., biological process, disease, etc.)
  • Optional for Volcano Plot. Required for Predictions.
• Search for Term of Interest (e.g., if they’re interested in the kidney, or breast cancer, or WNT pathway signaling)
  • Optional for Volcano Plot. Required for Predictions.
• Select Related Terms. These choices calculate KG predictions from the model around those terms. They will not be surfaced in the visualization.
  • Optional for Volcano Plot. Required for Predictions.
• Select which of the layers to add to the Volcano Plot from the Terms of Interest chosen. Those terms are displayed on the visualization. Note: Each should have a different color as distinct as possible from existing ones. This has not worked well in the current implementation.
  • Optional for Volcano Plot only
• Filter the range of scores to display (between 0 and 1). This affects the displays in the generated Volcano Plot and the sortable table of Predictions.
  • Optional for Volcano Plot and Predictions
• View a volcano plot of genes and select/unselect the Terms of Interest chosen. This control will show/hide particular dot colors. Dots are sized based on the prediction value from the model.
  • Optional for Volcano Plot only
• On mouse over the volcano plot, see the name of the gene and its coordinates (fold change, p-value).
• View a sortable table of Predictions that includes genes that were not in the original upload but are predicted to be related to the Terms of Interest selected, as well as their associated scores from the model.
• Download files:
  • Download uploaded data with knowledge graph predictions (.CSV)
  • Download extra associated genes from knowledge graph predictions (.CSV)
  • Download Jupyter Notebook Extract (future functionality, include button only)

03. Volcano Plot (alone) 
Reference: Please refer pages 4 & 5 in KGLayersWalkthroughvF.pdf 
If a user selects only the Volcano Plot, the appropriate selections are offered and the appropriate visualization is created.

• This feature should include the necessary details from feature 02. Volcano Plot + Knowledge Graph Prediction. Note the Required/Optional items. The user should be able to make selections for key columns, and see the Volcano Plot visualization.

04. Knowledge Graph Prediction (alone) 
Reference: Please refer to the flow on pages 10-14 in KGLayersWalkthroughvF.pdf 
If a user selects only the Knowledge Graph Prediction, the appropriate selections are offered and the appropriate visualization is created. Note: the visual is seen in the pdf below the Volcano Plot visual.

• This feature should include the necessary details from feature 02. Volcano Plot + Knowledge Graph Prediction. The table is shown in Note the Required/Optional items. The user should be able to search and make selections for Layers of Interest, and see the Knowledge Graph Prediction table.

05. Reactome Enrichment Analysis 
This view must be selected independently, not in combination with the Volcano Plot and/or Knowledge Graph Prediction. User must have the ability to select from options:

• Enriched Pathways Network (default)
• Gene-Gene Co-Occurrence Network

If selected Enriched Pathways Network: 
Reference: Please refer to the flow on pages 15 in KGLayersWalkthroughvF.pdf

• The user will view a hierarchy of pathways associated with selected genes; the size of each node determined by the enrichment p-value for that pathway (size = -log10(p-value)).

If selected Gene-Gene Co-Occurrence Network: 
Reference: Please refer to the flow on pages 16 to 19 in KGLayersWalkthroughvF.pdf

• The tool displays a network of genes from the uploaded file, where genes are nodes and edges are co-occurrences among different pathways. Pathways are seen as the lines connecting the nodes.
• (NEW) Filter by edge weight (slider with manual input options, integer only)
• (NEW) Filter by pathway (multi-select)
  • Include all pathways shown in the Enriched Pathways Network (above)
  • Pathways are hierarchical. Try to clearly indicate at what level of the hierarchy the pathway is. (See tree of pathways in Enriched Path Network. For example: If Pathway A is connected to and above Pathway B and Pathway C, all genes in Pathway B will appear in Pathway A and all genes in Pathway C will also appear in Pathway A)
  • Display the count of individual nodes associated with each pathway (For example: display as Pathway A (50) if there are 50 genes associated with Pathway A)
• (NEW) Ability to assign a color to hallmark gene(s). Suggest input or selection of specific gene names to highlight them in the network. These genes are limited to the ones uploaded by the individual
  • This could be a multi-select feature or similar (e.g., a textbox with autocomplete)
  • Include options to “Select All” and “Clear”

06. Spider Plot Visualization 
Reference: Please see spider viz.png in References folder 
This view would be available as an alternative gene-level visualization to a single individual target in the Volcano Plot. The user would have the ability to:

• See this visualization side-by-side with the Volcano Plot.
• Click on a dot/point in the Volcano Plot and see that detail within the Spider Plot.
• See Layer Concepts that are pulled from Layers Added to Plot field.
• Select one or more genes from the initial uploaded gene list file.
• See each gene’s Prediction for each layer concept between 0 and 1.
• For example, in the reference image, one gene is plotted (Gene Y) with values close to 1 for layers 4, 6, 8, and N.
• Note: the legend should be farther away from the image than shown in the current example.

07. User Feedback (functionality to be included in features above) 
User feedback will be gathered and sent to the application backend in order to improve the model in the future. This functionality will be integrated in two locations of the tool:

• Volcano Plot: When mousing over a gene with a Knowledge Graph Prediction overlaid on it, users will be able to select a feedback option (see below).
• Prediction table: Suggest a way to add this interaction to the table. For example, as added columns in the table.
• The functionality should include:
  • The user has the ability to select one of two options:
    • The Prediction is not trusted by the user. This option could be visually indicated with an X (or similar).
    • The Prediction is new or interesting to the user. This option could be visually indicated with a * (or similar). This option is not meant to indicate that the information is “correct,” only that it is new or interesting.
  • The meaning behind these options should be clear to the user even if they have not used it before.
  • Once a user selects one of the options, the selected option should be indicated as such, and the other option should not be possible to select.
  • Provide a way to “clear” the selection.

BRANDING GUIDELINES 
Please align with the aesthetic of the KG Layers logo and the color palette provided.

• Palette: Use provided corporate palette. Emphasize colors seen in the KG Logo.
• Application Title: KG Layers
• Logo: Use the provided logo.
• Fonts: Use corporate brand font Karbon, or similar sans serif font
• SIZE Desktop: 1366 x 768px. All content to display within the viewport, no scrolling.

DESIGN ASSETS
Please see forums

MARVEL PROTOTYPE

• We need you to upload your screens to Marvel App
• Please request for marvel app in the challenge forum
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)

STOCK ARTWORK 
Photos, fonts and icons are allowed to be used as per Topcoder Policy

SUBMISSION AND SOURCE FILES 
Submission File 
Submit all JPG/PNG image files based on Challenge submission requirements stated above

Source File 
All source files of all graphics created in either Adobe XD or Sketch or Figma and saved as an editable layer

Declaration File 
Declaration files document contains the following information:

• Stock Photos Name and Source Links from an allowed sources
• Stock Art/Icons Name and Source Links from an allowed sources
• Fonts Name and Source Links source from an allowed source
• MarvelApp share link for review

FINAL FIXES 
As part of the final fixes phase, you may be asked to modify content or user click paths