In the next 3 posts I’ll be sharing my creative process used to design Fotos Públicas, Brazil’s biggest free stock photos platform. From the UX design process to visual identity creation to the web portal’s launching day, I just had 30 days.

Want to know how I did it?

UX Process

When I started working on Fotos Públicas, we had the opportunity to launch the project in a large photography fair that was scheduled to take place in one month.

My first act was to research the photo stock market, and to analyse their UX. It took me 2 days.

User Interviews

I quickly scheduled user interviews with 8 journalists / photo editors (our main target), and 5 photographers (it was imperative that they wouldn’t be against the project). The interviews happened on the phone. The whole process lasted only 1 day, from the interviews to the study and interpretation of answers.

To the journalists and photo editors I asked 2 simple questions:

  1. Where do you find the pictures used in your publication?
  2. Tell me the pros and cons of the process

And for the photographers I asked 1 simple question:

  1. Do you get anyhow worried or is there something you want to get certified of when one of your pictures is to be published?

What I learned from publishers:

Even for the guys working on big media groups, their systems are not easy to use. The pictures are small and the search functionality isn’t that great. All of them wanted a tool to see what’s hot, have multiple choices for each subject, and a way to quickly share it with co-workers or download the chosen photos. They use their computer for the search, that’s why I focused more on a desktop version..

What I learned from photographers:

All photographers were unanimous: many times their pictures are published without their credits, sometimes even with wrong credits. They get pissed when the picture is cropped, when people use Photoshop to manipulate it, or on low resolution and distorted (wrong aspect ratio).

User flow & Wireframes

With tight time, I skipped the design apps and only wrote in a piece of paper the following user flow:

User goes directly to the Homepage See all the day highlights Click a gallery Share or download picture(s) or the entire gallery
The user comes from a Search Engine directly to a gallery Realises it’s not the right one Checks the related content Clicks on the right gallery

Basically there are 2 templates: The gallery list page and the gallery page. Instead of using a wireframe tool, I only wrote the feature / content list on a paper.

List page:

  • Header
  • Search field
  • Most important galleries highlighted
  • Sponsors logos
  • Each gallery links with:
    • Title
    • Date
    • Image
    • Image credits
    • Category
  • Footer

Gallery page:

  • Breadcrumb
  • Title
  • Date
  • Image
  • Image credits
  • Category
  • Terms of usage
  • Share by email
  • Download gallery button
  • Related Galleries
  • Sponsors logos

I validated these informations with the stakeholders and started coding the wireframes in HTML, CSS and jQuery.

p-fotos-publicas-wireframe-home
p-fotos-publicas-wireframe-single

After the client’s approval, I sent the HTML wireframe to Paulo, the programmer I worked with, who started to develop it using WordPress. This part took 4 days.

Time to create the visual identity