HP Store EMEA wanted to align their search tool for supplies after the Americas region made their own redesign.
Live version here.

My Role

There were 2 teams involved: the online printing business based in Geneva and the design team based in Barcelona. All work was done remotely. On the design team we had the Structure Lead, the Design Lead and myself as UX designer.

Design problem

1. Outdated design and structure.

2. There was a section to suggest products to the customer based on previous searches/ purchases. The business wanted to increase the number of suggestions and apply it not only to ink, but to the rest of supplies categories.

3. Increase the banner space up to 2 with full mobile compatibility. This space was only present in the Home page but missed in the rest of the experience.

4. Marketing content was filling a big part of the Home page and making it cluttered. It was also interfering with the search bar.

5. The search bar had 3 tabs to search by product number, ink number or printer model. Users needed to click on the right one to get proper search suggestions and results. This was easily missed.

6. If user didn’t select a suggested result, the search would not get results and would display an error message.

7. The results page would only display some products based on highest performance and cheapest price but never a whole list of compatible products unless user looked for a specific SKU.

8. There was not an error page, since the search bar made mandatory to choose one of the suggested options.

Workflow

The Structure Lead had several conversations with the business side to understand the needs and brief the designers about it.

• • The design team was page by page discussing and creating different solutions to the business.
    3 pages were needed:
    Home
    Search results
    Error page

• • Once the desktop version was approved and closed, the process followed the same scheme for the mobile version. The discussion was focussed on the way to display the filters, naturally different due to the reduced real estate on mobile.

• Design was provided and the business side created a BRD for the dev team who is currently developing the tool.

• A couple months of A/B testing are planned in one country to detect possible improvements and fixes that will then be applied to all countries in the full version.

Result

The project is still being implemented and tested.

Improvements:

1. 1. Fresher interface with last design guidelines applied.

1. 1. The home page displays up to 8 suggested families of products in 4 category tabs. The business will have control of some, the countries over the rest so they have freedom to promote, except for one coming from cookies information.

1. 1. The home now displays 2 offer banners working on mobile that can also be accesible through the results pages.

1. 1. Marketing content has been separated into a bottom bar from the content on the page to keep user focus.

1. Unified search bar that automatically detects the type of request (product number, product family or printer).

2. Autosuggestion doesn’t interfere with the freedom of the user anymore.

3. Result pages have 2 modes:
   – The default one shows the products grouped by type of cartridge, shorted based on the business criteria.

   – The filtered list, displaying all products, giving several options to filter and order the content through user interaction.

4. A 404 page has been included providing help to the user regarding the different products he could be looking for and where to find their codes.

5. Inclusion of a new product category: cartridges heads.

Conclusion

---

Both business and design were pretty happy with the final product since many business and UX problems were detected and solved, even some that we were not initially detected.

This was a very long project, it took us around 5 months . We learn 3 big lessons:

• • One, that meetings can be very productive and beautiful ideas can come up when different parts of the business are involved and motivated to create something with the user in the core.

• • Two, that being such a long project, the business side had time to re-think certain matters considered closed or include new insights, making the design to go back instead of advance forward. For upcoming projects the design team stablished to keep closed already discussed topics and only admiting them to discussion after a first version is implemented, so we can be gathering quality AB testing data while we work on the improvements.

• Three, due to the previous point, we were working modifying high fidelity prototypes done in Axure, taking a lot of time due to the complexity of the interactions. There will be only one final high-fi protype and the rest will be worked in a simpler way with Photoshop screens that allow simple interactions on Axure for easier and faster iteration.

DETAILS

CLIENT: HP Store EMEA
YEAR: 2017
TOOLS: UX, UI, Axure