Aynex Designs

Redesigning BLAST Result Page

BLAST from the past

BLAST is one of the most widely used bioinformatics research tools worldwide. It is an online app used by researches to identify and compare nucleotide and protein genetic sequences. The web interface was designed over ten years ago and was in need of an update. The BLAST team approached me to redesign the user interface of the report pages to better serve their users.

I was responsible for the visual design and user experience of the new application.

Original Blast Results Page

Original BLAST page

Entire Blast Results Page

Long scrolling BLAST page

User Needs Research

After user interviews and online surveys we found out that most users really appreciated BLAST but wanted some improvements to the app.

What users want?

  • Faster results
  • Easy way to filter data
  • Way to format the results
  • Access to related publications
  • Information was too overwhelming
  • A more modern, responsive design

Main Issue

BLAST results pages content is divided in different sections. The information in these sections sometimes needs to be compared and that takes a lot of scrolling up and down the long page.

Wireframes

After the research phase was completed, it was time to create wireframes to guide my design. Wireframes are also good to get the team's approval before any mayor design work is done.

I used Balsamic to create the wireframes. This tool gives the team a rough idea of where elements will be placed on the page and in what direction I am going in.

BLAST Wireframes

UI Design

BLAST UI Design

NCBI uses the US Web Design System. The design system was developed to be used by US federal government websites in order to make them fast, accessible and mobile-friendly. In addition to USWDS, the NCBI team has design customizations to accommodate our users specific needs and better display of our data.

Following NCBI's design aesthetic, the final designs have a clean, modern look that gives the user confidence that the information they are looking at is up-to-date and reliable, it is easy to understand and use and they can easily find what they are looking for.

Final designs were created in Photoshop. Each interaction was saved as an image and uploaded into InVision for final presentation to the team and user testing.

Design Details

BLAST UI Design

User Research

Interactive mockups were used in InVision for user testing. Remote testing sessions were arranged an conducted by a UX researcher on five users in our target audience. The usability of the design was tested by giving different tasks to the users to see how easily they could find, filter, and format BLAST results.

BLAST UI Design

Graphic Summary

One of the questions the team had was how useful was the Graphic Summary to our users. I created a secondary mockup that placed the Graphic Summary inside a tab and moved the filter section higher on the page. The users had the opportunity to test both mockups and give us feedback on their preferences.

User testing gave us a better insight into how our users use BLAST and it was established that the Graphic Summary was less useful than we had estimated.

Conclusion

Overall, the design was well-liked by our users during user testing and it was decided to go ahead with development. We also learned a key issue with the layout that helped us improve the design and make it even more useful for our users.