Print It
Digital, Inc.

Responsive Website
Print It Digital is a multi-format print shop serving the Greater Los Angeles area. They are a new business and are in need of an e-commerce website that allows customers to find products and easily place orders online.

Due to the high volume and complex formats of some print jobs, companies rely on out-of-house printing shops, like Print It Digital, to complete their jobs. PID offers a variety of printing formats, each with their own customization options. With an overwhelming amount of options available, PID wants to make the online ordering process as simple as possible.
My Role
Research, User Flows, Information Architecture, Sketching, Wireframing, Branding UI, Prototyping
Client
Print It Digital
Timeline
4 weeks

The Challenge

The original website was built in Wix and does not display their entire range of products and services. Although users can send orders through the site, the options-heavy order page can be daunting for first-time users. The signup process is also completely reliant on email or phone communication.
The challenge is to design an e-commerce website that provides seamless a web-ordering experience

High-level Goals

  • Design a responsive e-commerce website that allows for customers to: send print job orders, learn about services, and request quotes.
  • Refresh Print It Digital branding
  • Design account sign up flow to reduce email and phone communication

My Process

1. Discovery

Competitive Analysis

I looked at direct competitors (reprographic print shops) and printing-related websites to get a sense of recurring patterns. My summary of findings include:

  • Important CTAs include “Send Order” and “Get Quote”
  • Customer service is easily accessible
  • Product pages show images and specs
User research

I interviewed four participants on their experience with ordering print jobs online. Three participants work in architecture firms that need special large format printing and binding. One participant uses printing services for marketing collateral. I found that:

People in smaller companies with no admin share administrative duties
Sometimes rush orders are needed within hours or the morning after
Architects and engineers often have limited time and multiple deadlines

Meet Robert

I used the findings to construct a persona, Robert, to help align design the design strategy and goals of PID.

Meet Robert Li, an architectural  design associate who has multiple project deadlines and needs a streamlined printing process to save as much time as possible.

2. Define

Brainstorming Features

To brainstorm features for the product roadmap, I created How Might We and Point of View Statements using insight from my research and my persona’s empathy map. The statements were especially useful for identifying realistic problems through Robert’s perspective.

Information Architecture

I mapped out the entire site and organized the services by their sizes and popularity: Large Format, Small Format, and Grand Format. Newly added singular product pages will help the user learn more about the services offered. I also included sign-up and account pages to allow for multi-user printing and admin access to billing information.

User Flow

After exploring a few different flows,  I decided to go with one that allows the account admin to create the company account and invite individual users because it is a more organized system that allows the admin to track prints and securely store payment information.

3. Ideation

Using Sketch, I created mid-fidelity wireframes after quick napkin sketch explorations. The wireframes focus on the organization of products, ordering process, and account creation and management. I completely redesigned the ordering process, breaking it down into four separate pages with product-specific options rather than every single option in the entire site possible on one single page.

My clients did not want to include pricing on the individual product pages because their customers are given unique pricing rates based on their printing frequency and size.

4. Prototype

I created a clickable mid-fidelity prototype in InVision.

5. Validate

User Testing

I conducted user testing on my mid-fidelity prototype in InVision to see how users would complete certain tasks once they were given some context. I conducted my testing with individuals who have ordered prints online.

Affinity Mapping

After the testing, I organized my findings in an affinity map to identify the positives, the issues, and potential solutions that would be incorporated into future iterations.

6. UI

Branding

The PID co-founders felt that their original logo and colors were hard to incorporate visually so they were open to entirely revamping their branding.

And so the logo exploration began! I began playing with the idea of paper meeting digital, but the first explorations didn’t make the cut because they appeared too friendly or too representative of household items…

In the next round of explorations, I incorporated sharper corners to make it appear less like a tech startup. The client really liked the folded corners and decided that their favorites were in the third column.

Style Guide

I wanted to translate modern printing into colors. Blue and too much white can appear sterile sometimes, so I included a bright yellow accent color in the color palette. My other option was magenta (playing on CMYK) but it was too bubblegum & child-like.

High-fidelity Prototype

7. Measuring Success

Once the website is live, we will be measuring for:

  • Sign-ups completed online
  • Number of orders placed online
  • Completed orders with no errors

8. Recap

Reflection

All of the changes were positively received by users who were familiar with the original PID website. The final prototype yielded successful task completions and positive feedback about the revamped branding.

The PID Team are masters at anything and everything related to paper, but needed help in bringing their vision of a modern printing experience to life. Diving into the reprographics print world opened my eyes to the many little details crucial to production: size, texture, binding, delivery, time… all of which I learned should be easily specified by the customer.

Next steps

The PID co-founders would like to rebrand in late 2018. They have plans to bring a developer on board to start implementing the new website. I will be handing off redlines and working with the developer to see the project to production.