Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ensembl Redesign


Published on

Giulietta Spudich and Anne Parker talk to the EBI Interfaces group about some of the steps that the Ensembl team followed when redesigning the Ensembl website.

Published in: Education, Technology, Design
  • Be the first to comment

Ensembl Redesign

  1. 1. The Ensembl Redesign Giulietta Spudich and Anne Parker
  2. 2. This Talk… <ul><li>Old design </li></ul><ul><li>Feedback on issues to be investigated </li></ul><ul><li>Testing the new prototypes </li></ul><ul><li>New design (feedback) </li></ul>
  3. 3. Old Contigview I did not realise the yellow menu was context sensitive How do I get to BLAST? How do I change the tracks? Why is Ensembl always so slow?
  4. 4. Old Geneview Design How do I get to that page with the SNPs? What should I click on? Everything is very wordy I never look at the yellow bar! I didn’t know you could do that in Ensembl!
  5. 5. Gene Info all in One Page Leads to long pages, useful for those who print out and manually scan… Some pages would no longer open (too much information) Hard to see where this was going in terms of new data…
  6. 6. Issues (or Opportunities?) <ul><li>Speed of page rendering </li></ul><ul><li>Discoverability of content </li></ul><ul><li>Navigability </li></ul><ul><li>How will we add more info to already long pages? </li></ul>
  7. 7. Speed… Slow and Slower
  8. 8. Tracking Response Time
  9. 9. Increasing Species and Sizes
  10. 10. From Where Do We Get User Feedback? <ul><li>User Survey (Survey Monkey) (400 respondants) </li></ul><ul><li>Workshops (Feedback) (92 last year) </li></ul><ul><li>Helpdesk questions (60-70 a week) </li></ul>
  11. 11. The Redesign… <ul><li>Internal Testing with Prototypes </li></ul><ul><li>Discussion and vote for Ensembl developers- tabs or left hand links? </li></ul><ul><li>External testing at UCL, Cambridge, Oxford </li></ul><ul><li>Test sites (Survey and Exposed in Workshops) </li></ul>
  12. 12. The Redesign Timeline N O V E M B E R
  13. 13. Old Help <ul><li>No track-based help </li></ul><ul><li>Page help was long (as were the pages!) </li></ul><ul><li>No videos or images </li></ul><ul><li>No underlying help database, static pages. </li></ul>
  14. 14. Initial Plan <ul><li>Simplify the pages: </li></ul><ul><li>Concentrate on our three focus objects “Gene”, “Transcript” and “Location” </li></ul><ul><li>Make navigation between these objects clear </li></ul><ul><li>Reduce the information per page – more pages, more graphic (less text) </li></ul><ul><li>Help database </li></ul><ul><li>Track descriptions from the analysis table </li></ul>
  15. 15. Speed improvements (code) <ul><li>Caching of images (Apache), HTML, user and session data using memcached (more use of user’s computer, less of our servers) </li></ul><ul><li>Smaller pages </li></ul><ul><li>Cleaner HTML, CSS and Javascript </li></ul><ul><li>Ajax components/templates </li></ul><ul><li>Minimise whitespace in the JavaScript </li></ul><ul><li>Merge JavaScript and CSS files </li></ul><ul><li>Monolithic to Modular code </li></ul>
  16. 16. How did we let people know it would change? <ul><li>Ensembl-announce </li></ul><ul><li>Blog post </li></ul><ul><li>Test site (workshops) </li></ul>
  17. 17. How did we let people know it had changed? <ul><li>Ensembl-announce </li></ul><ul><li>Blog post </li></ul><ul><li>Main page-what changed? Amazon </li></ul>
  18. 18. Change is Good? <ul><li>Dear Sir, I just think the new web page look not good than before, like the 1. first page need show any thing convenient. 2. most people would don't like deep nesting page and confused 3. please let the page looks compaction. Best regard! </li></ul><ul><li>I prefer the old version than the new one. In the new one, I can't find the promoter region or the intron region. Would you please tell me how to find them? Thanks a lot! </li></ul>I hated the new version of office when it first came out ;-)
  19. 19. Post Design <ul><li>User Survey after 6 months </li></ul><ul><li>Helpdesk (60-70 questions per week) </li></ul><ul><li>Workshops (verbal) </li></ul>
  20. 20. Ongoing … <ul><li>Can “configure this page” be more obvious? </li></ul><ul><li>Where is the old ExonView? </li></ul><ul><li>Blog tip, FAQ </li></ul><ul><li>After 6 months (from the new design) the survey told us to change some link names. </li></ul><ul><li>Multicontigview was ported in later </li></ul>
  21. 21. Help <ul><li>Videos (youtube) </li></ul><ul><li> </li></ul><ul><li>Tutorials page </li></ul><ul><li> </li></ul><ul><li>FAQs </li></ul>
  22. 22. Images and Videos in Help
  23. 23. Is it better? <ul><li>Survey… more people are using it daily. </li></ul><ul><li>More ways to add pages </li></ul><ul><li>No hidden pages </li></ul><ul><li>Two ways to navigate, not just one (buttons + left hand links) </li></ul><ul><li>More help </li></ul>
  24. 24. What did we learn? <ul><li>No matter how you promote it, people will freak </li></ul><ul><li>Good to have concurrent old+new versions </li></ul><ul><li>Everything took longer than planned! </li></ul><ul><li>No “fixed answer”… redesign still going on as pages are improving as we go. </li></ul>
  25. 25. Acknowledgments <ul><li>Fiona Cunningham, Anne Parker, James Smith and the entire </li></ul><ul><li>Ensembl Webteam (Sanger) </li></ul><ul><li>Xos è and the Helpdesk </li></ul>