Case study: Custom Digital Downloads, an extension for WooCommerce

This is from a lightening talk presented at WordCamp Switzerland in Zurich, May 3 2014.

Here is the full transcript:

Slide2
Last year a client came to me and said, « Jenny, we really liked the work you did for us before, and we have a new project. We want to build an e-commerce site to sell paper products, but we don’t want to deal with stock and deliveries, we only want to sell our designs, so the actual products will be high quality, downloadable PDFs, and our customers will have them printed on their own.

And we want to do it with WordPress »

« Sure, » I said, « sounds great. »

« But, we want our customers to be able to personalize the products before downloading - they need to be able to change the texts and colors, to make it their own.»

And that’s where things got interesting.

My husband and I basically eloped - we skipped the ballroom rental and fancy cake. It was just us, a bouquet and a couple rings. Since we didn’t do a big budget wedding, nor have I attended many weddings, I had never given it much thought, but marriage is a huge industry, and it turns out that paper products — save the dates, RSVPs, menus, thank you notes, cake toppers — are a big part of that industry. A couple can easily spend hundreds even thousands - on these items for custom design and high-end printing.

Slide3
The clients in question are wedding planners. But frustrated like many of us in the service industry can get having a limited amount of time and energy to sell, they wanted to branch out into products.

Slide4
The idea behind this site was to create a more affordable option for couples to create these lines of paper products for their weddings, while maintaining quality and a personal touch.

Slide5
The idea isn’t new, we’re seeing more and more of these customize-your-own websites pop-up all over - everything from shoes to handbags to furniture. I had actually worked on a similar project back in 2008, so when we started looking at the competition I was in somewhat familiar territory.

Slide6
The first site they showed me used a Flash interface, which is the route I had gone before. The great thing about Flash is how much detail you can get into, working directly on the image and with some pretty sophisticated tools for manipulating objects, fonts, color, alignment, etc. So the layouts can be pretty elaborate.

Print-quality design for me meant vector graphics. But Flash was off the table - the client wanted the website to be iPad compatible (and to be honest I don’t work with Flash anymore).
Curiously, the output for this site was a PDF, but it turned out to be just an embedded JPG - they had chosen to rasterize the image first. I didn’t want to do that.

I’ve always been involved with the web, but have a great fondness and respect for print media. Our PDFs were going to be better.

Slide7
The second site they showed me uses this form layout. It’s very impractical because you have no immediate preview of what you’re doing, or clear idea of what information corresponds to which elements on the product. The color palette isn’t interactive, it’s just a reference. The whole thing makes you guess at what you’re doing – not at all intuitive.

However, overall this was the client’s preferred site, and what actually inspired the initial design mockups.

Slide8
This last site came to our attention a bit later into the project, helped confirm the position we were taking both in terms of function and interaction.
- We wanted to work inline, without using Flash
- We wanted to provide high quality designs with relatively sophisticated layouts
- We wanted to provide personalization, but with limits - choice, but not too much choice.

This is the most sophisticated and the most commercially successful of the three sites, but it still feels clunky and awkward. And where they’ve chosen to limit the customization options on color and on the graphic elements of the product, they leave the consumer wide open to move stuff around the page, potentially creating a disaster. It looks cool, but is this really the freedom that a consumer wants? Customers aren’t designers. Is the site really helping them to conceive a well-designed product for their event?

Slide9
I knew that working with vector images without using Flash meant only one thing: Scalable Vector Graphics. Now I hadn’t worked with this file format much before, but had really been wanting to, so here was a perfect opportunity.

But while we had been focused on the customer interaction with the site, it suddenly occurred to me - ok, but how do we get the stuff into the site? It wasn’t enough to have the design ready for upload, we needed a way to define which elements were changeable and in what ways.

It was in this moment that I realized the job was much bigger than I had imagined. I also realized that I couldn’t do it on my own.

Slide10
I was confident though. Afterall, you can do anything with WordPress, right?

And lucky for me I was able to recruit some top notch help, and together with Rarst we embarked on what would be the most intense and trying 8 weeks of my career.

Slide11
The end result of those 8 weeks is an extension we built for WooCommerce that we’re currently calling Custom Digital Downloads.
Although it’s been suggested that the name is a little too similar to another popular WordPress plugin, but until I can come up with something better, it’ll have to do...

Slide12
It’s essentially comprised of three parts.

Slide13
To get the stuff in, we tied into the product information tabs already provided by WC, adding a new «custom» option and its associated «design» tab.
You just upload the SVG file using the plupload interface. You can then select one or more elements and define their behavior individually or as groups by assigning them names.
Other features have been added here too to manage the actual PDF output.

Slide15
The front-end interface is very simple, and can be customized through the site’s theme. I’ve simplified it even further here just for demonstration purposes.
I like that’s it’s both interactive and immediate, without the clunkiness of having everything happen right on the image. We still have work to do on it, but overall I think it’s much more successful and intuitive than what we had seen before.

Slide17
The PDFs are generated on the fly, and are also tied in through WC and the downloadables function - so they show up the same way a classic downloadable would, with a link provided in the confirmation email to the customer and on their account page.

Slide18-20
The PDF is high resolution, fully vectorized with embedded fonts.

Slide21
The v1 launched on March 24th, and now we’re gearing up for a v1.1 which will add a bunch of improvements and new features. The plugin isn’t currently commercially available, but we’re thinking about it.
Thank you.

Transcript