HP Store new checkout library
As I entered HP Store EMEA there was an on-going project for renewing their checkout which had been the same since almost the beginning.
The project was led by my manager who got me on board as UX and UI designer.
We will be the ones proposing changes on that matter, carrying discussions with the developers and testing the new experience. Data analysis was done by the UX manager and l focused on everything else.
- Outdated look and feel
- Long flow with high risk of losing conversion along the way
- Plenty of areas to improve regarding user interaction
- Lack of a library space for new designs
- Mobile experience is a new important focus and needs to be improved.
By the time I joined the project it was very advanced so I’ll only explain the workflow since I worked on it.
- Gathering all the designs and flows done by the UX lead and create a design library.
- Completing missing parts of the design taking the library as reference
- Understanding the need of the developers and the complexities of the process to serve different types of accounts and customers
- Testing with other teams and gather feedback.
- Making improvements and testing again with the teams.
- Running two rounds of thorough QA in a live server to test implementation.
- Bug solving and test live with a very small amount of traffic in one of the busiest countries.
- Data gathering (current state).
Result & conclussion
The nature of my work carries jumping from one type of task to the other several times a day as many projects are moving at the same time. The checkout renewal is naturally a long one and I’ve been on and off working on it as the developers would move forward. That being said, as the project advanced there were new subjects to improve or to align with that initially were out of the scope or were not going to be renewed – yet making the project to be longer. E.g.: renewing the registration for new users from the checkout process.
A big challenge has been renewing the new look and feel since it will set the bases for the redesign of the rest of the site. I needed to really understand the usage of UI elements designed by the UX lead in order to maintain a coherent view and sometimes create myself new elements from scratch following those guidelines.
Always taking into account that the site deals with 7 different languages so space is important regarding long-worded languages like German or French.
That carried some other decisions regarding interactions that were on me and sometimes would mean convincing developers why they are better for the user. E.g.: regarding items that can have a Carepack package. For the developers, if the Carepack was added from the cart, it should be added to the bottom of the list, while from an UX standpoint it should be clearly visually associated to the item it’s attached to displaying it right below it, as last on the list is confusing to the user since it has lost the reference.
Working hand by hand with the developers showed me how important is to clearly understand all the different flows for all the different users, as they might have different needs (a business user is not the same as a customer user and information and fields will adapt).
Also, unlike the rest of the site this part will be fully responsive. We needed to be careful on what parts we should leave out of the mobile experience to not overload the user’s screen with information. We carried a lot of testing checking that everything was behaving correctly and nothing was missing (e.g.: For one test, the main CTA to proceed with the purchase was missing due to a CSS error).
I’ve learnt so much on attention to detail from the extensive hours of QA on this project. How important it is to try to break the process, going back and forward, trying to imitate user’s conduct, changing information, being hesitant instead of very strait-forward as we tent to think people shops.
I am excited to get the recordings of real people interacting with the new experience.
CLIENT: HP Store EMEA
TOOLS: UX, UI, QA