How To Get a Fabulous Website on  a Modest Budget Using Plone        Sally Kleinfeldt and Alec Mitchell        Plone Confe...
The Project   •   Dynamic, data-driven site   •   Great customer interactions   •   Cutting edge design   •   Awesome sear...
The People•   Emily Hamilton, UMP Marketing    Director and Project Owner•   Curtis Michelson, Business Analyst and    Fil...
The Budget                   $60,000•   Discovery           •    Training•   UI/UX Design        •    Project Management• ...
Before
After
The Role of FileMaker  •   Internal FileMaker application, Minnesota      Projects (MP)  •   Authoritative source of book ...
The Process
BRD•   UMP conducted 9 month discovery    process prior to RFP•   Business analyst led•   Resulted in 42 page Business Req...
BRD•   Pros    •   Well articulated vision    •   Consensus hammered out    •   Entire organization bought in•   Cons    •...
Need for Agile       •   Many requirements       •   Unclear priorities       •   Fixed budget       •   ==> Flexible scop...
Turning the BRD into    User Stories•   First pass by project manager•   Defined stories that took Plone functionality    i...
User Stories•   48 stories in 6 categories (plus 17 deferred)    •   CMS features (Plone + add-ons)    •   FileMaker data ...
Planning Poker•   Estimate relative size of stories•   Use modified Fibbonacci “story points”:    •   0, .5, 1, 2, 3, 5, 8,...
Story Prioritization•   Google doc was hard to navigate•   Switched to Pivotal Tracker•   Rearrange stories in backlog to ...
Development   •   Four one-week iterations   •   Pauses before 3rd and 4th iterations to       allow for evaluation and de...
How We Used Our        Time           Discovery              24      Story Development           15FileMaker Import, Custo...
How We Used Our        Time           Discovery              24      Story Development           15   YikesFileMaker Impor...
How We Used Our        Time           Discovery              24      Story Development           15   YikesFileMaker Impor...
The Site
Custom Functionality•   Complex content types and a more complex    importer•   Elaborate categorization•   Faceted naviga...
ComplexContent Types
Book Content•   Many read-only fields imported from FileMaker    book catalog•   Books are Archetypes containers and refere...
User editable
Title/Sub-Title                  User editable
Title/Sub-TitleContributor references   & release dates                         User editable
Title/Sub-TitleContributor references   & release dates       Listing of Product content                         User edit...
Title/Sub-TitleContributor references   & release dates       Listing of Product content                         User edit...
Title/Sub-TitleContributor references   & release dates       Listing of Product content                         User edit...
Title/Sub-TitleContributor references   & release dates                   Listing of Product content                      ...
Categorization
Organizing it All•   Thousands of books and journals going back    50+ years•   Existing ad-hoc taxonomy needed refinement:...
Faceted Navigation
Faceted Navigation•   Saved by an add-on: eea.facetednavigation•   Developed to provide nifty navigation for    publicatio...
Quick Faceted Nav      Demo
“Theme Pages”
“Theme Pages”•   Display a set of related books: both manually    selected and generated based on categories•   Need to cr...
Theming
Theming on a Budget•   plone.app.theming/Diazo to the rescue    •   Minimal Sunburst UI CSS → designer    •   HTML + CSS +...
Diazo Rules File Tips•   Theme HTML included a fixed graphical    navigation    •   Just explicitly map each section to the...
Odds and Ends
What was Left•   Listings and portlets need theming too!•   Plone’s markup consistency and quality is a huge    benefit. Ju...
Questions?
How To Get a Fabulous Website on a Modest Budget Using Plone
How To Get a Fabulous Website on a Modest Budget Using Plone
How To Get a Fabulous Website on a Modest Budget Using Plone
How To Get a Fabulous Website on a Modest Budget Using Plone
How To Get a Fabulous Website on a Modest Budget Using Plone
How To Get a Fabulous Website on a Modest Budget Using Plone
Upcoming SlideShare
Loading in...5
×

How To Get a Fabulous Website on a Modest Budget Using Plone

1,111

Published on

Many organizations have big ideas about what they want their website to do, but a budget that common wisdom would judge too modest for those aspirations. The University of Minnesota Press had lots of great ideas for a cutting-edge, dynamic, data-driven site where users would get lost exploring their remarkable catalog of books. Their budget, however, was only enough to cover a modest 200 hours of development.

In this talk, Sally Kleinfeldt and Alec Mitchell describe how we were able to create the site that UMP dreamed of within their budget constraints by using Plone, plone.app.theming, and Plone add-ons such as eea.factednavigation. Visit the site at upress.umn.edu.

A link to audio of this presentation is here: http://2011ploneconference.sched.org/event/4db13ec7ca5072646b3defa0c22d811d

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,111
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

How To Get a Fabulous Website on a Modest Budget Using Plone

  1. 1. How To Get a Fabulous Website on a Modest Budget Using Plone Sally Kleinfeldt and Alec Mitchell Plone Conference, San Francisco November 6, 2011
  2. 2. The Project • Dynamic, data-driven site • Great customer interactions • Cutting edge design • Awesome search • Unified identity across 3 divisions • Unique and standout presence in the academic publishing world
  3. 3. The People• Emily Hamilton, UMP Marketing Director and Project Owner• Curtis Michelson, Business Analyst and FileMaker consultant• Sally Kleinfeldt, Project Manager• Carlos de la Guardia and Alec Mitchell, Developers• Kevin Brooks and Arielle Walrath, UI/ UX Design
  4. 4. The Budget $60,000• Discovery • Training• UI/UX Design • Project Management• Development
  5. 5. Before
  6. 6. After
  7. 7. The Role of FileMaker • Internal FileMaker application, Minnesota Projects (MP) • Authoritative source of book and journal information • title, author, ISBN, price, reviews, copy, etc. • FileMaker data pushed to publisher for e- commerce • FileMaker data pushed to Plone for website
  8. 8. The Process
  9. 9. BRD• UMP conducted 9 month discovery process prior to RFP• Business analyst led• Resulted in 42 page Business Requirements Document
  10. 10. BRD• Pros • Well articulated vision • Consensus hammered out • Entire organization bought in• Cons • So very many requirements • Scant information on priorities • Very high expectations
  11. 11. Need for Agile • Many requirements • Unclear priorities • Fixed budget • ==> Flexible scope agile project
  12. 12. Turning the BRD into User Stories• First pass by project manager• Defined stories that took Plone functionality into account• Stories for content editors and for site users• Discussed and edited by project owner and business analyst
  13. 13. User Stories• 48 stories in 6 categories (plus 17 deferred) • CMS features (Plone + add-ons) • FileMaker data transfer • Custom content types • Discoverability • E-commerce • Other
  14. 14. Planning Poker• Estimate relative size of stories• Use modified Fibbonacci “story points”: • 0, .5, 1, 2, 3, 5, 8, 13, 20, 40, 100• Project owner needs this information to prioritize• 4 hours with developers, project owner, business analyst, project manager
  15. 15. Story Prioritization• Google doc was hard to navigate• Switched to Pivotal Tracker• Rearrange stories in backlog to reflect priorities• Drag ‘n drop stories into iterations
  16. 16. Development • Four one-week iterations • Pauses before 3rd and 4th iterations to allow for evaluation and design work • Remaining work (theming, fixes, deployment) managed through tickets
  17. 17. How We Used Our Time Discovery 24 Story Development 15FileMaker Import, Custom Types 63 Theming 34 Other Development 35 Training 11 Production Deployment 22Technical Discussions, Meetings 47 Project Management 73
  18. 18. How We Used Our Time Discovery 24 Story Development 15 YikesFileMaker Import, Custom Types 63 Theming 34 Other Development 35 Training 11 Production Deployment 22Technical Discussions, Meetings 47 Project Management 73
  19. 19. How We Used Our Time Discovery 24 Story Development 15 YikesFileMaker Import, Custom Types 63 Theming 34 Other Development 35 Training 11 Production Deployment 22Technical Discussions, Meetings 47 Yikes!!! Project Management 73
  20. 20. The Site
  21. 21. Custom Functionality• Complex content types and a more complex importer• Elaborate categorization• Faceted navigation• “Theme Pages” - Custom Collections?
  22. 22. ComplexContent Types
  23. 23. Book Content• Many read-only fields imported from FileMaker book catalog• Books are Archetypes containers and reference other content: • Copy content (Reviews, Awards, Blurbs, ...). Also from FileMaker • Product content (Paperback, E-Book, ...)• A few editable fields to tweak presentation
  24. 24. User editable
  25. 25. Title/Sub-Title User editable
  26. 26. Title/Sub-TitleContributor references & release dates User editable
  27. 27. Title/Sub-TitleContributor references & release dates Listing of Product content User editable
  28. 28. Title/Sub-TitleContributor references & release dates Listing of Product content User editable Copy content & more
  29. 29. Title/Sub-TitleContributor references & release dates Listing of Product content User editable Copy content & more Related Books
  30. 30. Title/Sub-TitleContributor references & release dates Listing of Product content User editable Copy content & more Related Books So many attributes!
  31. 31. Categorization
  32. 32. Organizing it All• Thousands of books and journals going back 50+ years• Existing ad-hoc taxonomy needed refinement: • Primary discipline • Additional disciplines • Sub-disciplines • User editable tags (PloneKeywordManager)
  33. 33. Faceted Navigation
  34. 34. Faceted Navigation• Saved by an add-on: eea.facetednavigation• Developed to provide nifty navigation for publications on the EEA website• Completely generic multi-parameter searching of content with a fancy AJAX interface• Can make implicit category hierarchies explicit• Easy to theme. A perfect fit for user-friendly searching across heavily categorized content.
  35. 35. Quick Faceted Nav Demo
  36. 36. “Theme Pages”
  37. 37. “Theme Pages”• Display a set of related books: both manually selected and generated based on categories• Need to create new theme pages often → usability is critical → not collections!• Also needed tag filtering (Tag Cloud)• eea.facetednavigation to the rescue again • Can customize default facets via GenericSetup
  38. 38. Theming
  39. 39. Theming on a Budget• plone.app.theming/Diazo to the rescue • Minimal Sunburst UI CSS → designer • HTML + CSS + Images → developer • Diazo rules file does the rest• Only template customized was folder_listing• Content managers can use Sunburst or manage content in-theme
  40. 40. Diazo Rules File Tips• Theme HTML included a fixed graphical navigation • Just explicitly map each section to the appropriate theme element • No dynamic section navigation for admins? The navigation portlet can take care of that.• Grabbing conditional comments and google analytics scripts may require some fancy XPath.
  41. 41. Odds and Ends
  42. 42. What was Left• Listings and portlets need theming too!• Plone’s markup consistency and quality is a huge benefit. Just give your designer some sample HTML and let them do what’s needed in the theme CSS.• Plone’s frequent use of <dl> tags may not be to some designers’ liking.• Content Well Portlets (Weblion) can be very useful for page designs which require dynamic listings as a part of the content area.
  43. 43. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×