1) EBI is redesigning their long-established InterPro website to improve usability, reduce costs, and increase usage. 2) They used a user-centered design approach, gathering user feedback through various methods to understand wants and needs before beginning the redesign process. 3) This involved rapid prototyping, usability testing, and gathering continuous user feedback to iteratively design and refine the new site.

1. EBI is an Outstation of the European Molecular Biology Laboratory.
New InterPro website
Antony Quinn

2. A new website?
• Not quite!
• Re-design of well-used and established website =
CHALLENGING!

3. Motivation
• IMPACT grant: deliverables
• Age: 10 years, no significant
change
• Reduce costs: support,
training, development
• Increase use and
usefulness

4. 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

5. 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

6. 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

7. Interaction design
• Wireframes: paper and pencil,
Balsamiq
• Paper prototypes: usability
testing @ UCL
• Electronic prototypes:
Confluence
= visual + written specification

8. Example: Confluence prototype

9. Graphic and web design
• Visual identity: logo, colour palette
• Typography: Verdana
• Code: HTML, CSS, JavaScript

10. Development
• Need:
• Speed
• Reliability
• Scalability
• Technology:
• Java
• Oracle

11. 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...

12. Demo: Sequence search

13. Demo: Protein page

17. The present
Beta website:
wwwdev.ebi.ac.uk/interpro
Send us your feedback:

18. The future
Release 13 April 2011
Search: bigger, better, faster, more
i5: new technology, same interface
On-going iterative process

19. 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)

20. 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

21. 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