2020.06.08

73

Iterate and develop! Support for Adobe Illustrator and PDF files in design editor.

Hi, I am Robin, working as a front end developer for the Incubation Business Unit (IBU). Mainly I deal with handling the front end system for IBU products in raksul.com and the Novelty service. In this blog the primary focus would be on the Novelty service.

Novelty service

Raksul Novelty

Novelty is a new print service by Raksul, where users can design and order print of novelty goods. The service launched in April 2019. We started with 4 categories of products, that has increased to 11 categories of products (with over 400 products!) over a period of one year. With more products on board from a small product like a pen to a large product such as a bath towel, how the users came to use the service also kept changing.

The problem (one of the problems)- The design editor

When the product was launched it was dominated by products that had small print areas. It can be safely said that small print areas mainly contain company logo and/or a statement of text. As we introduced products with larger print areas, designs start getting more complicated. Initially designs that could be created with only PNG image files of maximum 2MB size, now cannot become great designs because of the file type and size restrictions.

Moreover, a large portion of our service users are businesses that need custom prints for distribution of their company’s novelty goods. Businesses tend to have separate actors for design creation and purchase of such goods. As a result of which professional design data is more readily available in Adobe Illustrator or PDF file formats, or larger files sizes ensuring better quality. Not supporting these types of files was an opportunity cost.

The solution

The solution is of course to have a system to support Adobe Illustrator and PDF file types. That being said, there were challenges that we needed to overcome to make this possible. With limited resources, and tackling a mountain of other problems at the same time, we needed to make sure that expanding support for file types would pay off! And hence the project moved in two stages.

Part 1: Manual support using request form for print of designs in Illustrator files

Users would need to fill out a request form where they upload their designs in Illustrator file format and make a request. Our operators would manually create designs for users based on these files. The user then checks if the design is as expected and completes the order.
No changes in the support for files were made to the editor at this point in time.

Illustrator request form

While part 1 was in operation, we monitored the following metrics:

  • number of requests for design using Illustrator files
  • % of users who confirm order after checking manually created designs
  • revenue per user for orders with Illustrator file uploads

Positive tendencies for all the metrics, implied the start of part 2 of the development process.

Part 2: Support for user uploaded Illustrator/PDF files in the editor.

New Editor

Part 2 involved development for support of larger file sizes and Illustrator/PDF file types. The highlights were upgrading our image processing architecture and file validations.

  • Accepting larger files (2MB → 10MB)
    For being able to accept larger files, we needed to make sure that our servers can handle the load to process larger files. We made changes to the architecture how these files were processed to make sure our servers would have sufficient capacity.
    Synchronous image upload and processing process was changed to an asynchronous process to better handle more and larger files.
    Image processing architecture
  • File validations – client and server side
    file validation
    Providing faster feedback to users makes for a better user experience. Validations that do not need opening of files are done on the client side, while file validations that need opening and checking files are done on the server side. By providing accurate errors to the user, we make sure the user is always aware of the next action.
    There can be numerous errors while processing Illustrator/PDF files because of the vector nature of it’s contents. We only provide specific error messages to user that are most likely to occur.

    • PNG files
      • size validation: client side
      • dimensions validation: client side
    • Illustrator files
      • size validation: client side
      • Illustrator version validation: server side. Older versions of Illustrator files cannot be processed due to compatibility issues.
      • multiple art boards validation: server side. While PNG files are always singular image files, 1 Illustrator file may contain multiple art boards resulting in multiple images being extracted from that 1 file. The system handles this error and asks the user to upload an Illustrator file containing only 1 art board.

      Our service provides Illustrator file templates for making sure Illustrator designs are compatible with our system. We recommend users to use these templates for designs in the editor.

    • PDF files
      • size validation: client side
      • dimensions validation: server side
      • multiple pages validation: server side. Similar to multiple art board Illustrator files, we have error handling for PDF files with multiple pages. The user is shown a message to upload PDF files containing a single page.

Conclusion

The part 1 of the solution was in operation for around 6 months. It took us around 3 months for development of part 2, to upgrade the system to be able to handle larger files and more file types.

We saw a growth of over 5 times during part 1 in number of requests. With more than 100 users per months requesting use of Illustrator files for designs, around 85% would checkout and complete the purchase.

Since the release of part 2, there has been 0 cases of inquiries about the design editor. It has taken off great load from our operations team who were previously handing 100 requests in a month.

The key takeaway

Always run iterations. Don't deep dive into resource intensive projects without testing a minimum viable feature first. Running a minimum viable feature made us better understand what our users needed and hence a better specification sheet for what we needed to develop. It helped the team to be confident in pushing resources for this development and developers to be motivated to develop and release the feature.

Hi! I am a front-end developer currently building our new Direct Marketing service and maintaining our Novelty service. Delivering the best web experience to users is my passion.

Iterate and develop! Supporting Illustrator/PDF processing
2020.06.08 #Culture
73

Iterate and develop! Support for Adobe Illustrator and PDF files in design editor.

この記事のURLをコピーする
この記事をシェアする ツイート シェア はてな