When I came to join Origami as a Product Designer, I have had the opportunity to work on a project to help improve the overall purchasing experience. As a fast growing commerce platform, purchasing product is core of the experience so I viewed this as the most challenging and exciting project to tackle on.
When the last version was designed a few years ago, the number of users and purchases were substantially different than today. With the rise of purchases and user base we set out to update the design to support better shopping experience and solve some of the major problems that we had based on the data and user feedback.
To kickstart the process, we collaborated with customer support and data analyst to understand about the existing problem. We learned that many people had trouble finding where to select Size, Color and Quantity, which lead to purchasing wrong item. The other major problem we saw was that people were dropping out during the transaction before they get to the final step. People were also frastrated that they often making separate purchases from the same store which requires additional shipping cost when they want to purchase multiple items. We often received request from shops if they can combine shipping fee for their multiple orders from a same customer.
I was the sole designer on this project with 1 frontend and 3 backend engineers with regular catch up meetings once a week for the implementation stage. During the design process, I held regular feedback session with the product team including the customer support where we brainstormed and critiqued which helped me improve my design.
1. You should be able to imidiately know how to select "Size/Color" "Quantity". To do this we made this view merely focused on selecting these options decluttering any unrelated information by simple half modal. When there is more than one Size/Color to choose from, it is madatory to select it before you can proceed so that you don't accidently select wrong option. For the checkout process, we intent to keep existing instant checkout and made "Add to cart" separate so that you can proceed with single purchase without additional step and use cart when needed.
2. Instant checkout
After selecting "Size/Color/Quantity" you should be able get to the final step as quick and easy as possible. For this we reduced the steps by merging "Shipping address" and "Payment method" in a single page to make them feel effortless. We've also simplified some of the elements by removing excess titles and cells to reduce unnecessary decision making.
3. Cart checkout
Purchase multiple products with single transaction and combine shipping fee. For this we enabled you to purchase multiple products at once via cart. Our shipping fee is fixed to the highest rate out of the products within the cart thus we can provide better rate when purchasing multiple products.
4. Products that can not be sent together
With the business agreement, we combined shipping fees when you purchase multiple products at once. In minor cases there are certain products that can not be sent together or combine shipping fee with other items such as furnitures and large items. For this we enabled shops to control(flag) these products for them to be purchased individually.
5. Final product
Here is a quick demo of the cart flow.
With this design update, number of purchases have gradually increased which has proven the success of solving the existing problem. We believe that the purchasing flow is the core of our platform and making these experiences seamless is vital for us to provide a product that people can trust. I'm very happy to make an impact with design on something that would influence the entire product, and we continue to observe and improve our product.