The original product pages on Tradeprint.co.uk presented multiple issues:
- Intro bloc way too long, forcing users to scroll down to buy (very frustrating in this context because Tradeprint users are print resellers who can spend several hours of their days just buying products for their clients)
- No call to action! Users need to guess that a click on a table cell will add a product in their basket
- Not all options are displayed, which led to a busier customer service department at Tradeprint
Tradeprint is a particular case because:
- It is a B2B company, and as such, its public is mostly using the website at work, on a desktop (only 15% of the traffic is from mobile users)
- Its users are mostly experts in the print industry (more than half are printers and print brokers, the rest being graphic designers and advertising industry who most of the time have a good knowledge of printing industry)
- They buy professionally and they like to find the best deal (ie. Compare prices)
- They also want efficiency; generally they already know what they’re looking for
- Tradeprint products are entirely customisable
This redesign started along with a brand identity refresh (and a merging with another printer, Exaprint). The navigation/header was not to be redesigned, but it was a good opportunity to refresh it accordingly with the new brand direction: lighter, and a bit more colourful/dynamic. This allowed me to replace the hardly readable green on white for pink on white (pink being Exaprint’s colour).
Concerning the UI itself, I wanted to design something that could be scalable to all products. Currently, there are several different product pages, depending on the type of product, which leads to an inconsistent and confusing experience. I had to dive into printing industry standards to understand what products do we offer (they are not all on the old UI), how do print professionals understand them, what characteristic goes with what products (ie. binding, pages and inner/outer lamination for booklets, folding type and creasing for leaflets, etc.).
I wanted to suppress this scrolling burden, this is why I moved the title, images, marketing blurb on the left side. I also wanted to have the CtA button and price well visible, above the fold, hence the price/CtA bloc on the right side, with a sticky positioning (it stays visible even when form is scrolled down).
The main form is narrow and vertical, based on results from multiple studies finding that form users are more efficient when they work from top to bottom rather than left to right. However, the form block stays prominent by being in the middle and gains in visual weight by supporting the help text. This help text, which can be reduced to a little help icon next to its related label, is light grey by default and gets darker as users focus/fill its related field (see image on right). It can be a great opportunity for discrete but efficient up-selling. This help text could also be tailored: as Tradeprint customers are currently being segmented, it would be possible to offer different advice/offer depending on the user’s sector.
Use of common cues: hyperlinks are blue and underlined (not the case in the original versions), buttons are slightly 3D (slight shadow, top slightly lighter than bottom, border – previous versions featured totally flat buttons).
Input fields and buttons are slightly 3D as a cue for interaction
Reducing mental workload: by displaying all options when it’s possible (ie. not using select drop-downs when there is only 2-3 options), by displaying labels above fields and near icons, by reducing number of options to choose from (material weight/type, field to input the size, less service options).
Icons enhance recognition and reduce mental workload
Use of icons to enhance recognition: for certain options such as binding or lamination, or functionalities (add to basket, compare prices).
The comparative table that some users like to use is more advanced and not imposed to all other users. A button just below “Add to basket” opens an interactive table where users can choose which characteristics to compare (instead of randomly preset characteristics like currently).
Finally, several new functionalities appear to enhance the overall experience: mm/inches switch, minus/plus buttons on numeric fields, order before timer (important for print industry as it display when a file is sent to the factory, it is not only a question of delivery!), include/exclude VAT from price (important for B2B services).
Tradeprint did not have any budget for UX design, so no proper user testing took place despite my advice. I however used data from survey, Google Analytics, customer services and sales departments feedbacks, as well as inputs from the print professionals working at Tradeprint to build my interface. That does not replace proper iterative design workflow nor user testing, but it can still give a lot of useful insights and ideas.