When a retailer decides they’re ready to implement business printing services, it’s a big deal for us at PNI. As of January 2017, we’ve made it happen for Sam’s Club.
Carlos Lavara and Declan Sharkey are Creative Front-End Developers. Working in tandem with the back-end developers, they turn ideas into code.
PNI has designed business printing sites before – using our Apollo platform. With that to provide the codebase, and free rein from the client, the development teams made a plan and got to work.
THE SCIENCE OF INTERACTIONS
Our creative developers take the user-flow from the UX team and the visual mock-up from the UI team, and they bring it to reality by creating the visual structure. They apply the “coat of paint” by theming every element of the site to the client’s brand, and designing each nuanced interaction.
They create the basic interactions. For example, hover over the main navigation bar and the drop-down box opens below. It occurs instantaneously, but watch closely and you’ll see the subtle changes in font colour, the unfolding menu, and the fade – all of which are written into the code.
Hover over the three primary category tiles on the home page and watch what takes place. The title slides up. The Browse button fades in. The image zooms out. A gradient appears behind the text.
It’s so natural that it almost goes unnoticed. But there’s practical and aesthetic purpose behind it. Such interactions allow you to display all of the required info, without making it look cluttered.
Navigate to any specific category of business cards and move your mouse over the various designs. The card tilts. It’s a simple animation, and relatively easy to implement – once it’s been agreed upon. How much of an angle will it tilt? Will it tilt from top-to-bottom, or side-to-side? What will be the start-state?
It’s more complex than it appears, but there’s a secret to successful interactions:
“They need to be able to be repetitive – without being overwhelming or annoying – while still providing information to the user.” - Carlos
When done well, the subtle animations bring a bit of fun and interest to an otherwise uninspiring page of search results. Put simply: it’s eye candy.
MOBILE MODIFICATIONS
While many of these intricate hover-over interactions aren’t possible on mobile, you’ll find responsive, similar iterations that work in the limited space. Tap the pancake menu button in the corner and watch it transform into an x, and vice versa. This is a micro interaction.
“Micro-interactions: feedback to the user that something is happening.”
The smallest transition indicates that the function of that icon has changed.
MIXING BUSINESS WITH PHOTO
Merging the photo gift site and the business printing site makes life easier for the customer. For the creative developers, the challenge is to create a seamless design that crosses two completely different platforms. The simplest design elements, like the faint gray line on each page, take plenty of trial and error to integrate through the checkout process.
“It all had to be rethought. The details that are so subtle and small, those are the obstacles.” - Declan
“And that’s the interesting part.” - Carlos
NOW THAT IT’S ALL SAID AND DONE
This team is particularly proud of the Sam’s Club Business Printing project. Not only because of the clean design that they produced, but also in terms of the production process. The client was receptive and open to fresh ideas, and the development teams were more in-sync than ever. They’ve worked out communication bugs and have developed a solid understanding and respect toward the needs and priorities for each team, all of which were integral to the successful launch of the project.