Target profile page rewrite: Create basic target profile page layout as per spec

[andrewhercules]

Design assets, including mockups of general page layout, header, footer, colour codes, and icons can be found on the OT Platform Team Google Drive.

[andrewhercules]

Here's a draft version of the dashboard that I'm going to share with users for their feedback. Any thoughts/comments/questions from the team appreciated! :-)

[mirandaio]

@andrewhercules Should the footer have a dark background color? like in the platform app and the genetics portal.

[peatroot]

First draft of API for the above now available at platform-api.

[andrewhercules]

Based on feedback from users and the front-end/UX meeting this past week, here's an updated version of the dashboard. It addresses a number of points:

1. Direct link to the Open Targets Genetics Portal
2. Reduce space used by description and synonyms
3. Improved descriptions of the data in the "Cancer Biomarkers", "Chemical Probes", and "Similar Targets" widgets
4. Changed "Similar Targets" to "Related Targets" based on updated description
5. Expanded modality coverage in "Known Drugs & Compounds" widget
6. Added Ensembl ID and UniProt ID under HGNC symbol
7. Make source text all grey to remove confusion that it is a clickable link - instead, the entire widget is clickable
8. Removed purple tab bar - although well-intentioned, it's not necessary for the proof-of-concept and limits potential future implementations that would incorporate associations data (note: can be reviewed at a later date if dashboard is fully implemented)
9. Updated "Protein Information" widget to include data currently found in the "Protein Information" and "Protein Structure" accordion tabs
10. Hid search/filter bar - as @peatroot noted, most users expressed that they would get used to seeing widgets in a particular location, therefore reducing the use case for a search/filter bar, and similarly, it also gives us more space to use above-the-fold.

You can find the updated mockup below - any and all thoughts and comments appreciated! :)

[deniseOme]

My suggestion would be to rename OT Genetics to Open Targets Genetics.

Perhaps have: "View ESR1 in Open Targets Genetics".

I will be busy re-recording all the "Everything you always wanted to know about a target but were afraid to ask" videos on the target profile page

[andrewhercules]

Here is a finalised version of the dashboard based on feedback, which I will use to create widgets and design assets for each of the tickets assigned to the proof-of-concept project epic (ticket #224).

Three things to note:

1. I have removed the purple tab bar as some users said it wasn't immediately clear what it does. Others mentioned it could be confusing if the tab and a widget have the same name. And so instead, I've created a two-tab view that would toggle between the Associations View and the Target Profile Overview. As mentioned by @peatroot, this will allow us to experiment with the overall user journey to increase engagement and retention.

2. Some of the widget styles have changed based on feedback from users and the team. Please feel free to send me any additional comments.

3. I have included a visual cue so that users know to scroll down. I tested this mockup on a screen that is 1200px wide by 720px high. It's not a common screen size, but according to Google Analytics, most of our traffic use laptop/desktop browsers that are at least 768px high with the minimum height being 720px. And so I put the visual cue within the Protein Information widget so that it can be seen on the majority of screens.

[andrewhercules]

This ticket will be closed - please use the individual tickets found in the epic #224 for feedback and discussion