Social Print Studio: Post-purchase CX

UX, product/UI design, and front-end engineering

Neil Shankar

7 min readMar 14, 2017

Client: Social Print Studio

Collaborators: Martin Bush, Laura Polkus

Tools: Adobe Illustrator, Adobe Photoshop, HTML5, CSS3, Javascript, jQuery, AJAX, Scala

Timeframe: 4 weeks, July — August 2015

Overview: While I was on the in-house team at Social Print Studio, an e-commerce printing platform, I led a team of three to design and build a feature to improve the post-purchase CX (customer experience). We were specifically focused on the leg of the customer journey between ordering a product and receiving the package by mail. This warranted a complete reworking of the existing status.socialprintstudio.com, which afforded little more than directing a user to the USPS shipping page for the products ordered. In addition to leading the design team, I developed a responsive front-end prototype for handoff to the back-end engineers.

Contextual inquiries

I began the design process by conducting contextual inquiries and one-on-one interviews with customer service (CS) representatives, with the goal of determining the most common reasons that a customer would contact CS after placing an order. Through the interviews, CS reps expressed that they were receiving too many calls for issues they believed that customers could handle themselves. By providing self-serve outlets for users to address their needs, CS reps could spend more time handling unique requests and large clients. Thus, CS represented an equally important stakeholder as the customer.

Use cases

Through the contextual inquiries, I determined several potential use cases for a post-purchase page.

Alessandro in the UK should have received his square prints already, but they were stopped at Customs. In order to retrieve his prints, he needs to show proof of purchase. So, he prints an invoice from the post-purchase page to show at Customs. (Previously, invoices were not generated automatically. If a customer needed an invoice, a CS rep would use a third-party site to manually generate one.)
Daria ordered photostrips for her dorm room, but promptly forgot which photos were in the order. On the post-purchase page, she can view the photos to confirm. She wants to change one of the photos, so she calls the customers service line. When asked for her order number, she can quickly find it on the page, rather than having to search her inbox.
Cassandra ordered a calendar for her mom for Christmas, and she is worried it won’t arrive on time. The USPS tracking updates indicate that there was an error. Rather than attempting to decipher the obscure error message herself, and inevitably get frustrated, she calls the customer service line to understand her options.
Karim likes the framed photo of him and his girlfriend so much that he wants another one for the office. So, he clicks “Reorder” on the post-purchase page, and doesn’t even have to provide his billing and shipping info again.

Progress bar

We sought a solution that quickly communicates the product’s shipping status to the user, as well as builds anticipation for delivery.

I began the process by evaluating the engineering constraints: namely, the types of shipping information available to visualize. I built a prototype of the shipment tracking tool using Javascript and AJAX to ping the USPS API. I then sent an email to:

Design team, to get the ball rolling on tracking visualizations
Lead copywriter, to ideate on text labels for the tracking states
Customer service team, to keep them in the loop (after all, they were a primary stakeholder, and their feedback was invaluable)

We began by exploring map-based visualizations, but moved toward linear progress bars, however contrived they are, because in shipping, distance is not indicative of time to arrival. For instance, it may take a package 1 day to travel from New York to San Francisco, and then another day to travel from San Francisco to Sacramento.

We chose a five-stage progress bar to abstract away superfluous shipping details. We designed the visual placement of each stage to allow the bar to fill quickly, making the wait-time feel shorter. For instance, the bar may reach the third stage (in transit) within a few hours of ordering, making the user feel like half the process is complete. The designer Martin Bush led the efforts to create playful, illustration-heavy markers to reflect the SPS brand.

We later moved towards more restrained, modest aesthetics to reflect the seriousness of potentially large, costly orders. After several iterations, we arrived upon the gradient-oriented solution below, with colors interpolating among the SPS brand palette.

Error mediation

If a delivery error has occurred, a USPS.com shipping page will display the error code and message. This information can be difficult to decipher, and is not actionable to the user. Furthermore, some of the error cases are quite disturbing.

Consider error code 28: “The recipient is departed.” In the worst-imaginable use case, a customer sends her great-great-grandmother a framed print, checks the shipping status, and learns the heartbreaking news from a UI.

Instead of being presented with an unhelpful error code, the user is prompted to contact customer service, so his/her frustrations can be mediated by a real human.

Invoice

We explored a number of invoice treatments optimized for readability. Readability is especially important because of the complexity of information in each line item.

Imagine, for instance, you buy a pack of 6 rolls of paper towels at Walgreens. The line item on the receipt may look something like “1 @ 6X PAPTOW — $3.18.” While extremely unpleasant to read, it’s somewhat decipherable. Now, imagine buying 4 sets of 3 photostrips at Social Print Studio, whereas each photostrip contains 3 photos. Here, convenience store shorthand just won’t do.

The variations below demonstrate the expandable approach, in which each line item could be expanded to show more information. After sharing my mocks with the team, we decided to move in a different direction to reduce the complexity of the interaction.

Note that within each line item are affordances to view photos and reorder — two of the most common reasons for customer call-ins.

We designed everything to be responsive following a flexible card layout. Below is a comp demonstrating how an invoice adapts to various card sizes.

After several rounds of iteration, we arrived upon the invoice design below. We chose the background color to match that of the checkout flow, associating the invoice with the products ordered. The blue also serves to indicate the finality and immutability of the invoice.

When building the front-end, I developed a single-page print-friendly layout which displays only the information necessary for record-keeping. The user can reach this state by clicking or tapping the “PRINT” text label at the top right corner of the invoice card, or by cmd+p printing the webpage.

Feedback

In March 2017, I reached out to a customer service rep regarding feedback on the post-purchase page. At this point, the page had been live for over a year and a half.

“The status page you made was a huge improvement on our barely functional original page. Not only is the design cleaner, clearer and more aligned with our brand, it actually connects with the shipping updates. As I recall the original status page always showed the order was “in production”, even when there was a tracking number. Also the original status page did not allow you to view your photos. For customers to see what photos they’d just ordered was a radical change and significantly cut down on customer emails from people unsure what they ordered while they drank and shopped or whatever. The best customer feedback we got about your status page was just less emails overall, because all the information customers could want is on the page.”