HP ENVY Photo Printers

 

intro 

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.

credits

Creative Director - Marina Kong
UX, Design - Nickki Nguyen
Prototyping - Jason Guerra
Research - Meghan Cannizzaro
Year - 2017

 
 
HP_ENVYPhoto_Blanket_Family 1_Product In Situ_7800.jpg
 
 

role 

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]

 

problem 

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?

 

content strategy

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?

 
PALERMO_wireframes.jpg
 
 

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. 

 
 
palermo_mock-01.jpg
palermo_mock_mobile.jpg
 
 

features revamp

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.

 
 
features_oldversions.jpg

Rejected versions

features_gif.gif
 
 

Reusable Module

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. 

 
 
smartapp_1.png
 

View Jason's fully responsive prototype here.

 

research

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:

  1. Customers are highly engaged with the video module at the top of the page.
    1. Heat maps show mobile and desktop users paying attention to and clicking on the video module.
  2. Prime real estate lacks appeal.
    1. Observed in both usability testing and clicktale attention heatmap, most users quickly scroll right through the sizeable social module.
  3. Desktop users that scroll are rewarded
    1. 45% of visitors don't scroll to reach the product model carousel, but those who do take time to look, read and click.
Screenshot_4.png
Screenshot_1.png
Screenshot_2.png
 

conclusion

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.