Angak Gene Browser Redesign Challenge

Welcome to the "Angak Gene Browser Redesign Challenge".

In this challenge, we are looking for your help to redesign the client's existing “Gene Browser” app, which is a web-based portal that enables visualization of gene-level data across a variety of datasets.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
We are really excited to kick off this Design Challenge.

CHALLENGE OBJECTIVES

• Web Application
• 6 Screens

Round 1

Submit your initial designs for a checkpoint feedback
00) Login
01) Dashboard
01.1) Overview Tab
01.2) Summary by Disease Type Tab

As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented.
00) Login
01) Dashboard
01.1) Overview Tab
01.2) Summary by Disease Type Tab
02) Left Sidebar
03) Dataset Details
03.1) Experiment
03.2) Study Attributes
03.3) Patient Metadata
03.4) Sample Metadata

As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

OVERVIEW:
Gene browser is a portal for displaying information from a biological database for genomic data. This portal enables researchers to visualize experimental data and its related annotations, including expression, mutation status, copy number variation, etc. These results can help inform researchers’ understandings of disease pathways/genes, the efficacy of therapy, and much more.

What is a gene?
A gene is a unit of genetic information made up of DNA. Genes code for mRNA, which in turn encodes proteins (the “central dogma” of biology). Genes are made up of nucleotides (A, C, G, T); genes may have variants that cause them to act differently, malfunction or stop working. Some diseases, such as cystic fibrosis, are “Mendelian”, and are caused by a single mutation in a single gene. Others, such as cancer, are “complex”, and are the result of many accumulated genetic mutations. Understanding how genes act, and why they act the way they do, can help researchers better understand diseases and develop treatments or cures.

ABOUT GENE BROWSER
This project is about redesigning the client's existing “Gene Browser”, which is a web-based portal that enables visualization of gene-level data across a variety of datasets. Its users are from across the drug development cycle and possess varying levels of computational expertise.

Current Problem
Current feedback of the portal that centers around speed and usability include:

• Things load too slowly
• ���Unclear what functions are available
• Users tend to stick to the same dataset, same visualizations, and/or same genes with little exploration
• Visualizations are currently not intuitive to manipulate and difficult to download for easy use in slideshows, etc.
• Search function currently uses only dataset names; not able to search easily by other factors (e.g., disease type)

Expected Solution:
By redesigning Gene Browser, we will deliver a new web-based portal that supports efficient access to multiple types of biological data and associated metadata to provide quick insights and also support decision-making. 

• The portal will have a new and improved UI and an expanded feature set to support data visualization for up to two pipelines within an experiment.
• The current portal allows users to browse from “gene to disease insight”. Final deliverables will enable this but also should be forward compatible to allow future development to enable browsing in the “reverse” direction by starting from “disease.”

AUDIENCE:
Researchers, R&D Scientists, Bioinformatics Scientists, Computational Biologists, Wet Lab Biologists

DESIGN GOALS & PRINCIPLES
Below are some of the goals:

• The end goal of this challenge is to make sure the app is user-friendly and provides an intuitive user experience.
• Elegant, clean, simple, user-centered look and feel with modern aesthetics
• Use color, visual comparison, and drill-down charts to highlight comparison.
• The overall design and user experience
• Engaging and easy-to-use/interact UI
• Improve on Look & Feel of gene browser. User Friendly, Aesthetic in Look, More Clarity on Visualizations.

EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales (ask the client to rate each of the parameters)
Creativity: 10

• 1: barely new ideas
• 10: a utopic product but with features that can be fully implemented

Aesthetics: 8

• 1: low-fidelity design, wireframe, or plain sketch
• 10: top-notch 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: 6

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

BRANDING GUIDELINES
- We don't have any branding guidelines, so it is open to the designers to provide suggestions on the font, colors, etc.

TARGET DEVICE
- Desktop: 1366px width and height as required

GLOSSARY

• Left Sidebar (sidebar.png): The left-hand side of the page; currently contains gene input, data type filter, search bar, and dataset list
• Dashboard (01 Dashboard.png): The contents of the main panel when the user first logs onto the page. Includes breakdown of a number of studies by disease area, data type, etc.
• Dataset Details (03_2 Experiment.png): The contents of the main panel when a data set is selected. Currently relies on a number of tabs to display different aspects of the metadata. When a gene/gene list is selected, the user can also view the visualizations of the data for certain data types.
• Projects: Projects are the highest level in our data hierarchy. A project can contain multiple studies, which in turn contain experiments, which contain pipelines.
• Study: A study is an experiment, or group of experiments, that explore a specific area. For example, a project may contain three studies that explore colorectal cancer: one focused on patients with tumor adenomas; one focused on risk stratification, and one focused on patients with liver metastasis. They are united with a general theme for the project but have different specific purposes.
• Experiment: A study may be made up of even more specific lines of inquiry, which are called experiments. Experiments can use one or more pipelines.
• Pipeline: A pipeline is a method for performing experiments; for example, using microarrays to measure gene expression data. There are also analytical pipelines to help understand different types of data (e.g., the Tuxedo pipeline).

SCREEN REQUIREMENTS
00) Login:

• Users will need to sign in on this page by entering their username and password.
• Please include a reminder text to users that their password is the same as the company password
• Once the user is logged in, they see the dashboard

01) Dashboard:
(Please refer to existing screenshot 01 Dashboard.png)
It is the landing page that summarizes data accessible to the user.  Include simple onboarding help using tooltips or similar for new or unfamiliar users to learn to use the platform. These should highlight key features and provide information on how to use it.

Include below features in this page:
01.1) Overview Tab:
(Please refer to existing screenshot 01 Dashboard.png)
Include a summary by showing the number of projects, number of studies, and number of samples;

Samples per tissue/disease area :

• Include the number of samples per tissue/disease area
• Tissue/Disease Area includes: Bladder, Breast, Colorectal, Heme, Lung, Neuroendocrine, prostate
• Users will be able to drill-down into the particular tissue/disease area and view more details in the tissue/disease area tab.

Samples per experiment type:

• Include the number of samples per experiment type
• Experiment type includes Copy Number Variation (CNV), Gene Expression (Microarray), Gene Expression (RNA-Seq), Gene Fusions, Single Nucleotide Variants (SNV).
  
  NOTE: Numbers may change for each user depending on permissions, and there are some datasets that are available to all internal users.

01.2) Summary by Disease Type:
(Please refer to existing screenshot 02 Disease Area.png)
In the existing app, this summary which is a drill-down data are shown in a separate tab when the user clicks on a disease area in the overview tab. We are open to your thoughts on how to best display this information / do you think we need to show this as a separate tab? This tab shows the specific details about the disease area:

• Show the sample count by data type (e.g., Gene Expression - #, Copy-number variation - #); this should expand into data subtypes (e.g., for Gene Expression, RNA-Seq and Microarray)
• There should also be a way to view a table with the list of study ID’s and study names that are associated with that disease type
• Allow the user to filter the table when clicks on any of the data type or sub-types
• Provide a way for the user to search through the table as well.

02) Left Sidebar:
Filters
(Please refer to existing screenshot sidebar.png)
In the existing application, filters are put up in the left sidebar and also includes a navigation item for Dashboard and Browser, so the user clicks on these navigation items to switch between the two pages. We are open to your thoughts on how to put up the filters/either on the left sidebar or wherever you think would provide a better experience and possibly be shown for both 01 Dashboard and 02 Dataset details screens.

Gene Selection:

• Allow the user to input the genes manually with autocomplete based on the full gene list
• Provide a way to save gene list as public (all users) or private (the user creating the list only)
• Users will be able to load the gene list that has already been saved / should be able to view the list of genes within each of the selected gene list and then load it.
• User will also be able to delete the gene list that was already saved

Data Selection:

• Filter available projects by experiment type (e.g., Copy Number Variation, Gene Expression, etc.) - please refer to 08 Datafilter.png which contains two of three levels of the list - to provide an extract table of all levels (3 in total).
  NOTE: Users will only be able to choose two data types if they are compatible with combinations.

Study Selection:
Search by study name, disease type, etc., and should include auto-completion. The current search bar only searches by study name and does not include auto-complete.

• Display a search box with dynamic auto-complete search. Auto-complete will be based on underlying data, not previous search history.
• Below the search box, display all studies using the tree function. As filters are toggled on/off, and as search parameters are included, studies should be removed/shown depending on if they meet the filters/search parameters.
• Tree selection will list all accessible projects and expand further to show study, experiment, pipeline - so this includes a with the below hierarchy (we have included a hierarchy.png for your reference). Pipeline will be selected from a hierarchical list.
  
  NOTE: Currently we have this hierarchy “Experiments > Pipeline” (i.e. original hierarchy is “Projects > Studies > Experiments > Pipeline”) in the left sidebar. In this redesign, we want the user to view projects and studies here and move the selection of experiments and pipeline to the main panel.

Data filter by disease type (NEW!)

• Allow the user to filter the studies based on disease type
• This functionality will focus on particular disease types while selecting studies, and eliminate samples that are not of interest.
• Also, let's add a priority for flexibility. For example, right now, the only ask we've had is for filtering disease type, but we might get another user ask in the future (say, age, or smoking status, or something else). How can this sample filter section be designed so that it's flexible for future expansion?

Show filter impact (NEW!)

• Give count of samples in the original dataset (choice to expand the list or download detailed list);
• Give count of samples after applying specific filter (one) or filters (two or more) - (choice to expand the list or download detailed list);
• In short, show before and after stats, descriptive details, and also include a comparison option.

Gene Tracking in Dataset (NEW!):

• Based on the filter chosen we need to show which of the selected genes in the user list appear in the dataset (and perhaps more importantly, which do not) / we are looking for your thoughts on how and where to show this as there could be about many genes in the data set (for example: Say 40 genes or more - you can use dummy values for the genes like gene 1, gene 2, etc)

03) Dataset Details
(This is the browser screen in the existing app, we are just renaming it to Dataset Details)
Once the user chooses an experiment, information about the dataset across multiple tabs and these are the standard set of tabs that are shown for all the studies.

Select Experiments and Pipeline (NEW!):

• Include a way for the user to select more than one experiment for comparison (one analysis per experiment) and then choose the pipeline
• There are certain rules that need to be applied while selecting an experiment. For example, users can select only one of a specific experiment type (e.g. selecting two microarray experiments not possible - as it is one type of experiment - “microarray”) but can select two different types of the experiment (microarray & gene mutation data, etc).
  • We prefer to grey out incompatible options after a user’s initial selection for combination, but showing an alert popup is also an option or otherwise indicating incompatibility is acceptable  

Required Study Detail Sections
03.1) Experiment:
(Please refer to existing screenshot 03_2 Experiment.png)

• Shows the metadata of the chosen experiment

03.2) Study Attributes:
(Please refer existing screenshot 04 _1 Study Attri > Adv Summary.png, 04_2 Study Attri > Summary.png, 04_3 Study Attri > Attribute definitions.png)
Shows general information and has 3 sub-tabs

• Summary
• Advanced Summary
  • In this tab, users will be able to see the “Count Samples” based on the selected attributes. So provide a way for the user to choose the required attributes and find the count samples on a table.
  • For example: If the user wants to know the primary disease in the sample site, then they will choose the attributes as “Primary Disease and Sample Site” and on choosing this - the user will see a table with the different primary disease in the sample sites along with the count of samples (#). There will be multiple rows in the table as there could be many primary diseases for the same sample site and counts of samples will differ for each.
• Attribute Definitions
  • Whenever attributes don’t exist, this tab should be greyed out or somehow indicate not selectable.

03.3) Patient Metadata
(Please refer existing screenshot 05_1 Patient Metadata > Overview.png 05_2 Patient Metadata > Attribute Def.png)

• Overview:
  • Essentially a pivot table that includes the patient data like individual id, subject id, description, ethnic background, external identifier, etc.
  • Also, provide options to add/remove columns
  • Include a way for the user to search and filter the table
  • Provide a way to download the table
• Patient Summary (NEW!): Select which features you want to summarize to understand, e.g., how many patients have a certain disease and a specific smoking status, etc. This should mimic the “Advanced Summary” in the Study Attributes section.
• Attribute Definitions
  • Whenever attributes don’t exist, this tab should be greyed out or somehow indicate not selectable.

03.4) Sample Metadata
(Please refer existing screenshot 06_1 Sample metadata > Overview.png 06_2 Sample metadata > Attribute Def.png)

• Overview:
  • Essentially a pivot table that includes the metadata of the patient
  • Also, provide options to add/remove columns
  • Include a way for the user to search and filter the table
  • Provide a way to download the table
• Sample Summary (NEW!): select which features you want to summarize samples by to understand, e.g., how many samples are from disease vs. normal tissue by patient sex. This should mimic the “Advanced Summary” in the Study Attributes section.
• Attribute definitions.
  • Whenever attributes don’t exist, this tab should be greyed out or somehow indicate not selectable.

Other Screens:
Include below tabs as a part of the Dataset details but just have a placeholder content for now, it will be designed in the next design challenge.
03.5) Visualizations
03.6) PCA/Spectral Map
03.7) Downloads

REFERENCE:
Designers should refer to additional portals to compare offerings and identify best-in-class features, such as cBioPortal https://www.cbioportal.org/. We would like you to think about additional enhancements to noted features to improve the user experience.

IMPORTANT

• Keep things consistent. This means all graphics styles should work together
• All of the graphics should have a similar feel and general aesthetic appearance

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)

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