Online Designer For Website

Pic The Gift
Template Design | UX Design
2019
Online Designer For Website

Overview

This designer is how users on our website create custom one of a kind products to order. Each product comes with it's own template that comes with directions  and guidelines for creating production-ready artwork.

Work

My Role

I am responsible for creating insights from interviews with customer service members and support tickets from actual customers. Those findings are used to create a more accessible online experience for all customers looking to make the customized products we offer, no matter their design experience.

The Problem

Creating production-ready artwork is a challenge for everyone, especially novice designers who may need to learn print industry terminology. As a result, many customers need help creating artwork confidently and find our process frustrating.

Research

Research came from interviews with customer service team members and the customer support tickets we received. It was essential to ask neutral questions and form nonbiased insight while using my knowledge of our products and what they need to look their best.

Findings

Users did not provide enough bleed

Bleed is the extra amount of design that is discarded through the production of an edge-to-edge printed product. When customers do not supply the bleed to their final design, there will be white space at the edge of the finished product. We often found that many customers did not understand this term. They would have questions on how much bigger they need to make their art to account for bleed and what to put in the bleed area.

Users did not understand the terminology "Safe Area."

Customers would place important graphics meant to stay on the product in the areas most at risk of being cut off through the production process. We use the term "safe area" on our templates to signify where all important graphics need to be so they make it onto the finished product. Customers would often need help understanding the meaning of this term. This confusion would lead customers to move these graphics to the product line, which would cause important graphics to get cut off from the finished product.

Users lost visibility of directions and guidelines.

With the tools Pic The Gift possesses, the web designer has no overlay option that would always be on top of the customer's artwork in the online template. Because of this, the users' artwork would cover the directions and guidelines when designing inside the online designer, which they often need to align and create production-ready art.

Users who used our provided Photoshop templates not understanding how to export production-ready art files. 

Pic the gift provides a photoshop template for customers to work with in conjunction with the online designer. The purpose of the photoshop template is to give users who prefer designing in photoshop the option to use that program to make their production-ready art. The photoshop templates method would create a group of issues, such as low resolutions because of wrong exporting methods and template assets not being removed from the final artwork before ordering products. 

The Solution

A total overhaul of our templates was the outcome of this project. First, I drafted a new set of directions. I created one direction for our photoshop template that addressed layers and how to save and hide elements in the template along with saving production-ready art. I made a second set of directions for the designer on the website, which was much shorter and didn't have to go over the layer or saving process. Both directions explained concepts such as bleed, product line, and safe space only as tasks the user needed to complete and how to achieve that. I also color-coordinated those terms to the template's guidelines, so they understood what the guidelines represented, even without the key. I also updated our designer on our website to show guidelines after placing art on the template and placing the direction in the empty space outside the designing area so the user's art would not cover that up either. 

"I can see the guide lines and directions. That made the designing process so much easier."
- Customer/Stakeholder
The difference between the original (on the left) and the new (on the right) online design template

Revised Direction

We have enhanced the instructions to provide more detailed guidance, avoiding industry-specific jargon to help clarify the steps required for creating production-ready artwork. These updated directions also emphasize additional aspects, including instructions on creating double-sided products.

Insight

Our customer service team has observed that many customers tend to produce improper production-ready artwork due to a misunderstanding of terminology and template requirements. As a result, these customers often reach out to our support team, and it's only after speaking with a customer service representative that they grasp the essential elements necessary for creating their desired product.

The difference between the original (on the left) and the new (on the right) online design template

Revised  Template

We have relocated the instructions and incorporated opacity adjustments for the masking component to highlight the template guidelines more effectively.

Insight

When customers place their artwork onto the old template, they often struggle with the artwork covering up the instructions and guidelines. This has been a significant pain point for our customers, as they need a clear view to ensure their design aligns with the template and includes all the required components for producing their product.

Outcome

Ultimately, I had a template that significantly decreased issues with customer-provided artwork and lowered the number of tickets customer service would receive with questions about creating production-ready artwork. Not only that, but it standardized the approach Pic The Gift has to create new templates and update old templates.

More work