Center for Creative Photography Redesign

Embed Size (px)

Text of Center for Creative Photography Redesign

  1. 1. Center for Creative Photography RedesignJohn Gutmann, Modern Dancer in Extreme Position, 1939
  2. 2. The project team (envisioned)NameRole Hours per weekRebecca Blakiston Project Lead 6Web Product Manager CommunicationGinger BidwellTechnical Lead 6Web Developer Web designGraphic designDrupal modulesInformation architectureKatharine MartinezLead for CCP 2Director of CCP Knowledge of content, issues, usersDelegating work to CCP staff as neededSamantha BarryWriting5Website Student Assistant DocumentationUsability testingJenny Gubernick Writing3Student Volunteer Google Analytics
  3. 3. The project team (reality)NameRole Hours per weekRebecca Blakiston Project Lead 6Web Product Manager Communication10Ginger BidwellTechnical Lead 6Web Developer Web design 20Graphic designDrupal modulesInformation architectureKatharine MartinezLead for CCP 2Director of CCP Knowledge of content, issues, usersDelegating work to CCP staff as neededSamantha BarryWriting5Website Student Assistant Documentation15Usability testingJenny Gubernick Writing3Student Volunteer Google Analytics
  4. 4. Not to mentionNameRoleHours perweekJosh Williams Visual design lead30(April August)Gene SpesardTechnical support 5Monique Perez Adding metadata 2Student Assistant Updating/fixing links
  5. 5. Website purposeTarget audience and personasCompetitive analysisCard sortVoice and toneUser Research phase
  6. 6. Defining a purpose for the site. ID Number: 98.120.248 Maker: Otto Hagel Title: California Water Date: 1961 Credit line: Hansel Mieth/Otto Hagel Archive Copyright: 1998 Center for Creative Photography, The University of Arizona Foundation
  7. 7. The CCPs vibrant website exposes itsunparalleled collections to theinternational photography community,makes them easily discoverable andaccessible, offers unique interpretationsof these collections, and inspires the creation of new knowledge.
  8. 8. Defining a target audience.ID Number: 2000.126.45Maker: Gutmann, John (1905-1998)Title: The Shadow Knows (Nose)Date: 1939Credit line: John Gutmann ArchiveCopyright: 1998 Center for CreativePhotography, Arizona Board of Regents
  9. 9. The average CCP website visitorIs in the US (79%) and not inTucson (67%)Found the site by searchingGoogleIs visiting the site for the firsttime (71%)Lands on the homepageVisits 3 web pages and spends 4minutes on the websiteID Number: 2000.146.58Maker: Gutmann, John (1905-1998)Title: VIsitor Looking at Oceanic ArtExhibitDate: 1939Credit line: John Gutmann ArchiveCopyright: 1998 Center for CreativePhotography, Arizona Board of Regents
  10. 10. Researchers (Primary)Scholars, curators, teaching faculty,graduate and undergraduatestudents, dealers, museumprofessionals, auctioneers, collectors,and reference librarians.Some are local but many are out ofstate or international.ID Number: 2000.157.82Maker: Gutmann, John (1905-1998)Title: The Scholars Discovery, ChinaDate: 1945Credit line: John Gutmann ArchiveCopyright: 1998 Center for CreativePhotography, Arizona Board of Regents
  11. 11. Primary Tasks for Researchers Is this a museum, a research center, a library,or what exactly? What is in the collection? Can I arrange to see items in person? What research services are available? How do I obtain the rights to use it? What is the current exhibition?
  12. 12. Conducting a competitive analysis.
  13. 13. ResearcherWebsite name What is in the Can I arrange to How do I obtain Other notes collection?see items in the rights to use it?person?National Gallery The Collection > No Resources >Hard to navigateof Art Visual ServicesHarry Ransom Collections >Research > Using Using theEasy to navigateCenterthe CollectionsCollections >initially but Reproductionscontent is very and PublicationdenseArchives ofResearch Yes. In collection FAQ > "How do IVery easy to useAmerican Art Collections >record under get permission to"How to Use":publish "How to Use This Use requires andocuments or Collection"appointmentimages?" sectionGetty Research Search Tools and Library > UsingLibrary > UsingPretty but not thatInstituteDatabases >the Librarythe Library >easy to navigate Search theRights and CollectionReproductions
  14. 14. Drafting an information architecture.About Us Our Story Press Annual Reports Connect with us on Facebook Publications/StoreAsk Us FAQ Contact UsCollectionsFine Art Prints Recent Acquisitions Rare Books and Reference Oral HistoriesStudy and Research Research Assistance For Educators Fellowships & InternshipsExhibitions and Events Calendar Exhibitions Special EventsRights and Reproductions For Education For PublicationVisitHours Getting Here
  15. 15. Establishing a voice and tone. Conversational, not passive.Approachable, not intimidating.Passionate, not ambivalent. Knowledgeable, not preachy.Helpful, not frustrating. Welcoming, not full of jargon.Professional, not pompous. Creative, not uninspired. Direct, not complicated.
  16. 16. WireframesDocumentation and deployment decisionsStructured contentBuild phase
  17. 17. Wireframes and initial designsThese designs went through a few iterations asstatic web pages, outside of Drupal.
  18. 18. Redmine Features Subversionredmine.org drupal.org/project/featuressubversion.apache.orgDevelopment and deployment decisionsWe use Subversion and Redmine for source control,deployment and documentation. We applied that to Drupalby using features.
  19. 19. The Drupal deployment problemFeatures is a module that Contentsolves a Drupal problem:configuration and contentConfigurationare both stored in thedatabase.Drupal database
  20. 20. Drupal DeploymentHow do you test in dev, thenstage then production? DevMake the same configurationchanges once in eachenvironment?No, thats boring and error-prone!Copy the database or specifictables from one to the other?No, thats also error-prone Stageand if you mess up you mightbe losing content.Pfff. Just do everything inproduction - its faster thatway.Just - no.Production
  21. 21. Our solutionUsing the Features module toexport Drupal configuration to code.The code can then be deployed tostage and production usingDevsubversion and Features willmanage changing the databasesettings to match.Make a change in the UIPut that change into a feature StageCommit the feature code tosubversionUse subversion to deploy thefeature to stage and test it outUse subversion to deploy thefeature to production Production
  22. 22. RedmineWe used redmine fortracking bugs and workthat was not yet done.
  23. 23. RedmineOur workflow started withdocumenting work inredmine tickets. Whencode was committed withthe changes (usingfeatures) we couldreference the ticket andsee it in Redmines UI.
  24. 24. Structured contentWe structured CCPs content to make it easier to maintainautomatically. We were already on board with Drupal, butwe decided to re-build the site using Drupal 7.
  25. 25. Existing Drupal siteThe existing Drupal 6 site had a page title andHTML from the previous (static) website pastedinto the body.
  26. 26. And watch out for: Did you paste from Word or an email message? Make sure the font is the samePaste in a new event here Copy this as the rest of the page.Un-bold thatAre you using bold and italics Delete thisthe same way for each event? Right amount of whitespace?Dont touch this heading Paste here Existing Drupal 6 site The existing content needed manual changes all the time, and the process was error prone. Updates for the events page went something like this.
  27. 27. Current eventsappear here,sorted by date When events are over, they move automatically to the Past Events section.New siteThe content manager enters the eventdata one time including a date. Eventsautomatically change their displaywhen theyre over.
  28. 28. Artist content typeA content manager can now enter data about anartist one time, and it can be displayed in an imagelist, a table on another page and potentially evenon another website.
  29. 29. Image credits on the old websiteContent managers had to copy-paste or re-entercredit information each time an image was used onthe site. Lack of structure meant that they couldnot be easily styled consistently.
  30. 30. Image file(automatically sized for different contexts) Artist name (linked to full artist record)Title, date Credit line CopyrightConsistent credits on the new siteThe content manager now enters metadata aboutthe image and the display is controlledautomatically resulting in a much more consistentstyle.
  31. 31. Promoting contentOn the old Drupal site, the homepage was in PHPcode input format. Content managers didnt havecontrol over it.
  32. 32. Promoting contentIn the new site, content managers can define whats mostimportant within the content structure. We also added arandom element on the homepage to keep content fresh evenwhen staff were not available to select content.
  33. 33. Maintaining a formIn the old site, the form for requesting rights andreproductions was difficult to use and change.
  34. 34. Maintaining a formIn the new site, Webform module provides aWYSIWYG UI for managing the redesigned forms.
  35. 35. Design and front-end development Photo source: http://ccp.uair.arizona.edu/item/33268
  36. 36. Mobile vs Desktop usehttp://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205
  37. 37. http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205http://smartonline.com/smarton-products/smarton-mobile/smartphones-pass-pc-sales-for-the-first-time-in-history/
  38. 38. Responsive Web Design vs. Separate Mobile Sitehttp://ccp.uair.arizona.edu/item/21795
  39. 39. Responsive Design
  40. 40. Media Queries allow developers to check properties or states of a device@media (max-device-width: 480px) {// mobile styles}@media (min-device