Phil Swan / Letter Jacket

Artwork editor for Letter Jacket

The redesign of an online envelope customisation tool that enables customers to add their own artwork and preview the result before they buy.

My role: Design lead
Interaction design, usability testing

2015

The ability to customise envelopes is an important part of the Letter Jacket business. Their previous artwork editor had most of the functionality they needed, but the system wasn’t performing well. Conversion rates weren’t ideal and Letter Jacket were frequently receiving questions from customers about their orders.

I collaborated with the marketing team at Switch and development team at Good Work to improve the process for customers and reduce the workload for Letter Jacket staff.

After an initial analysis of the system and a discussion with the business stakeholders, we had a fairly good idea about some of the main issues, but we wanted to observe customers using the tool. We sourced some candidates for usability testing and asked them to talk through their thought process as they completed tasks we had prepared. Here’s what we learned:

  • Users were ignoring the lengthy artwork guidelines

  • Many users completely missed content that was hidden behind tabs

  • A fair amount of the terminology used was geared towards printers and graphic designers and wasn’t understood by the majority of their target customers

  • Some of the user interface elements were not obvious enough

  • Work was being lost by accidentally clicking outside of the overlay, causing frustrated users to abandon the process
Two screenshots of the artwork editor
Comparison of the old interface (left) and redesigned interface (right)

We explored some new designs for the interface and produced a low-fidelity prototype. This prototype allowed the project team to visualise the full process and identify any technical and operational challenges. We were then able to refine the prototype to make sure that we were playing to the strengths of the back-end system and also optimising the workflow for the people managing the orders behind the scenes. Some of the changes to the user interface include:

  • Guiding users through the process, making the experience more linear

  • Requiring the user to make small decisions as they were completing tasks, rather than expecting them to read lengthy guidelines

  • Allowing users to see customisation options for both sides of the envelope on a single screen

  • More conventional user interface elements for features such as text input
Six screenshots of the new design
Screenshots from the new order process

A visual style guide was created, detailing all the interface elements which could be used as a reference by the development team. This included typography, colour palette, layouts, images and language. We worked closely together to make sure that the implementation went smoothly.

Demonstration of the artwork uploader in action

The result has lead to a significant increase in online conversions with fewer customers abandoning their orders and fewer queries to Letter Jacket.

“Phil is truly an amazing talent and individual. We are always looking forward to the next project to fold him in. His contribution to the Letter Jacket project was a UX breakthrough and has spiked engagement and conversions, all the while minimizing customer service support calls. We could not recommend him more.”

Glen Collins
Partner, Switch

More projects