HP ENVY Photo Printers
HP's ENVY Photo Printers are designed with the family in mind, taking digital memories from your phone and turning it into something tangible. The objective of this page was to raise awareness for the need for tangible and physical memories, especially in a world where we're more digital than ever.
See it live.
Creative Director - Marina Kong
UX, Design - Nickki Nguyen
Prototyping - Jason Guerra
Research - Meghan Cannizzaro
Year - 2017
I was tasked to create a responsive landing page that:
- appealled to the emotions of millennial families [awareness]
- integrated influencer and social media content from users and HP's social media accounts [awareness]
- got users to "Shop Now" [buy]
On top of balancing different departmental requirements, this page was also a chance to create a landing page that was different from our previous templates. That meant rethinking the flow of the page, creating new types of modules, and introducing new design elements such as font and colors.
How do we educate millennial families on the merits of printed photos while also showcasing a wide range of printer products and its features?
I created different wireframes to lay out content flow. Do we prioritize awareness and lead with the social media feed or do we prioritize buying the product and lead with product features?
lead with awareness
We decided that it was more important to prioritize awareness — educating users on the importance of tangible memories. We thought telling a story with real-world examples would be a better way to introduce the product and get the customer into the right mindset. To do this, we led with user-generated content from our influencers and social media channels.
Traditionally, we showcased our product features with a "walk-around" but weren't sure of how effective it was for users to click on each hot-spot. I took four of the most important features that spanned across all three models and numbered them but this was hard to follow. We landed on the final design of a grid where the user would hover to see what feature is highlighted as a more interactive way but requires no clicking.
We needed to create a module for the HP Smart App that can be reused on other printer pages. We wanted to show the various features that come with the app in an interactive module that utilizes video loops that show the in-app interactions. I worked with Jason, our UX engineer, on the prototype to work out the details such as responsive behavior, auto-rotation, micro-interactions, and hover interactions.
View Jason's fully responsive prototype here.
We then conducted usability studies and Clicktale analysis to measure how users interact with the page. We wanted to determine how effectively the page showcased the products and primed customers to buy. Here are some of our findings:
- Customers are highly engaged with the video module at the top of the page.
- Heat maps show mobile and desktop users paying attention to and clicking on the video module.
- Prime real estate lacks appeal.
- Observed in both usability testing and clicktale attention heatmap, most users quickly scroll right through the sizeable social module.
- Desktop users that scroll are rewarded
- 45% of visitors don't scroll to reach the product model carousel, but those who do take time to look, read and click.
This project suffered from trying to do too much. It was a marketing page as well as a product page and all of the content made it hard for users to get one or the other. A lot of money went into influencer and social media content and that was prioritized over showcasing the products in a way that made it easy for customers to learn the differences between the printers to decide on which one to buy. Most customers on the page were already interested in buying a printer and so all the social media content was just fluff on the page before they got to the actual printers towards the bottom of the page. In later versions, we plan to better integrate story-telling and social media content throughout the page to create a more seamless shopper experience.