DIFF Clothes Customize Service

Our customer was insistent on giving the user a tool with an intuitive, good-looking and accessible interface, developed for touchscreens.

With the help of a kiosk multi-touch table stand, the user creates a design out of a wide selection of prints, stickers, labels and their own images to be heat-printed on T-shirts and phone cases.

Before creating their design, the user selects a template for a T-shirt of suitable size (and type if it’s a women’s T-shirt) or a phone case for one of the phone models. A minimalistic model is rendered according to the existing pattern or shape of the clothes/case to let the user fully focus on their design.

After we established the right button size and decided on the design elements, we thought about the best way to place them on the screen. We kept these two things in mind:

Consequently, we decided to place all of the control elements at the bottom, freeing up space and making it so the user wouldn’t have to reach for the buttons on the top of the screen and lose sight of the model.

We chose Adobe AIR because:

The customer asked us to draw up minimal hardware requirements for kiosk computers to run DIFF smoothly.

Having looked into it, we have compiled a list of required hardware:

To keep the design creation process smooth and interface response instant, we decided to work with copies of the large source images shrunk to 1200 px (on the wider side). After the source images are uploaded to the server, they are automatically copied in 1200 px and sent over to the app.

The server side was made using the Rails framework. The carrierwave library handles the uploaded files, and the mini_magick library processes the images with the help of the imagemagick package.

DIFF has a lot of graphics: prints, stickers and fonts. We required an uploader that would quickly sync the content on the hard drive with the content on the server and prepare the data on the hard drive for instantaneous upload.

We could not use pre-existing solutions, as they tend to upload the content directly into RAM, which is insufficient in this case. Consequently, we wrote a custom synchronizer that gets the images from the server in such a way that the user doesn’t even notice it.

In this case, the monitor and the computer can be separated from each other, allowing to speed up syncing and general performance by installing an SSD drive.

A tool that saves action history is invaluable when something goes wrong during the creative process. We wanted this tool to:

To achieve this, the action history saving feature was made using the Actions method, which writes actions that have taken place with the objects instead of states (as per States method). The Actions method allows the app to work faster; however, there were a few issues with keeping track of a large amount of unique actions and issues with the difference in undo/redo algorithms.