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.

Center for Creative Photography Redesign

1,034 views

Published on

Presentation for University of Arizona Web Developers, March, 2013.

Published in: Education
  • Be the first to comment

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)Name Role Hours per weekRebecca Blakiston Project Lead 6Web Product Manager CommunicationGinger Bidwell Technical Lead 6Web Developer Web design Graphic design Drupal modules Information architectureKatharine Martinez Lead for CCP 2Director of CCP Knowledge of content, issues, users Delegating work to CCP staff as neededSamantha Barry Writing 5Website Student Assistant Documentation Usability testingJenny Gubernick Writing 3Student Volunteer Google Analytics
  3. 3. The project team (reality)Name Role Hours per weekRebecca Blakiston Project Lead 6Web Product Manager Communication 10Ginger Bidwell Technical Lead 6Web Developer Web design 20 Graphic design Drupal modules Information architectureKatharine Martinez Lead for CCP 2Director of CCP Knowledge of content, issues, users Delegating work to CCP staff as neededSamantha Barry Writing 5Website Student Assistant Documentation 15 Usability testingJenny Gubernick Writing 3Student Volunteer Google Analytics
  4. 4. Not to mentionName Role Hours per weekJosh Williams Visual design lead 30(April – August)Gene Spesard Technical 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 CCP’s vibrant website exposes its unparalleled collections to theinternational photography community, makes them easily discoverable andaccessible, offers unique interpretations of 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 visitor Is in the US (79%) and not in Tucson (67%) Found the site by searching Google Is visiting the site for the first time (71%) Lands on the homepage Visits 3 web pages and spends 4 minutes on the website ID Number: 2000.146.58 Maker: Gutmann, John (1905-1998) Title: VIsitor Looking at Oceanic Art Exhibit Date: 1939 Credit line: John Gutmann Archive Copyright: © 1998 Center for Creative Photography, Arizona Board of Regents
  10. 10. Researchers (Primary) Scholars, curators, teaching faculty, graduate and undergraduate students, dealers, museum professionals, auctioneers, collectors, and reference librarians. Some are local but many are out of state or international. ID Number: 2000.157.82 Maker: Gutmann, John (1905-1998) Title: The Scholars Discovery, China Date: 1945 Credit line: John Gutmann Archive Copyright: © 1998 Center for Creative Photography, 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 the Easy to navigateCenter the Collections Collections > initially but Reproductions content is very and Publication denseArchives of Research Yes. In collection FAQ > "How do I Very easy to useAmerican Art Collections > record under get permission to "How to Use": publish "How to Use This Use requires an documents or Collection" appointment images?" sectionGetty Research Search Tools and Library > Using Library > Using Pretty but not thatInstitute Databases > the Library the Library > easy to navigate Search the Rights and Collection Reproductions
  14. 14. Drafting an information architecture.About Us Our Story Press Annual Reports Connect with us on Facebook Publications/StoreAsk Us FAQ Contact UsCollections Fine 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 PublicationVisit Hours 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/features subversion.apache.org Development and deployment decisions We use Subversion and Redmine for source control, deployment and documentation. We applied that to Drupal by using features.
  19. 19. The Drupal deployment problemFeatures is a module that Contentsolves a Drupal problem:configuration and content Configurationare 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 using Devsubversion 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 that Are you using bold and italics Delete this the 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 events appear 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 Site http://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-width: 481px) {// desktop styles}
  41. 41. Fluid Gridsallow content to adapt to fit available space
  42. 42. Fluid Grids = More Math Use percentages rather than pixels to define widths. To get these percentages, we use this simple formula: target / context = percentagehttp://ccp.uair.arizona.edu/item/31561 Target 500px Context 900px
  43. 43. Fluid Media max-width = 100%
  44. 44. Design Requirements ID Number: 2000.127.68 Maker: Gutmann, John (1905-1998) Title: Ordinance Rule Penalty, San Francisco Waterfront Date: 1939 Credit line: John Gutmann Archive Copyright: © 1998 Center for Creative Photography, Arizona Board of Regents CCP Rights & Reproductionshttp://ccp.uair.arizona.edu/item/23192
  45. 45. Thumbnail Credits On Hover
  46. 46. ColorsUniversity of Arizonas secondary color palette
  47. 47. CSS Preprocessors
  48. 48. SCSS Mixin
  49. 49. Compiled CSS
  50. 50. "major website concerns" http://ccp.uair.arizona.edu/item/24345
  51. 51. "lets have another meeting" "we dont like the font. the colors are awful." http://ccp.uair.arizona.edu/item/37349
  52. 52. Takeawayshttp://ccp.uair.arizona.edu/item/32538
  53. 53. Next steps.Maker: Gutmann, John(1905-1998)Title: In Two DirectionsDate: 1939Credit line: John GutmannArchiveCopyright: ©1998 Center forCreative Photography, TheUniversity of ArizonaFoundation
  54. 54. Questions? Maker: Andreas Feininger Title: ????? - >Orb weaver webs decorating the ironwork of a bridge across the Housatonic River in Connecticut, n.d. Date: n.d. Credit line: Andreas Feininger Archive Copyright: ©1999 Center for Creative Photography, The University of Arizona Foundation Ginger Bidwell bidwellg@u.library.arizona.edu Rebecca Blakiston blakistonr@u.library.arizona.edu Josh Williams josh@tucsonlabs.com

×