Project

Good Ink: supporting your cause one custom-designed shirt at a time

Design

Lots of design work went into not only creating the Good Ink brand, but also creating an interface that was easy to learn and use, despite its complexity.

Commerce

The site’s e-commerce capabilities are powered by Drupal Commerce with customizations by RDG to provide the ideal experience for Good Ink users.

JavaScript

A custom t-shirt designer was created using Paper.js, allowing users to manipulate a combination of raster and vector artwork on an HTML5 canvas.

Good Ink makes it easy to design and sell custom shirts and raise money for your cause.

In April 2016, Michigan Awesome came to us with an idea. We had been supporting their existing business, a premium state-pride brand of apparel and merchandise, for some time, but now they were ready to strike out in a new direction. The new venture: a web application that allows anyone to raise funds for their personal causes by selling custom-made apparel. The project had a name (Good Ink) and a bold idea (crowd fundraising with tangible, custom rewards for donors), but needed to be shepherded into something real.

Research

As we got started with the research and discovery phase of the project, we identified two primary challenges ahead of us. The first was creating a custom design tool where a user could create eye-catching designs using artwork of their own or provided by the site. The second was putting together a content and eCommerce engine that could handle the creation of campaigns and the purchase of custom apparel. On top of this, we knew the end product needed to be an excellent user experience, so that people would try it out and return to use it again.

Good Ink logo designed by Rapid Development Group

We started with a deep dive into the competitive landscape for this industry to understand what our top priorities were right out of the gate. While that was happening, our front-end and UX team worked on the branding and prototyping. They quickly came up with a logo and tagline that Michigan Awesome loved. The design prototypes were also adopted with little revision; what you see today is what we prototyped (that doesn’t happen all that often). On the back-end side, we gathered our research and documented the strategy for implementing a launchable product and got to work.

Implementation

We knew that Drupal was a great fit for this project. It is flexible enough to handle the content and eCommerce requirements of Good Ink, while still scalable and customizable. When this project began, commerce solutions for Drupal 8 were not stable enough for our needs, so we focused on Drupal 7 and Drupal Commerce as a solution.

While our lead front-end developer put together the CSS and templates needed to realize the site design, two of our senior developers worked on the project full time: one focused on the shirt designer tool, and the other on the campaign-building workflow.

Building a Custom Design Tool

The shirt design tool brought with it some specific requirements. The final output produced had to be in a vector format that Adobe Illustrator could work with for printing purposes. We also needed a powerful and scalable solution that could handle image hosting and transformation. This meant we needed a client-side drawing architecture that could be coupled with some powerful server-side image handling.

Good Ink t-shirt designer

The engine running behind the designer canvas is built on a JavaScript library called Paper.js. This library is an open source project and is incredibly powerful. Building on the capabilities of HTML5 canvas elements and JavaScript, Paper.js allowed us to build an interactive drawing tool with a custom user interface, while minimizing the number of mathematical operations we had to perform. We can thus manipulate a combination of raster and vector artwork, and store this as a JSON representation internally, while also producing an SVG version of the drawing layer for later use in the garment production process.

Rather than implement the server-side image transformations from scratch, which would not be achievable within the project budget, we chose Cloudinary as an image storage and transformation tool. Imagery uploaded by customers are stored in the Cloudinary data store, as are the completed designs. Cloudinary then is able to deliver composited images of designs overlaid on plain garments in any color, at the various sizes needed throughout the site. While there were implementation challenges to overcome with the service, it is a leading tool in the industry and will scale to the needs of the project.

Managing Customer Campaigns

The campaign building workflow incorporates several complex calculations for determining how much an organizer actually receives for their cause if their campaign is successful (by reaching a minimum number of sales). This calculation is based on the number of inks and prints the user has in their design, in addition to the types of garments they chose. On top of that, the user has to specify information related to their campaign that impacts how long the campaign runs, where items are shipped, how much the items cost, how to handle donations, and so forth. Once the user has chosen their garments, created their design, and filled in details about their cause, we can begin selling their items.

Good Ink campaign page, where users can buy the t-shirts designed by the organizer.

The commerce solution to handle this is built on a variety of technologies. In addition to Drupal Commerce providing the overall framework, we employ PayPal for handling the card transactions and ShipStation for managing fulfillment. A sophisticated set of rules and actions ensures that these take place at appropriate times. We then built custom dashboards and reports that Good Ink can use to track sales, modify and maintain campaigns, and refund orders. Of course, any application hosting user-created content can only succeed though users publicizing their own work. To help campaign creators along, we implemented custom social sharing features and a series of automated emails that help organizers promote their campaign and ultimately get more sales.

Launch

The application is now available on goodink.com, with many campaigns running in its second month of operation. Some organizers have already raised well over $1,500 for their causes using the tool. It’s completely free to use and it takes only minutes to get started. You can start your own campaign today!

We'd love to chat about your next web or application project!