The document outlines the redesign of the Center for Creative Photography website, including defining project roles and time commitments, conducting user research, structuring content types, and implementing a responsive design using Drupal to improve maintenance and accessibility of the site.

1. Center for Creative Photography Redesign
John Gutmann, Modern Dancer in Extreme Position, 1939

2. The project team (envisioned)
Name Role Hours per
week
Rebecca Blakiston Project Lead 6
Web Product Manager Communication
Ginger Bidwell Technical Lead 6
Web Developer Web design
Graphic design
Drupal modules
Information architecture
Katharine Martinez Lead for CCP 2
Director of CCP Knowledge of content, issues, users
Delegating work to CCP staff as needed
Samantha Barry Writing 5
Website Student Assistant Documentation
Usability testing
Jenny Gubernick Writing 3
Student Volunteer Google Analytics

3. The project team (reality)
Name Role Hours per
week
Rebecca Blakiston Project Lead 6
Web Product Manager Communication 10
Ginger Bidwell Technical Lead 6
Web Developer Web design 20
Graphic design
Drupal modules
Information architecture
Katharine Martinez Lead for CCP 2
Director of CCP Knowledge of content, issues, users
Delegating work to CCP staff as needed
Samantha Barry Writing 5
Website Student Assistant Documentation 15
Usability testing
Jenny Gubernick Writing 3
Student Volunteer Google Analytics

4. Not to mention
Name Role Hours per
week
Josh Williams Visual design lead 30
(April – August)
Gene Spesard Technical support 5
Monique Perez Adding metadata 2
Student Assistant Updating/fixing links

5. Website purpose
Target audience and personas
Competitive analysis
Card sort
Voice and tone
User Research phase

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. The CCP’s vibrant website exposes its
unparalleled collections to the
international photography community,
makes them easily discoverable and
accessible, offers unique interpretations
of these collections, and inspires the
creation of new knowledge.

8. Defining a target audience.
ID Number: 2000.126.45
Maker: Gutmann, John (1905-1998)
Title: The Shadow Knows (Nose)
Date: 1939
Credit line: John Gutmann Archive
Copyright: © 1998 Center for Creative
Photography, Arizona Board of Regents

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

13. 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 Scholar's Discovery, China
Date: 1945
Credit line: John Gutmann Archive
Copyright: © 1998 Center for Creative
Photography, Arizona Board of Regents

14. 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?

17. Conducting a competitive analysis.

18. Researcher
Website 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 navigate
of Art Visual Services
Harry Ransom Collections > Research > Using Using the Easy to navigate
Center the Collections Collections > initially but
Reproductions content is very
and Publication dense
Archives of Research Yes. In collection FAQ > "How do I Very easy to use
American Art Collections > record under get permission to
"How to Use": publish
"How to Use This Use requires an documents or
Collection" appointment images?"
section
Getty Research Search Tools and Library > Using Library > Using Pretty but not that
Institute Databases > the Library the Library > easy to navigate
Search the Rights and
Collection Reproductions

22. Drafting an information architecture.
About Us Our Story
Press
Annual Reports
Connect with us on Facebook
Publications/Store
Ask Us FAQ
Contact Us
Collections Fine Art Prints
Recent Acquisitions
Rare Books and Reference
Oral Histories
Study and Research Research Assistance
For Educators
Fellowships & Internships
Exhibitions and Events Calendar
Exhibitions
Special Events
Rights and Reproductions For Education
For Publication
Visit Hours
Getting Here

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

30. Wireframes
Documentation and deployment decisions
Structured content
Build phase

31. Wireframes and initial designs
These designs went through a few iterations as
static web pages, outside of Drupal.

32. Redmine Features Subversion
redmine.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.

33. The Drupal deployment problem
Features is a module that Content
solves a Drupal problem:
configuration and content
Configuration
are both stored in the
database.
Drupal database

34. Drupal Deployment
How do you test in dev, then
stage then production?
Dev
Make the same configuration
changes once in each
environment?
No, that's boring and error-
prone!
Copy the database or specific
tables from one to the other?
No, that's also error-prone Stage
and if you mess up you might
be losing content.
Pfff. Just do everything in
production - it's faster that
way.
Just - no.
Production

35. Our solution
Using the Features module to
export Drupal configuration to code.
The code can then be deployed to
stage and production using Dev
subversion and Features will
manage changing the database
settings to match.
Make a change in the UI
Put that change into a feature
Stage
Commit the feature code to
subversion
Use subversion to deploy the
feature to stage and test it out
Use subversion to deploy the
feature to production
Production

36. Redmine
We used redmine for
tracking bugs and work
that was not yet done.

37. Redmine
Our workflow started with
documenting work in
redmine tickets. When
code was committed with
the changes (using
features) we could
reference the ticket and
see it in Redmine's UI.

38. Structured content
We structured CCP's content to make it easier to maintain
automatically. We were already on board with Drupal, but
we decided to re-build the site using Drupal 7.

39. Existing Drupal site
The existing Drupal 6 site had a page title and
HTML from the previous (static) website pasted
into the body.

40. And watch out for:
Did you paste from Word or an email
message? Make sure the font is the same
Paste 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?
Don't 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.

41. Current events
appear here,
sorted by date
When events are
over, they move
automatically to
the Past Events
section.
New site
The content manager enters the event
data one time including a date. Events
automatically change their display
when they're over.

42. Artist content type
A content manager can now enter data about an
artist one time, and it can be displayed in an image
list, a table on another page and potentially even
on another website.

43. Image credits on the old website
Content managers had to copy-paste or re-enter
credit information each time an image was used on
the site. Lack of structure meant that they could
not be easily styled consistently.

44. Image file
(automatically sized for different contexts)
Artist name (linked to full artist record)
Title, date
Credit line
Copyright
Consistent credits on the new site
The content manager now enters metadata about
the image and the display is controlled
automatically resulting in a much more consistent
style.

45. Promoting content
On the old Drupal site, the homepage was in PHP
code input format. Content managers didn't have
control over it.

46. Promoting content
In the new site, content managers can define what's most
important within the content structure. We also added a
random element on the homepage to keep content fresh even
when staff were not available to select content.

47. Maintaining a form
In the old site, the form for requesting rights and
reproductions was difficult to use and change.

48. Maintaining a form
In the new site, Webform module provides a
WYSIWYG UI for managing the redesigned forms.

49. Design and front-end development
Photo source: http://ccp.uair.arizona.edu/item/33268

50. Mobile vs Desktop use
http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205

51. http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205
http://smartonline.com/smarton-products/smarton-mobile/smartphones-pass-pc-sales-for-
the-first-time-in-history/

52. Responsive Web Design vs. Separate Mobile Site
http://ccp.uair.arizona.edu/item/21795

53. Responsive Design

54. 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
}

55. Fluid Grids
allow content to adapt to fit available space

56. Fluid Grids = More Math
Use percentages rather than
pixels to define widths. To
get these percentages, we
use this simple formula:
target / context = percentage
http://ccp.uair.arizona.edu/item/31561
Target 500px
Context 900px

57. Fluid Media
max-width = 100%

58. 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 & Reproductions
http://ccp.uair.arizona.edu/item/23192

59. Thumbnail Credits On Hover

60. Colors
University of Arizona's secondary color palette

61. CSS Preprocessors

62. SCSS Mixin

63. Compiled CSS

64. "major website concerns"
http://ccp.uair.arizona.edu/item/24345

65. "let's have another meeting"
"we don't like the font. the colors are awful."
http://ccp.uair.arizona.edu/item/37349

66. Takeaways
http://ccp.uair.arizona.edu/item/32538

67. Next steps.
Maker: Gutmann, John
(1905-1998)
Title: In Two Directions
Date: 1939
Credit line: John Gutmann
Archive
Copyright: ©1998 Center for
Creative Photography, The
University of Arizona
Foundation

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