Web-to-Print E-Commerce
UI / UX DESIGN
Not all print and direct mail jobs require an elaborate production setup. Projects like postcards, flyers, and stationery can move through the process quickly since they aren't very complex. The web-to-print e-commerce solution aims to create an accessible portal for project managers to submit jobs straight to production. This approach would alleviate unneeded effort from different departments.
The web-to-print e-commerce interface is part of an existing internal application. Keeping the interface uncluttered and concise lets the user focus on each section of the process. Additionally, the multi-column layout keeps track of their progress and clarifies what step they are on.
ROLE
UI / UX Design
PROJECT TYPE
Web Application
SOFTWARE
Adobe XD
Adobe Illustrator
Art Upload
Every job starts with the customer's art and job details. In this example, the art is a duplex 6" wide x 4" tall postcard for a company called BerryMix. The customer and project details remain stationary at the top, and each phase of the process is depicted on the far left side. Since this is a print and mail project, additional modules are listed for the mailing data.
The center column shows the necessary steps for the artwork. After uploading, the PDF goes through a preflight process, and a preview appears on the right. This step is crucial as it will determine if the art is appropriate based on the project type.
I kept the art prominent in this section since it is fundamental to any print and mail job. Additionally, the preflight report is displayed clearly and concisely to provide feedback to the user. If the art is incorrect or an error occurs during the preflight process, the user has the opportunity to revise it before getting too far in the process.
Web-to-print art upload with preflight details. Information has been modified to protect customer identity.
Map Mailing Data
Customer data can be a wild card, and the goal of this project is to make the process simple. To ensure the system understands how it should interpret the mailing data, the project manager has to map the header fields. Mapping the fields means matching what the customer has provided with the system-generated labels.
To increase the usability of this section, I designed a drag and drop feature. The project manager selects a variable from the top and moves it to the dotted area above each header. Like the art upload, the data is prominent and precise for the project manager to evaluate.
Web-to-print mail data mapping with system variables. Information has been modified to protect customer identity.
Web-to-print mail data mapping illustrating the drag & drop functionality. Information has been modified to protect customer identity.
Configure
After the customer data is mapped, the project manager must configure how to handle the data, mail permits, seed, and proofs. Since this section has a lot of options, the project manager is shown a review of their selection before continuing.
The configuration portion is a lot for the user to take in at once. Therefore, I designed each section to be a vertical layout that will collapse once complete. Dividing the information into more digestible sections is less overwhelming for the project manager.
Web-to-print mail configuration review. Information has been modified to protect customer identity.
Address
The final step of a direct mail job is for the project manager to format the address block. The variables are defined within the editor, and the block is placed directly onto the PDF preview. USPS has restrictions for the address, so the application has an invisible bounding box to prevent an invalid placement.
I designed each variable in the rich text editor to have a preceding hashtag. This allows the project manager to recognize the variable within the address. Additionally, a list of variables will appear when the hashtag is typed for better usability.
Web-to-print address block format illustrating variables inside the editor. Information has been modified to protect customer identity.
Web-to-print address block format and placement with all variables. Information has been modified to protect customer identity.