Design Aglow Print

aws icon css icon html icon jquery icon js icon magento icon mysql icon php icon users icon
View Live Site →
design aglow screenshot 1

The Goal

Design Aglow Print allows photographers to drop their beautiful photos into tastefully designed pamphlets, brochures, and frames. They needed an interface that would allow a user to customize these designs by adding text, cropping photos, changing text colors, inserting graphics, and more — all within a basic web browser. In addition, the site had to automate sending off these finished designs to a printer, so the products could be shipped to the users who made them. When designing a site like this, one of the most pressing concerns is ensuring that the customization process is done well: easy to follow, consistent, and seamless.

The Solution

Since this is an eCommerce site at its heart, we decided to use Magento as the eCommerce core. We knew it to be stable and battle-tested platform, which could handle almost any basic needs that a web-store might have. This way the client could use pre-made modules for things like Gift Cards, Abandoned Shopping Carts, and Sales Pricing. With those bases covered, we were able to focus on the meat of the project: the product configuration interface.

After looking at several other options, we settled on writing the configuration interface in pure unadulterated JavaScript (with some jQuery). What we were doing was so bleeding-edge that nothing was available off-the-shelf to help with this. Additionally, the client felt that the user experience needed to be enjoyable first and foremost, and so we began from scratch to ensure we had as much control over that as possible.

The client also needed an admin panel version of the configuration tool so that they could create the products that the end-users would be configuring. This admin panel needed to be easy to use since their product designers would be spending a lot of time designing products in it. It also needed to be able to support smart switching between different color schemes for each product, a variety of output types like paper metal or canvas, and a host of different sized products with any number of pages.

The user-facing version needed to be fun to use, while guiding the users through each page of the products in a straightforward step-by-step way. Sometimes products were bundled together into packages, so the configurator needed to be able to handle configuring more than one product at once. We also had to handle different color profiles, make sure images were appropriately sized, and ensure that the client remembered to fill out each field.

An extremely lengthy list of features needed to be available, including: full text justification, printing guide-lines, auto-sizing texts for one-line fields, token-based replacement for things like names and addresses, transparency support, locked elements, and a variety of crop/constrain/drag options for inputing photos. All of it had to be able to zoom and pan, and critically it had to look exactly like what the printed version would look like.

The final solution was a beautifully crafted customer-facing configuration tool, allowing customers to insert images, edit text, and add their own logos where specified by the product’s designer, and flip between color “themes” on-the-fly. The system would take them page by page, allowing them to customize each one individually and showing them an on-the-fly preview once they were done. For bundled products, it would continue through each product until the whole bundle was configured. A customer could also save their progress at any time, coming back later to finish configuring if they so desired.

At the end, the system must produce watermarked thumbnail previews so that a customer could sign off on exactly how their customized designs would print out. Once purchased, the design would be automatically transmitted to the printer’s server to be created and shipped.

You can check out this web app live now on: