Project
Overview



When Tipser was planning to enter the US market, as the product designer I was missioned to create a new checkout UX design for the market.


In the project I was responsible for all UX research, product design, usability testing and etc. I aimed to create a mobile first checkout experience because of the fact that more than 80 percent of our end consumers use mobile devices to complete their purchases.


See the live checkout at bustle.com/shop or independent.co.uk/shop



UX Research



With limited resource we had back then I started the project by conducting desktop research about the best practice of checkout UX on research based websites like Baymard Institute for example. Analysing checkout user experience of leading players in the market, like Lululemon, Zalando just to mention few, is also in the scope of the research.

Trust factors is the main focus of desktop research. The reason is that Tipser provides publisher whitelabled product as a third party, helping them generate sales through e-commerce. We aim to provide a truly native shopping experience to end consumers, yet be compliant to all commerce related regulations.

​As the product designer, knowing the unknown is not the goal, continuously improving the user experience and reshaping the product is the ultimate goal. I also dissected the current checkout user experience and compared it to the best practices and good UX examples to see where and how it can be improved.



Wireframe &
Userflows



After the desktop research I started the design with wireframing. This fast prototyping method gives me a good understand of different detailed userflows, which in return enables me to to do quick user testing and iterate based on it.



Anatomy
of UX



In the UX anatomy you can see where and how I applied the key findings of the desktop research into My Cart page in the checkout.



Design System



Usability
Testing



When the high fidelity design is finished, I carried out usability testing with the internal teams to gather feedback from their perspectives. In the usability test, I also presented testers with different user interfaces for the same checkout user flow to see which design they think works better in the context.

​ For the screens you can see above, most testers think outlined boxes in both payment method and shipping address sections give a more modern and simplistic experience. From accessibility perspective, the enlarged touch space shorten time to reach the target according to Fitt's law. It also provides more intuitive visual feedback when compare to other design options. Hence I decided to move forward with this UI design.



A Faster
Checkout Button



A group of end consumers prefer to go to checkout directly without double checking products in their cart. So, instead of scrolling all the way down to find the "GO TO CHECKOUT" button, we give them a top checkout button in the cart, which enables the express checkout options with just one click. This UX change gives this group of consumers a faster checkout experience, without compromising the ability to double check products in their carts.



High Fidelity
Design



Responsive Design
Works Across
Different Devices



Type



UX/UI design, product design


​



Team



Solo in-house design project



My role



Design research, Lo-fi design, Hi-fi design, prototyping, usability testing.