Description:
Scrapwalls.com is a photo collage web application. After users have uploaded photos and chosen a shape and a format, the application arranges users’ photos into the shape that they requested. Once they are satisfied, they can order a print of their collage.
Skills used:
PHP, Smarty, MySQL, Facebook graph API/FQL, HTML, CSS, jQuery, SVN, interface design
Case Study
A few years ago, I joined the Scrapwalls team as a PHP and front-end developer. One of my first tasks was designing and implementing the checkout user interface, which has since helped to provide a steadily increasing conversion rate. Scrapwalls has grown from a simple collage-making tool into a successful business, integrating seamlessly with PayPal, various printing API’s and Facebook.
Scrapwalls is a handbuilt PHP application that uses the Smarty templating engine, jQuery and cross-browser compatible XHTML to deliver its user interface. During much of my time, I focused on creating the three-step collage creation process. The challenge here was to provide an interface that allowed users to complete a relatively lengthy and complicated task with a minimal amount of confusion. We decided to break the process down into smaller steps, with concise yet descriptive titles, icons and instructions.
Later, I turned my efforts to the design of the shopping cart and checkout sections of the site. We did a survey of successful e-commerce sites in order to find at set of established and trusted design patterns to use, while rethinking certain features that seemed unique to Scrapwalls, such as collage previews on the shopping cart page which weren’t always ready to view by the time a user reached that page.
Soon we realized that we could add significant value to Scrapwalls by allowing people to import photos from Facebook. After learning a bit about the Facebook graph API and FQL, I was able to put this feature together so that users do not have to go through the lengthy process of uploading photos if they already have them in Facebook.