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
I looked at direct competitors (reprographic print shops) and printing-related websites to get a sense of recurring patterns. My summary of findings include:
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
Once the website is live, we will be measuring for:
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.
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.