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

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. 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. 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. The Budget
$60,000
• Discovery • Training
• UI/UX Design • Project Management
• Development

5. Before

6. After

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

9. The Process

10. BRD
• UMP conducted 9 month discovery
process prior to RFP
• Business analyst led
• Resulted in 42 page Business Requirements
Document

11. BRD
• Pros
• Well articulated vision
• Consensus hammered out
• Entire organization bought in
• Cons
• So very many requirements
• Scant information on priorities
• Very high expectations

12. Need for Agile
• Many requirements
• Unclear priorities
• Fixed budget
• ==> Flexible scope agile project

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

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

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

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

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

20. How We Used Our
Time
Discovery 24
Story Development 15
FileMaker Import, Custom Types 63
Theming 34
Other Development 35
Training 11
Production Deployment 22
Technical Discussions, Meetings 47
Project Management 73

21. How We Used Our
Time
Discovery 24
Story Development 15 Yikes
FileMaker Import, Custom Types 63
Theming 34
Other Development 35
Training 11
Production Deployment 22
Technical Discussions, Meetings 47
Project Management 73

22. How We Used Our
Time
Discovery 24
Story Development 15 Yikes
FileMaker Import, Custom Types 63
Theming 34
Other Development 35
Training 11
Production Deployment 22
Technical Discussions, Meetings 47 Yikes!!!
Project Management 73

23. The Site

24. Custom Functionality
• Complex content types and a more complex
importer
• Elaborate categorization
• Faceted navigation
• “Theme Pages” - Custom Collections?

25. Complex
Content Types

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

29. User editable

30. Title/Sub-Title
User editable

31. Title/Sub-Title
Contributor references
& release dates
User editable

32. Title/Sub-Title
Contributor references
& release dates Listing of Product content
User editable

33. Title/Sub-Title
Contributor references
& release dates Listing of Product content
User editable
Copy content & more

34. Title/Sub-Title
Contributor references
& release dates Listing of Product content
User editable
Copy content & more
Related Books

35. Title/Sub-Title
Contributor references
& release dates Listing of Product content
User editable
Copy content & more
Related Books
So many attributes!

36. Categorization

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

38. Faceted Navigation

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

40. Quick Faceted Nav
Demo

41. “Theme Pages”

42. “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

44. Theming

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

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

47. Odds and Ends

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

49. Questions?