Google doc with examples I have collected so far: https://docs.google.com/document/d/1nc9kfb9M05eUmOE8FtiqGir03tu6mSKBB-CFz2r7GsU/edit?usp=sharing

I will consult Chester Dias about his thoughts on IGB App Store design and organization on Tuesday.

As discussed with Logan Weidenhammer I have shared the document about the design I had earlier made and the ideas during the initial brainstorming for better UI solutions.

Request for Logan Weidenhammer or Chester Dias - Can you add a link to Chester's document as well?

Link to Chester's UI Concept mockup: https://drive.google.com/file/d/1-p2RKAUmwxAXkiyuXeBbgc_trl-eC8fh/view?usp=sharing

It seems like we are going to emulate the design found at the Grafana site: https://grafana.com/grafana/plugins

I have been reading up on CSS and how we might go about implementing this design.

Notes:
We want to keep minimalistic UI changes.
Move the current search bar out of the banner so that it looks less like a global search and more like a search through the apps.
Move the "Submit Your App" button next to the sign in button as a user would need to log in first to submit an app.
Change the tiles to square shapes and in rows of three.
Reduce the size of the text in the app description
Increase the size of the app tiles so that the star rating is visible without mousing over the tile.

The Categories column currently holds items that are more like tags than true categories.
Since there are currently 9 apps I think it would make more sense to only have 2 or 3 categories if any.
It might make sense in the future to be able to sort by rating, but currently all apps have exactly a 5-star rating.

I have been reading and working through CSS and Bootstrap tutorials on W3Schools and doing some trial and error changes to elements on the https://apps.bioviz.org/apps/all site.
I will have to reach out to another member of the team about the process for making permanent changes on Thursday.

The VA app store looks like the most accessible. I liked they had a video link at the top right "Watch the video to learn more."

I liked the row of filtering links at the top. The most prominent filters were audience-based - "All", and "Veterans" and "Heath Care Professionals". Then there was another row of filtering links focusing on things like the cell phone OS and related technical aspects.

The entire width of the page was then dedicated to showing inidividual Apps.

I think this does a good job of solving our issues with layout versus organization. We should provide our own categories that make sense for IGB Apps and not rely on developers to make up the categories.

I have started a wireframe/interactive prototype on the website proto.io
Link to view is here: https://pr.to/D5ODGG/

Proto.io is the easiest wireframing tool I have used so far. It has been pretty easy to pick up. It's web based and collaborative.
I am using a free 15 day trial right now. Prices can be found here: https://proto.io/en/pricing/

I will continue adding features and pages to this base wireframe.

Blog post:
5 Best App Store Design Examples and How To Use Them
https://openchannel.io/blog/5-best-app-store-design-examples/

Added functionality to https://pr.to/D5ODGG/
Tags now sort the App cards
AppName card now goes to it's info page
Added Search and Search Results function

I want to consult with the rest of the team on Thursday about how we can use graphics to give the user all the information they need in order to make a selection decision.
We will probably want to change the info in and layout of the cards. We should also talk about organization and what we like and don't like about what there is so far. We need to make a decision about what the tags should be, and how they will work with a sort function if there is one.

I also plan to add links to training materials on the front page of the site to Submitting and app, and Editing an app resources.

Over 2 meetings the prototype was critiqued by Chester, Sameer, and Irvin.

"Categories" will become "Tags".
We may want to have tags like "All", "Interface changing apps", and "Function changing apps", instead of the current user generated tags.
Exact tags are still to be decided.

For the app descriptions in the tiles: the font size should be easy to read, one or two sentences,
and when moused-over should show the extended description, star rating, number of downloads (popularity), and the date the app was added to the store/updated

The current tab-based sort method seen when a category is selected will be changed to a "Sort by..." drop down box.
We would sort alphabetically, by most downloads, by most recently added.
and possibly by highest rated, though currently all of the apps are rated the same.

The Sign In button would now show a blank icon of a person when not signed in, changing to the person's profile photo when signed in along with the person's user name.

A new logo for the website's banner is being developed by Chester and Irvin.

To-Do
Further work is needed on developing new, more descriptive icons for each app.
A location needs to be picked for adding links to training materials related to submitting an app and editing an app.

Had a meeting between myself and Dr. Loraine about the pros and cons of the IGB app store redesign mockup. We have a list of some changes that we want to try out regarding the top banner, sorting methods, and curated categories. We also looked at many other web app stores to see what organizational methods we might like to implement in out designs. Sites of interest were Shopify, Graphana, 3dcart, and Quickbooks.

I am currently making a few new mockups based on what we learned in this meeting that we will review in a later meeting, choosing which design features are a best fit.

I have attached files for IGB Appstore Logo image and the .Paint file which can be used for editing and using a transparent background.

Cc: [~aloraine]

Request for Chester Dias - please indicate the font used for the logo image.

Mac OS font: "System Font (Default)"

For example of details needed for digital art (e.g., logos), please see: https://galaxyproject.org/images/galaxy-logos/
cc: Chester Dias

Proto.io appears to have trouble rendering projects the size that I am working with. Currently it is unusable for me so I have switched to Figma.

I have completed the first mockup showing an organization similar to the Quickbooks hyperlink style using the Curated Categories found here.
Figma link to first mockup: https://www.figma.com/file/uHCVu9PEn0QqbG9lx9LjH3/Appstore?node-id=0%3A1

More to come.

Changes:
Moved search bar down closer to the apps
Moved “submit your app” up to the banner by “sign in”
Removed “sort by” function
Made the banner match BioViz.org banner
Added to the subbanner is marketing material giving the user some instruction on how the site works.
Removed user generated categories
Implement curated categories:

Curated category type "App Type" is associated with curated categories "Application" and "IGB Plug-in"

Curated category type "Biology" is associated with curated categories "Transcriptome", "Epigenome", "Alternative Splicing"

Curated category type "Data" is associated with curated categories "ChIP-Seq", "RNA-Seq", "Bisulfite", "DNA-Seq"

Added indicators showing which category is selected
After selecting a category the only thing that updates is the tiles section, not the whole webpage.

Below are 5 sample mockups
Version 1 based on Quickbooks: https://www.figma.com/file/uHCVu9PEn0QqbG9lx9LjH3/Appstore-v1-Quickbooks
Version 2 based on Graphana: https://www.figma.com/file/23a7NyziXpVkmFydhGgLtT/Appstore-v2-Graphana?node-id=0%3A1
Version 3 based on 3dcart: https://www.figma.com/file/vFledvzXd07d3j83UO572c/Appstore-v3-3dcart?node-id=0%3A1
Version 4 based on the VA App store: https://www.figma.com/file/RXXKR4f4J2JnnIQ0dNOcGg/Appstore-v4-VA-AppStore?node-id=0%3A1
Version 5 based on Shopify: https://www.figma.com/file/ypOsr6KxbcHrXMUUOpbxny/Appstore-v5-Shopify

Quick request for Logan Weidenhammer:

• Please check the permissions for Versions 2 through 5. I was able to view Version 1, but when I tried to visit the links for Versions 2 through 5, I got a "permission denied" type of error.

Link sharing is fixed.

During daily stand-ups Logan Weidenhammer mentioned two designs that were winning out over the others.
Can you indicate which ones those were here?

It looks like after the meetings I had yesterday with Dr. Freese and Philip that Version 2 based on the Graphana layout was the most intuitive of the versions. Before we had narrowed it down to versions 1 and 2.

Here is a new mockup based closely on the Graphana Plugins page: https://www.figma.com/file/vKFIZkgzu6dm5lFxfIUr6T/Graphana-Copy?node-id=0%3A1

A change request:

• Bring back the "Submit your app" and "Log in" buttons

Buttons are back.

Moving to "Done".

For the next steps, we need to get someone who is an expert in CSS to implement the layout.