The Action Photography Case Study

John Shiels is the face behind the camera at Action Photography, a company synonymous with adventure sport photography in Ireland. He came to us with the challenge of designing and building a tailored e-commerce system, enabling him to quickly put 1000′s of photos on sale following each event he covers.

Update: Action Photography is a finalist for “Most Beautiful Website in Ireland” in the Realex Fire Web Awards 2013.

E-commerce: Bespoke vs Platform

At the back-end an event is created, galleries are uploaded, and images go on sale automatically. The key here is going from image upload, to photos on sale, quickly, with as little effort, and as few steps, as possible.

We researched several photography specific e-commerce platforms, as well as Shopify, which we love dearly. However, the typical e-commerce product-adding flow has been designed from the need to curate individual products with varying attributes. Adding 1,000 photos, one by one, is a labour of insanity, so we decided to roll our own.

In our case, the only product type is an image. Images can be ordered by size, and in printed or digital format. That information is set from one easily manageable location. Images also belong to a gallery, which belongs to an event. That information is set when images are uploaded to a gallery, and a gallery is added to an event. The only outstanding variable is a unique way of identifying each image, for which we use the image file name. Based on John’s own image naming convention, file names will always be unique.

The result? After a long day shooting an mountain-set adventure race, John creates an event, uploads his galleries, and his photos are on sale immediately for eager participants.

On your marks, get set, Animate!

We applied the adventure race concept to the home page, to visually direct and connect the copywriting which gives a linear synopsis of the information hierarchy of the site. The animated adventure race ends with a finish line call to action, encouraging visitors to to begin the first step in the primary user flow; to find and purchase their event photos.

The animation is driven by John Polacek’s fantastic Superscrollorama.

Performance

Speed is a necessity. In the case of the image-heavy Action Photography, we paid close attention to page load time and size. I wrote in detail about the technical steps involved in our front-end WordPress speed optimisation. Here are the results in summary for the home page:

Desktop Performance

  • 1,200kb transferred
  • 4.86s (average load time, without caching, on my machine and connection speed. Post-caching averages less than 1.5s)

Mobile Performance

  • 708kb transferred (41% lighter)
  • 2.96s (average load time, without caching, on my machine and connection speed. Post-caching averages less than 1.5s)

Mobile First

The bulk of the desktop 1.2mb comes from the animation images, which are only rendered above a medium sized viewport width. We use a ‘mobile first’ technique which saves mobile user’s bandwidth. I also wrote about conditionally loading JavaScripts for the home page animation to again improve mobile performance.

Responsive Images

Across the site we designed and implemented a responsive images technique, where small, medium and large images are served up dynamically depending on the user’s viewport size. For each of the three sizes, a hi-resolution equivalent is displayed for users with retina screen devices, giving a total of 6 variants for each image. That means appropriately sized, crisp images, are delivered for the device being used, whether that be a smart phone, tablet or desktop.

Going the Extra Mile

Pleasantly surprising clients is a good thing (provided you have determined it is something they will really like, and will serve their business goals). It’s like giving someone an unexpected present.

Here is one of the surprises we designed for John, our Lost Photographer 404 page.

Nerd fact: The pole, signs and arrows are made with CSS-only goodness. We also use Modernizr for progressive enhancement, to selectively style the CSS rotation transforms for supporting browsers.

Design

Steven is responsible for all illustration. The primary colour, orange, communicates energy and action. The display typeface, used for headings, Ubuntu, is balanced with Myriad Pro, for body copy. Both are served up by the awesome Typekit.

Nerd fact: We aimed for a 72 character typographic measure, all type units are set in ems, so the measure is preserved while zooming in or out, and we maintain a vertical rhythm on type elements.

The logotype also uses Myriad Pro, which was the existing visual branding. We bravely opted for a text-based logotype. Which means one less http request and perfect scalability. The flip side is variable rendering quality, particularly in older browsers.

Icons are served up with thanks to the magnificent Font Awesome, created by Dave Gandy.

Layout and Grid

Several templates featured full width layouts, where the content hugs the left and right sides of the browser and fills large screens are gracefully as it does small. An 8 column fluid grid brings consistency. The idea came from trying to get visual decoration out of the way of the content, the images. Galleries fill the screen like a rich mosaic.

Nerd fact: The layout is responsive of course, almost every element uses a percentage based width.

Skeuomorphism and Flattening Trends

Following on from my brief commentary on the flat design trend, we embraced the polaroid. We love it, our client loves it, and most importantly, his users love it.

Development: Browser Support and Progressive Enhancement

Our baseline at Logo24 is to support Internet Explorer 9 and up, while providing an accessible fallback for older browsers. Earlier versions of Internet Explorer get served up the IE Universal Stylesheet, which provides access to all information on the website, with a basic typographic layout.

All fancy CSS gracefully degrades on older browsers, as do the JavaScripts.

The Bottom Line

Project Goals

  • Create an incredible user experience, for viewing and purchasing photos.
  • Design an intuitive and reliable admin, for managing massive numbers of photos.
  • Increase print sales.

Success Metrics

  • User feedback, primarily via social media. (Initial Facebook response)
  • Client feedback.
  • Compare post-launch sales with average monthly sales of the previous 6 months.

Responsibilities

  • User experience and user interface design.
  • Content refining; improving existing information architecture, and bringing a consistent tone to all copy.
  • Tailored e-commerce development.
  • Responsive front-end web design.

Want to hire Logo24?

We’re always interested in hearing about exciting new projects. Get in touch.

Paddy O’Hanlon is a web designer and one of the principals at Logo24. He is a lover of good semantics, well documented and architected CSS, and beautiful, content-driven design. (Really the design-guise is a cover-up so he can covertly feed his travel addiction and climb many rocks around the world). He tweets @Paddy.

Comments make us happy