Overview
Project Name: Instant Ink Savings Calculator
Time Frame: 2 Months
Team: Rob McKinley, Omri Nir, Joseph Montanez
My Role: UX Designer and Researcher
Tools: Sketch, UserTesting
Objective: Design a savings calculator feature for an HP Instant Ink web page, which will give users a better and more complete understanding of how the service works, as well as the economic benefits that it can offer.
Instant Ink - Savings Calculator
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
-
Many people who are interested in the Instant Ink service have trouble wrapping their head around the business model and payment structure of the service.
-
Many users do not have a good understanding of their current printing habits and therefore have trouble calculating their potential savings with Instant Ink.
Solution
-
Design a savings calculator feature which clearly outlines the way in which the Instant Ink service works.
-
Help users gain an understanding of their own printing habits so that they can better understand their potential savings with the Instant Ink service.
Process
Research
Align with Partners
The first step in the design process was to align with the product and development team to assess factors such as timeline, business considerations and dev resources. The product team also provided data and analytics for a an old savings calculator that was previously designed. This data was reviewed and used as a benchmark for assessing what works and what does not work for a savings calculator tool.
Competitive Analysis
Once alignment with stakeholders was reached, the next step in the research process was to conduct a competitive analysis of other savings calculator tools. While the Instant Ink service is relatively novel, and any savings calculator tool for the service would require a fairly unique set of considerations, there is still much helpful information which could be gleamed from an assessment of other available tools.
BankRate
-
Short, simple, and easier to understand input section.
-
Savings breakdown generated to the right of input section.
-
Utilizes graphic chart to give visual component to savings.
-
Total Saving are made to standout to user as central piece of information.
Nerdwallet
-
Design follows a vertical structure and is very intuitive.
-
End balance is generated as a simple numerical figure with no visual component.
-
No option to view a breakdown of calculations.
-
The simplistic structure of the tool does put into question the accuracy of the results.
Smartasset
-
Design structure is very similar to that of BankRate.
-
Left to right input to output structure.
-
Scrolling bars add a layer of control to the calculator and make it feel more interactive.
-
Good detailed breakdown of output calculations.
Empathy Map
Next, an empathy map was created to better understand the thought process that a potential customer experiences when considering an ink replenishment service for their printer. This exercise allowed for a better level of empathy with potential customers and helped guide design decisions centered around how to present information to users.
Design
Wireframes
Upon completing the research phase of the initiative, the next step was to consolidate findings and apply them to a first set of designs to share with stakeholders and to test some of the assumptions made based on the research.
Prototype
With approval from the project stakeholders, the front-end development team began working on an interactive prototype that could be used for usability testing. View Prototype.
Test
Usability Testing
Once the prototype was ready for use, a usability test was designed and administered via user testing.com. The usability test assessed users' ability to understand their current printing behavior and ability to accurately interpret their potential saving with Instant Ink vs their current printing expenses.
Findings
-
Users had trouble differentiating between their current expenses and their potential savings
-
Users had trouble estimating their annual spending
-
Users seemed to enjoy and be delighted by the interaction with the tool and the immediate feedback it provided.
Iterate
High Fidelity Designs
Data from the usability test was gathered, analyzed and applied to a new set of designs. At this point in time, HP had updated its visual design system, and therefore designs were updated in accordance with the parameters and patterns set by this new visual language.
Development Handoff
With approval from marketing, product, and development stakeholder's approval, designs were annotated and delivered to the appropriate development team via Zeplin. From that point forward design and development teams worked closely together to ensure that release of the feature was completed correctly and within the timeframe of the set deadline.
Conclusion
Follow up data on this feature showed a significant increase in conversion and a lower rate of drop-off on the Instant Ink web page upon the release of the savings calculator. This would suggest that the calculator was helpful in giving users a better understanding of both the Instant Ink Service as well as their own personal printing habits.