The new sfoto.se website is part of a larger strategy to renew SFF’s visual identity and communication platform. Anders Birgersson, a renowned graphic designer who we have collaborated with on many projects (see the Swedwatch case for instance), was commissioned to create the organization's new graphic identity, including a new logo and a redesign of the magazine f. SthlmConnection was hired to implement the new design on the web and to build a new technical platform for sfoto.se.

Defining communication needs

Even before talking to any external consultants, SFF had performed an internal survey of their communication needs and created a thorough specification of what they expected out of their new graphic identity and their new website. The website itself was expected to fulfill a number of tasks, including:

• Acting as an information hub for communicating with SFF’s audiences.
• Supplementing the paper magazine f with web versions of articles where readers are able to give feedback to the authors, as well as providing an archive of previously published material.
• Promoting the member photographers by enabling them to create their own presentation pages and photo galleries.
• Promoting photo books and their authors.
• Providing a closed area for members where they can have discussions and access information that is exclusive to members of the organization.

Across web and print

Working closely with the creative director for the project has been a great advantage. We have been able to make frequent checks that our designs have been in tune with the overall visual identity that was taking form simultaneously.

It has also been a benefit to the project that the remake for the printed magazine and the web site has happened in parallel, since we have been able to have a dialogue of which content should go where, and how print and web could benefit from and interact with each other. The new printed f magazine is a beautiful photographic publication that has the potential to attract audiences outside of SFF's member base. On the website, the f section gives readers complementing articles and analysis, and the forum section offers logged in members additional content, such as tests and tutorials, as well as Q&A possibilities for those who want to learn more.

Choosing a web platform

From the very beginning, SFF was set upon finding an open source platform for their website, in order to minimize their dependence on specific vendors and to reduce running costs. Being specialized in Drupal, we were happy to note that this made our standard tool set a very good fit for the project. Examining the requirements above, we found that Drupal was more than well suited as technical platform for the project.

The production process

Considering SFF's very broad set of audiences and their differing reasons for visiting sfoto.se, we had to come up with a solution that clearly separated the different areas of interest while at the same time keeping everything together consistently without sacrificing usability.

We spent a considerable amount of time planning the design, structure and functionality of the site in order to meet all the requirements that SFF had put forward in their specification, keeping the needs of the audiences in mind. Working with wireframes, we were able to identify a suitable navigation and layout structure early on in the process. We also had the technical implementation in mind during this whole process, and did some prototyping of particular areas.

A thorough design process was performed on the different parts of the website, one by one, based on the wireframes. All important pages and elements of the site were designed, tested and altered until we found a satisfying look, which also played well with the new visual identity and the redesign of the printed magazine.

Rather than finishing the design of the whole project first, development and theming happened in parallel with the design process. That way the project could move forward in different areas simultaneously, and we were able to adapt to changing circumstances along the way.

We've been able to implement most of the site's features with standard Drupal building blocks like CCK, Views, Rules and Organic Groups, only adding a few lines of glue code for particular parts that needed some special treatment. We have benefited greatly from being able to bundle up the different parts of the project as exportable packages with Features and use that to deploy new features and updates from development to the staging server.

The wireframes and design templates have been an invaluable resource throughout the project, serving as a basis for the development and theming work. Being able to refer to a visual template when talking about different aspects of the site has made it easier to ensure that everybody involved shared the same vision of the end result. In a project of this size, we have also benefited a lot from meeting in person frequently to discuss everything from planning to design details.

Making it snappy

Hosting the new sfoto.se is challenging because of the rich content and complex pages, and the fact that it will have many users logged in simultaneously. We're working with the hosting company Cloudnet to make sure the hosing environment is well optimized for this particular site, using things like Memcache for taking some load of the database, and Nginx for serving static files with very low impact on server resources. We will continue to monitor how the site behaves once it goes live.

Conclusion

We are very pleased with the result, and are excited about following the development that will continue on the site. We believe that we have exceeded our goals of achieving a great design that promotes the content and helps the visitor find what she is looking for. It is also comforting to know that we are handing over the project to a very competent client that will use the site's functionality to its best potential. The new sfoto.se has all the possibilities of becoming a leading, active meeting place for professional Swedish photographers on the web.

Screenshots photo credits

#1 Ester Haase