Post Print Experience

Post Print Experience

Overview

The “Post-Print Experience” is a companion mobile website which is accessible via HP's Printables offering. HP Printables are 1-5 page documents that can be subscribed to on a printer. As an example, imagine you subscribe to a recipes printable: each Monday morning, a few pages of recipe ideas (based on your culinary preferences) would automatically print from your home printer.

I designed this personalized, mobile-first experience to augment the print world. When the user followed a short url or QR code, they are able to access their post print website. The project included extensive rounds of user testing on how to best indicate this feature as well as explain it to the target audience. Bridging the gap from print to digital is a very tricky design space!

Details

Employed

100% Onsite

Mobile Application

4 months

2015

6 ui cards6 ui cards

Primary Challenges

01

Device Agnostic, Mobile Design

02

Responsive Design Specifications

THE CHALLENGE

Device Agnostic Design

Mobile-first design is so much more than the structure of a website’s breakpoints. This project focused on mastery of the smaller details within a mobile-first experience such as input types, touch-friendly interactions and the user’s accessibility to content.

To deliver a truly mobile-first solution, I had to consider everything from touch-friendly form inputs to an intuitive organization of the content itself. 

GETTING TO WORK

I designed the mobile app's content structure to allow users access to anything within just two taps. This structure of content hierarchy ensured nothing would be buried too deeply within the navigation and allowed for easy, quick accessibility to the content.

This was accomplished through heavy information architecture and wireframing at the outset fo the project. The organization and access to the content was key to this project's success.

Early wireframe establishing navigation hierarchy

After establishing a successful hierarchy through wireframing, I moved to the visual design of the user interface. The design itself was influenced heavily by the constraints of mobile. Large touch points, touch-friendly user input fields and an intuitive navigational system were my top priorities.

Due to the nature of this Research & Development (R&D) project, it was unfortunately cancelled before the UI designs could become a reality. 

Final interface design concept

THE CHALLENGE

Responsive Design Specs

As a mobile-first website, the interface design had to be flexible enough to accommodate a variety of user devices. Our user base was fairly non-technical, so we had to expect that the devices being used would not be top-of-the-line nor cutting edge.

These design constraints meant I had to not rely upon the modern browser's rendering of CSS3 tricks or other more forward-thinking features and instead move forward with basic, mobile-first strategy.

GETTING TO WORK

I designed various stand-alone versions of the wireframes for each breakpoint. At the time, I decided on three fairly standard breakpoints because of the site's content and the proficiency of phones, tablets and computers.

In handing off the design specs, they needed to be clearly defined between the variable breakpoints. The app was designed to scale up from the base design up to a tablet and larger, desktop version. 

The final solution consisted of a complete design style guide for the base elements. This ensured a consistent and systematized development of the design's core elements including colors, typography. It extended from these base elements up to larger, combined organisms such as forms and cards.

Finally, I developed pixel-perfect design specification sheets per page for the application. These spanned each defined breakpoint from  mobile, tablet up to desktop to ensure a proper deployment by my development team.

Reusable, component-based specifications

3 htc devices3 htc devices