bioinformatics ux design: interpro

EBI is an Outstation of the European Molecular Biology Laboratory.

New InterPro website

Antony Quinn

A new website?

• Not quite!

• Re-design of well-used and established website =

CHALLENGING!

Motivation

• IMPACT grant: deliverables

• Age: 10 years, no significant

change

• Reduce costs: support,

training, development

• Increase use and

usefulness

Process – Traditional Approach

• Have a meeting to decide

what to do

• Lock yourself in a room

and keep coding until it's

done

• Show users the finished

product and make some

minor adjustments

Process – Our approach

• Talk to users first to find

what they really, really want

• Rapid sketching and

prototyping to get the

design right

• Clear specification to inform

coding and artwork

• Continuous testing and

feedback from users

User research

Support emails

Interviews

Web and search logs: Google Analytics

Survey

Same info, different sources:

- Break up entry pages into sections

- Add protein page

- Filter search results

Interaction design

• Wireframes: paper and pencil,

Balsamiq

• Paper prototypes: usability

testing @ UCL

• Electronic prototypes:

Confluence

= visual + written specification

Example: Confluence prototype

Graphic and web design

• Visual identity: logo, colour palette

• Typography: Verdana

• Code: HTML, CSS, JavaScript

Development

• Need:

• Speed

• Reliability

• Scalability

• Technology:

• Java

• Oracle

Demo: Typical workflow

I want to get all the human sequences that are members of the same protein

family as the protein I'm researching...

Demo: Sequence search

Demo: Protein page

The present

Beta website:

wwwdev.ebi.ac.uk/interpro

Send us your feedback:

The future

Release 13 April 2011

Search: bigger, better, faster, more

i5: new technology, same interface

On-going iterative process

What we learned along the way

• User research and usability testing help

resolve disagreements

• Rapid, iterative designs and prototypes help

reduce the costs and frustrations of

(re-)development

• Clear visual and written specifications reduce

ambiguity and uncertainty: “we know when we're

finished”

• We need to think about how this fits with

agile (scrum)

By the way...

Our approach is called:

User-Centred Design

Find out more from Jenny Cham, Francis

Rowland, Paula de Matos or me, and at:

http://ebiinterfaces.wordpress.com

Credits

InterPro team:

• Sebastien Pesseat: web design

• Matthew Fraser & David Binns:

web development

• Everyone else: input & advice

Images:

• 3. Flickr/Codger/Nathan Marciniak

• 5 & 7. UX Stencil © Todd Zazelenchuk &

Elizabeth Boling. Available from

http://www.userfocus.co.uk/uxstencil

• 10. Flickr/Speed skate/Flame Proof Productions

Thank you for listening