HP.com
Sr. Product Designer | User Experience | Design System
Update critical on-site user experiences, including global search results, landing pages, and primary content page templates to improve usability while also aligning to the newly released visual brand guidelines. Also, overhaul the complete design system, to adapt to the new brand and to improve ill-performing legacy patterns. With less than 3 months to complete the task, Hewlett-Packard flew me out to California to aid in an intense two-month on-site crunch to get the job done, supporting remotely thereafter.
HP is a computer technology company that develops personal computers, printers, and related supplies.
1 . The Challenge:
Research, design, test, and establish UX/UI digital brand guidelines and modules for internal and agency reference. These guidelines would be the basis for creating any new digital pages or experiences. To support the brand guidelines, we developed a pattern library to provide more specific guidance and maintain consistency for everything from page grids, interactions, use cases, dimensions, ect.
2 . The Approach:
1 . Guidelines & Design System
I was personally responsible for the UX/UI digital brand guidelines documentation and any additions or revisions as our new system was being adapted and evolved from our legacy brand. These guidelines would be the basis for creating any new or revised digital experiences for internal and agency efforts.
To support the brand guidelines, I participated, along with the rest of the team, in the development of a new design system for adapting and creating HP’s new digital styles, patterns, and template experiences. This design system helped ensure consistency across the organization and HP’s many agency partners.
2 . Search Results UX/UI Redesign
The HP search results landing page was in disarray, visually and on the back end. After years of rebrands, implementing, and removing various patterns and functionalities the landing page was no longer user friendly. Search results often returned no results, the wrong results, or an ill informed combination of results, leaving the users frustrated and often abandoning the process. Time on page was extensive and the click through rate was very low, signaling that users were not finding what they were looking for. I was responsible for reviewing and documenting the existing patterns and filtering paths within the template and designing the new revised template and features.
I focused on the organization and scan-ability of the results, keeping in mind that not all content would be available for each result (images, rating, price, pdf’s, etc). This meant there would have to be a scaleable results pattern created. Due to the overwhelming amount of results that were often presented, I also designed and tested various filtering methods. We needed to provide users a way to manipulate and refine results based on several different parameters in order to cull out unwanted results or to bring other filters to the forefront in an effort to reduce user frustration and increase click through rate to the product page.
3 . THE RESULTS
The team completed the UX/UI templates two weeks prior to the deadline. With the early completion and delivery of the brand guidelines and elements, the supporting agencies and development teams were all able to implement a more unified and efficient agile process. The updates to the brand and site were completed with ample time for development and Q&A before the relaunch. The effort and smooth transition of the brand was recognized and commended by top leadership.
The revised UX/UI for the Search Results template did well in user testing and performed even better when launched. Time on the search results page was significantly reduced (a KPI) and lead to significantly increased CTR to product specific pages. This CTR reinforced the efficiency of the design updates and directly contributed reduced sessions (users found what they were looking for faster) and increased sales (less frustration).