Oliver Marsden Photo

Project Details

The Challenge

Oliver Marsden is a photojournalist based in London, England. The corona virus hit his business hard, with a major job getting cancelled - one that would have been instrumental in his career. He decided to take this opportunity to redo his website. He started on SquareSpace, found a template he liked, but after putting in so much time, the result was abysmal. There was no branding and it just didn’t stand up to the professional websites of his peers. He reached out to me and I took him on as a client. The goals were to:

• Create a visual identity that can be used across social media, invoices, and other collateral

• Create a responsive website using that visual identity

Design Process

Research

When I started on this project, I had lofty research goals. I had plans on interviewing photo editors, the heads of NGO’s, and other potential users of Oliver’s site. However, I started this project in the throws of the corona pandemic and I realized that these are people who have much bigger fish to fry. It would not be the best use of time. I was concerned about conducting market research, because the industry is so niche - I was concerned that any research would not be sufficient or valuable. However, the best way to prove a hypothesis is to actually do something, and in this case, I was happy that the market research I did conduct was not in vain.

Market Research

1. Results from the World Press Photo Survey 2018 (they unfortunately have not released findings from 2019)

   • EDUCATION

     • Photographers who participated in the survey are highly educated with over 70% possessing university degrees, mostly in photography, journalism and the arts and humanities.

     • The proportion of photographers who received ‘in-house’ training fell from 25% of participants in 2015 to 21% in 2018.

   • EMPLOYMENT

     • There has been a significant decline in the number of photographers who work full-time in photography, from 74% of our respondents in 2015 to 59% in 2018.

     • The proportion who identify themselves as “Press Photographers” is down from 14% in 2015 to 12% in 2018.

     • The number of photographers working as stringers rose from 24% in 2016 to 28% in 2018.

     • Photographers required to provide video increased from 32% in 2015 to 39% in 2018.

     • More than 90% would prefer to shoot stills only.

   • TECHNOLOGY AND PLATFORMS

     • Fewer and fewer of the participants indicated they still use film cameras (18% in 2018, down from 26% of respondents in 2015)

     • There was a strong increase in the use of drones from 3% of respondents saying they were using this technology in 2015 to more than 8% by 2018.

     • Photographers have shifted from Facebook to Instagram as the preferred social media platform.

   • SECURITY

     • About 38% of photographers admit their financial circumstances are difficult or very difficult.

     • Use of unauthorised work has risen from 62% of respondents being affected in 2015 to 65% in 2018.

     • Fewer than a quarter of respondents were able to extract payment for the unauthorised use of their work.

     • More photographers in our study reported they had received financial benefits as a direct result of social media, up from 25% in 2015 to 30% in 2018.

     • Less than one in five of respondents said they were “unhappy” with their current assignments as photographers, with the overwhelming majority (over 62%) either happy or very happy

   • DEMOGRAPHICS

     • More than half of participating photographers are Caucasian/White, over 80% are men and about two thirds are between the age of 30 and 49.

     • Only 1% of participating photographers classify themselves as Black.

     • Photographers identifying as non-Caucasian/ non-White were significantly more likely to report facing physical risk at work. Non-Caucasian/ non-White photographers were also more likely to report risk of injury or death as their more pressing concern (49% non-Caucasian/ non-White, 37% Caucasian/White).

     • Non-Caucasian/non-White photographers were also more likely to report that risks would increase a lot over the next 5 years (13% Causasian/White, 21% non-Caucasian/non-White).

     • 69% of women photographers participating in this study face discrimination in the workplace.

Comparative Analysis

Oliver gave me a list of some of his competitors, photojournalists who were getting the best jobs at NYTimes, WSJ, New Yorker, etc. Since he would be pitching to the same people that his competitors were, he didn’t want a completely ground-breaking designed website. He needed one that looked familiar. I decided to conduct a comparative analysis to understand some of the underlying similarities and differences between these photojournalists.

One element that became very apparent was that most of these photojournalists used a side bar navigation, instead of a top bar navigation. I worried about this from a responsive standpoint - a side bar navigation is at risk of taking up too much of the mobile screen.

User Persona

As I mentioned, I had decided to not conduct any user interviews and instead, using market research, comparative analysis, and an interview with Oliver, create a user persona that way. We worked closely together to create the needs and goals of the user.

HMW Questions

I created a set of HMW questions to help the brainstorming session. Typically, I’ll have an empathy map with a list of insights & needs and build the point-of-view statements and how-might-we from those. In this case, since I didn’t have an empathy map, I decided to figure out the HMW questions from the needs in my user persona. I spent a bit of time here coming up with questions that would provoke meaningful and relevant ideas.

1. How might we help James figure out the availability of Oliver for a project?

2. How might we help James get a sense if Oliver is the right person for this project?

3. How might we help James get in touch with Oliver

Ideate

Brainstorming Session

Once I had my HMW questions, I did a brain thinking brainstorm session to come up with solutions to solve James’ needs.

Business Goals, User Goals, and Technical Considerations

I sat down with Oliver to really understand his business goals. At this point, it was made clear that Oliver wanted a website up and running pretty quickly and something that he could easily add to, as he takes on new projects. Because of the monetary and time constraints, the best solution would be to use SquareSpace. Regardless, I still wanted to have developer-ready wireframes because he had a developer friend who was willing to build out a more custom website.

Product Roadmap

A product roadmap helped prioritize which features I would include.

Sitemap

To understand the overall architecture of the website and to make sure I wouldn’t miss any pages, I created a sitemap. Oliver had indicated to me that he wanted to hide his commercial work - he wants to be known as a photojournalist first and foremost. I decided to hide his commercial work under “other work” at the bottom of the sidebar navigation.

Task Flow

A task flow helped outline how a user would navigate our website.

User Flow

A user flow highlighted the complexities of our sites and how a user would complete the tasks and the decisions they would make.

Design

Mid-Fidelity Wireframes

My mid-fidelity wireframes would be used in testing. Using inspiration from competitors and other common design patterns, I created the wireframes below.

Responsive Mid-Fidelity Wireframes

Because the site has to be responsive (many of his users will be checking his site on their mobile devices), it was important to see how this would look on a variety of devices.

Mid-Fidelity Prototype

Usability Testing

I found 5 participants in the age range of our user and had them complete the following tasks.

Tasks:

1. You’re trying to find a photojournalist for a breaking story in Lebanon. How would you figure out if Oliver was the right person for this story?

2. You decide that he is the right person but the budget is tight and you want to make sure he’s based nearby. How would you figure out where Oliver is based?

3. You’re ready to reach out to him and find out his availability. How would you get in contact with Oliver?

Iterate

Affinity Map

Insights:

• People want to be able to expand the photo

• People click on about page before contact for location information

• Contact icons seemed like buttons

• Wireframes should have real content so users can accurately complete tasks

Completion rate:

• 100%

Error-free rate: 

• 80%

Recommendations:

• Add location info on both about & contact

• Remove icons from contact page

• Create lightbox feature for photos

Branding

Our brand attributes were impactful, exciting, serious, and smart. Because of the nature of his work, we wanted to stick to a gray scale color scheme. I chose an elegant blue as a highlight to differentiate ourselves from his work.

High-Fidelity Wireframes

Once I had the style guide done, I started working on the high-fidelity wireframes. Oliver also needed a way to include content of his projects on the project pages. We chose a masonry grid as well, which is a great way of highlighting images.

SquareSpace

Oliver had told me that he wanted to use SquareSpace so that he could edit it himself as he adds more projects. I had to figure out basic CSS for the following customizations:

• Masonry grid on project pages 

  • Installed a .js and added some code to footer

• Open up padding between logo and primary navigation

• Open up padding between primary navigation and secondary navigation

• Add a non-SquareSpace font

Live Site

Post-Mortem

• What went wrong any why? While somewhat out of my control, the research just didn’t feel complete. Had this project been during any other time (and not the COVID-19 pandemic), I could have found photo editors to interview and created a more complete user persona. 

  Regardless, I did the best with what I had, including trusting that my client knew what his clients needs, goals, frustrations, and motivations are.

• What could I had done better? I realized that with this specific project, it would have been way more impactful and useful to test the wireframes with real content, including the photos and names of the project in the navigation. The participants had to just “guess” that this is how you would complete the task.

• What did I learn? I learned a little bit of CSS!

  But I also now ascribe to creating wireframes with real content. This was a perfect example of a project in which testing could have been fundamentally improved by real content.

  I also learned how to navigate freelance projects, including when clients say they don’t like a design.

Next Steps

• Add more projects 

• Take a portrait photo of photographer