HP is one of the world's largest computer and electronics companies. I worked there as a UX designer.

 
HPdesigner.jpg
 

UX

My UX responsibilities included creating the new global navigation bar for hp.com. Along with the design itself, I was also responsible for hosting and curating user testing for very specific groups of users. Our team took the collected data and applied changes to the nav bar accordingly. The overall goal was to encourage users to use the navigation bar more, not just the search bar, which previously the most popular option.

I was also responsible for creating and redesigning templates, redlining, creating wireframes and prototypes, as well as overseeing miscellaneous UX issues.

This is the final product of the new global navigation bar, with 3 options and drop down options.

 
hpNavbar

THE PROCESS

THE PROBLEM: The current fragmented, product-first navigation strategy causes confusion at key points of the HP.com customer journey.

BOTTOM LINE OBJECTIVE: Put the customer first and create a user-friendly global navigation.

We had 3 guiding principles:

1: SIMPLE

  • Easy in, easy out. Dont’ make me think.

  • Pleasing, scannable layout

  • Seamless, integrated experience

2: INTUITIVE

  • Clear, tasked based routing

  • Customer friendly labels

  • Optimized for both mobile & desktop interaction

3: COMPLETE

  • No orphans

  • Multiple ways to content

  • Flexible to suit changing business needs

THE STRATEGY

Organize HP.com navigation to support the 3 main stages of the customer journey

ux

We were creating a flexible navigation system that accommodates a wide variety of customer needs and expectations.

ux
 

OLD NAVIGATION BAR:

oldnavbar

As you can see above, there were a lot of different options for the user to choose from, so we narrowed it down to three to have a more guided experience. We then took some time and mocked up different examples in mobile and desktop of different navigation bars, with little changes like text layouts, mouse hovers, color, etc.

mobile
desktop

Once we have two different choices, I created groups on Usertesting.com. Our groups were 10-15 people, each having basic conditions met. Some of those conditions included working in the tech industry, non-techies, different salary and age ranges, and the list goes on.

SAMPLE TESTERS:

tester
tester

We kept a scheduled timeline during this because there were alot of moving parts, from the design team I was on, to user testing, to the many stakeholders internationally who were informed and consulted about everything during this process.

timeline

Overall, this project was a great success. It cleaned up the global homepage nav, as well and drove users to more products and more interactions on the site.