Overview
Project Name: Instant Ink P2 Landing Page
Time Frame: 2 Months
Team: Rob McKinley, Omri Nir, Joseph Montanez
My Role: Interaction Designer and Researcher
Tools: Sketch, UserTesting
Objective: Design an informational landing page, explain the business model and value of HP's Instant Ink service, that will be presented to HP printer users upon receiving a low on ink notification.
Instant Ink - Landing Page
The story behind Instant Ink
Instant Ink is a printing service offered by HP in which HP printers detect low ink levels and automatically order more ink to the customer's door before they run out. Users pay a single monthly price which is dependent on how many pages the user prints per month.
Problem
-
User are only presented the Instant Ink value proposition at the time of their printer setup. If a user does not enroll in the service at this time, they are left to their own devices to seek out information and enroll in the service later on.
-
Many users do not have a good understanding of their current printing habits and therefore have trouble realizing the value in Instant Ink.
Solution
-
Utilize HP's low on ink notifications on both desktop and mobile devices to present an Instant Ink offer and link out to an informational page that thoroughly explains the service without overwhelming the user.
-
Give user a better understanding of printing costs and their own printing behavior to underline the value of Instant Ink.
Process
Research
Align with Partners
Just as the majority of design initiatives for Instant Ink start out, this one began with an alignment meeting with representatives from the product, marketing, and development teams in order to align on requirements, timeline, and to discuss any relevant data that was available to us in informing the designs.
Competitive Analysis
Upon reach alignment with the initiative's stakeholders, the first step in the research process was to conduct a competitive analysis of a number of landing pages for other services in order to gain an understanding of best practices and draw inspiration as well.
Winc
Dollar Shave Club
Codecademy
Key Findings
-
All pages follow a long scroll format with a menu along the top.
-
Main call to action is always clearly visible at the top of the page.
-
A banner photo or video is used draw attention to the top of the page
-
Landing page is divided into different sections designed to explain the service and it's benefits.
User Interviews
The next stage in the research phase was to conduct user interviews. Users were asked a variety of questions to help gauge an understanding of their printing habits, how they think about printing, the current pain points that they experience when it comes to printing, and how they respond to the Instant Ink value prop. These user interviews gave us a better understanding of our customer base and helped further inform our different user personas (See below).
Design
Wireframes
Upon completing the research phase of the initiative, the next step was to consolidate findings in order to outline the structure of the page via a low fidelity wireframe. Based on the initial research, a decision was made to keep the page concise and simple so as to not overload users at first glance.
Initial Concept
After aligning with partners on the structure of the landing page, the wireframe was touched up visually so that it could be presented to users for testing.
Test
Usability Testing
For usability testing, the initial concept was shared with potential Instant Ink customers as part of a larger study that assessed the response to the Instant Ink service at all enrollment touchpoints. Testing showed that users felt the need for a much greater amount of information presented in the landing page, in order to make an informed decision about whether or not to enroll in Instant Ink, including plan and payment options, the benefits of the service, and an FAQ section.
Iterate
High Fidelity Designs
User responses to the initial concept were gathered and applied to a new design. The design was focused on presenting the user with a greater level of detail as it pertains to the Instant Ink Service as well as an improved visual aesthetic.
Conclusion
Upon completion of the high fidelity design, it was shared with product, marketing, and development for approval. Upon approval it was sent for development. Metrics for the page were tracked continually upon implementation and showed a significant increase in the conversion rate for P2 customers.