UX makeover: BAR website

UX makeover: BAR website

UX makeover: BAR website

Comments Off on UX makeover: BAR website

Dr. Nicholas Provart’s Bio-Analytic Resource for Plant Biology website receives around 60,000 visits per month and contains dozens of widely cited visual analytics tools, but the layout hasn’t been updated since its initial launch in 2005.

Many users complained that they couldn’t find what they were looking for. All the links were text-based, and each item had to be hovered over in order to see a thumbnail image. I felt it was time to update the website to reflect modern standards in web design so I built a new website using the Bootstrap framework.

A new landing page for the BAR. A search box with autocomplete in the upper right corner makes it much easier to find things.

A new landing page for the BAR. A search box with autocomplete in the upper right corner makes it much easier to find things.

Each of the visual analytics tools that are linked to from the home page are now depicted as individual tiles with a thumbnail image for quick recognition. Clicking on them opens additional information as a modal popup. In the upper right corner there is a search box with jQuery autocomplete so users can search for tools by name. Users can also find what they are looking for via the dropdown menus at the top. News and other announcements are highlighted in a dedicated box near the top of the page.

Click on the tiles for more information and links to the various data visualization tools.

Visual analytic tools are depicted as “tiles” with a thumbnail image for quick recognition.

Try It Here!

Back to Top