Landing page content design

[roshnidesigns]

In the past few days, I analysed the flymine InterMine and grabbed some of the essential components which could be inserted in the bluegenes landing page for users to get better understanding of components of the entire website. The ideas for the content of the landing page are explained below NOTE: the sections are to be implemented in the given order

Section I : Introduction & Definition This section will include the selected Mine introduction and the link to tutorial videos. User should be informed what website is about through appropriate data and feedback in time

Section II : Which Intermine ? This section gives the outline introduction to each and every InterMine which Bluegenes provides services of. Also allows user to find the InterMine they are looking for by searching a related keyword of gene/protein, of which they have to find information about. 'If the user cannot find it, it does not exist', main moto of the system must take user to the location they are looking for in every fast and convenient way possible irrelevant of the fact that user is consistent with the system or not

Section III : Go by Popular queries or create your own Contains the popular queries maintained by the mine organizers/developers which apparently redirects users to 'Templates' tab. We may also link users to 'Query Builder' if they want to create query of their own(usually experienced users); but 'Query Builder' tab clearly visible and specifies the use, hence no use of additional information load First time users find it convenient if the system guides them through the services provided

Section IV : Analyse more! Links user to 'Upload' tab where they could analyse the list of identifiers for gene/proteins Make users aware of the diversity in features the system provide to increase the rust and win them at that instant!

Section V : API in different languages This section is to aware users of additional services the site provides. the hierarchy of data in design specifies that the data related to system's construction/development/source are secondary while features offered by the system are primary hence this section comes at the end of the website

Section VI : Feedback This feature is just same as 'Question?Comments?Click here!' section in flymine, instead the goal is to improve the interaction with users. (I'll present the idea and process soon) Letting the users know that you are asking for feedback makes them believe that system values their opinion and improves connection

Section VII : Connect for updates! Makes user know more about the system through social media interaction services

A glimpse of the process, unnecessary uploading though but still makes me satisfied 😆

[roshnidesigns]

In the sections mention above, there are a few new suggestions (not from flymine) that I think could improve the user experience on website. I am mentioning them again here, open to any kind of improvements or modifications or a total rejection (not hoping for disapproval though 🤞)

Section I : Introduction & Definition This section will include the selected Mine introduction and the link to tutorial videos.

this is the only dynamic section whose content has to get updated as per different mines. The idea here is to give users a basic introduction of the mines

Section II : Which Intermine ? This section gives the outline introduction to each and every InterMine which Bluegenes provides services of. Also allows user to find the InterMine they are looking for by searching a related keyword of gene/protein, of which they have to find information about.

New users (maybe some experienced one too) will apparently have trouble finding the data(Mine ) they are looking for which is considered as one of the pain points. So the idea is provided a feature where through a single or group of keywords they could know which Mine is suitable for them thus improving the bad experience. If any more ideas are there to improve the process, let us discuss!

Section IV : Analyse more! Links user to 'Upload' tab where they could analyse the list of identifiers for gene/proteins

Idea is to make user get indulge in the site by introducing them to vivid features that system provides at the very first sight, this will tempt them to experiment more with the interface. The analyse section , as mentioned leads user to the 'Upload' tab which provides a totally unique facility that helps them to analyse more and dig deeper into the existing data.

Section VII : Connect for updates! Makes user know more about the system through social media interaction services

This section is clean representation of medium to let people connect to us through social media. Idea is to present a section which connects user with both the 'blog and updates' section from flymine and social media connections from footer of existing bluegenes site, in a clean and sleek manner.

I'll be presenting the design for the proposed model in few days and meanwhile will work on updating some features according to the suggestions provided :)

[heralden]

These are some great ideas! I'm looking forward to seeing the design.

Section II : Which Intermine ? This section gives the outline introduction to each and every InterMine which Bluegenes provides services of. Also allows user to find the InterMine they are looking for by searching a related keyword of gene/protein, of which they have to find information about.

This is an excellent idea, and would work as a more user-friendly supplement to the current mine switcher. It would basically be doing a keyword search across all mines and aggregating the results, which is quite heavy. I wonder if we could find an alternative for this feature by using the data that's already available from the registry. One way would be by having a bunch of filter buttons separated into two groups: neighbours (eg. animals, plants) and organisms (latin names). The list of mines would be displayed below the filter buttons, and activating one or more of the filters would narrow down the list, as well as disable the filter buttons that aren't present.

[yochannah]

For which InterMine - we do have a cross-intermine search already; maybe we need to make it more prominent? it's a little buggy which is why it's less visible now - https://github.com/intermine/cross-intermine-search-tool - but like @uosl mentions it is heavy.

Maybe there is a lighter solution. It might also be wiser to keep the scope limited and not confuse people by having some parts of bluegenes query multiple mines and others query a single mine. (InterMine on its own is confusing enough for one mine's worth of data! 😆 ) but I'm also happy to hear other arguments.

[yochannah]

right, ignore my cross intermine serach comments, we were thinking more of an interactive mine chooser!

[roshnidesigns]

One way would be by having a bunch of filter buttons separated into two groups: neighbours (eg. animals, plants) and organisms (latin names). The list of mines would be displayed below the filter buttons, and activating one or more of the filters would narrow down the list, as well as disable the filter buttons that aren't present.

yes herald this idea might be better, i totally ignored the complexity involved in search through keywords! Let me see how could we implement this. Will share the mock-up soon!

[roshnidesigns]

Also i was wondering that how many bunches of filters are you thinking of, if they are exactly 2 (i.e organisms and Latin names) then it would be better combining the these categories into one single list of filter options and as you said disabling some of them according to the filters applied. What say?

[heralden]

I think we're on the same page. To confirm that, I'll expand on what I had in mind.

The green filter buttons are neighbourhoods while the red are organisms. I think those are all the neighbourhoods, but there may be up to 50 different organisms, so the filter view would have to be scrollable to avoid it taking up a large chunk of the page.

As for functionality, I was thinking that if you for instance choose "Animals", it will highlight that button and remove all the buttons which aren't present in the Animals mines (so all of the other green buttons and most of the red ones). Then you'll have a smaller amount of organisms to look through to tighten your filter (or you could peruse the mine list below, which would also have gotten constrained).

[roshnidesigns]

Okay so this mean so many filters! So, better settle with providing them them one filter list of neighbourhoods type that would constrain the mine options visible as you mentioned, also short introduction of mine with their names will be enough for the user to understand what they are looking at and that would definitely help them out. As using more than one filter drop-downs would definitely fail to please users for interaction

[roshnidesigns]

explained wireframe here: lowfiexp_RoshniPrajapati.pdf Let me know if anything is unclear, presenting the High-fi wireframes once this is finalized

---

[roshnidesigns]

here is the link to prototype on figma

The design of landing page focusing mainly on the content and visuals, which can be implemented using same material design used for building the system. Note that the background color is intentionally changed to white to increase the contrast. Also the color theme changes with the corresponding color of the mine chosen ( can be seen on switching mines through 'Switch to Mine' tab on prototype).