SHOPPING CART

& CHECKOUT



YADAV Jewelry Online Business Optimization - 01



Overview


Who is YADAV ?


Yadav Diamond and Jewelry(Yadav) as a diamond and jewelry specialize in custom fine jewelry and engagement rings with certified natural and lab-grown diamonds. Service online store and having a local showroom in San Francisco. Yadav opened an online business since 1997.


My Role

We have a very small team. I am in charge of UX design, UI design, and product management, working closely with CEO, outsourced engineers, designer.


Problem

Yadav grows rapidly with its online business. Now more than 80% of orders are from Yadav‘s online website. By defining the business profile, we found that the higher drop-off rate during the checkout process, and need to promoted the featured business




Objectives

● Decrease the drop-off rate from shopping cart to final step purchase the order.Promoted the featured business

● User can place the order confidently and find the easier solution when they are in any step of checkout process.




Research and Inspection

"From insight the whole picture to conquer each specific task "


Based on the whole project goals, setting the objective for the checkout process. Doing usability testing to define the issues for the current pages. Using multiple design methods to solve the challenges on the specific part - start from the checkout process

What does the old page looks like?

Have a look at what the old pages in the checkout process, then start to find what we met and how to conquer the issues

Click to See more

Shopping Cart Abandonment, why?

Without the big data statistic for the shopping cart abandonment for our website. I do the research, which found the general reason for shopping cart abandonment. Like below (Segment out this “just browsing” reason).Credit by Baymard Institute. 69.23% of all e-commerce visitors abandon their shopping carts. Why?

What needs to notice before the inspection?

Insight this diagram above and learn from the best checkout example, I found a lot of these issues can be resolved. Many of them can be fixed purely through design changes. Based on this doing the further inspection to the old website


Define the Issues

Go further to define the specific issues

Keep in mind what I learned from research,I do more the usability testing and activity observation in the diamond store to emphasize and analyze how they checkout through our website. Then from observation to insight to think what and why customers abandon in check-out cart.


The confused and unclear checkout flow : The review parts as the user information summary are placed before the payment step. Losing the final review for users before placing an order.

Logic bugs

Chaos Hierarchy : Including the visual part and the meaning of the content

Weak responsive for different screens

No strategy to avoiding the " Abandonment"

Click to See More



Design solutions

" Using design to conquer challenges in the checkout process. "

Design Iteration

Round 1: Rethink the User-flow

Evaluate the flow first based on the entire scale to find a better understandable and reasonable logic.


Old one : Shopping Cart-> Address->Shipping-> Delivery-> Review -> Payment


New one-01 : Shopping Cart-> Address -> Payment

Also, quick sketching and photoshop the screenshot to do the rough mockup to help engineer evaluate the feasibility.

See More

Round 2: Based on the feedback to iterate the design

"Developing limitation influences the whole schedule "

Getting the feedback to know the technic limitation from outsourcing engineer team. They can't change the card validation in short time. Thus, I changed the design to catch the schedule.


● Show"Linear Check-Out Experience" when it comes to the state of mind of a customer during or before a purchase.


Balance the requirement between technical limitation and good user experience, I combine the payment step and review part to one named "Payment"


Solve the new challenge


Final Design

After many rounds of design iterations and usability testing, I did the final design.

Click to see big pictures->>




Example-Conquer the challenge

Solution to the issues




What is the challenge met in split payment method

As the Yadav business stakeholders want to give the users more payment options to check out. Therefore, it has six payments options more than the general. The split payment is the most confusing part.

Hard to read and understand the instruction of split-payment.

● The progress of split payment is complex, no clear hint to help customer to finish the purchase step by step.

● Hard to find the unpaid or paid price





How to solve these problems

● Visualize the content and simplify the information

● Finish the split payment in one page, and move the "call by phone" function under the payment info as kind of call assistance function.

● Using interactive design to simplify reading the info, as we have too many payment methods and long screen.

● Clearly showing the current payment/ Total/ Due after payment in pay info card. Also placing in the order summary.




Mobile First

Since this is a mobile-first design. I adopted a grid system to allow sections to be stackable on mobile. I also based on the different using actions for different size devices change the CTA position to check out easily.

Result

Now it is still in staging. However, after the small scale user testing, all the user like the new design and think it is much easier and more clear for them to checkout. I will keep my eyes on the manifestation of a new design.


What I learned

I learn a lot from this project, especially for the management part. The outsource engineer team and loose management is a big problem during the whole process. Speak their language is what I learn how to communicate with other department people efficiently.



Next Step

Next step, it will be based on the user feedbacks and push the coding team to polish the payment logic and checkout experience. Doing more usability testing and interview more customer to better empathy the user. Also, doing more things about "abandonment emails" to bring back the users.



" Thanks "