Skinit is the industry leader in personalized and branded skins for consumer electronic devices. Including smartphone, laptop, camera, gaming device or medical device.
Original Cart/Checkout page bounce rate higher than 50%. The goal for redesign is to reduce distracted during checkout process.
Role - UX/UI Designer
Product Manager(1), Tech Lead (1), Developers (3), UX/UI Designer (1), Graphic Designers (1)
Including UX Research, Product Feature Suggestion, Wireframe, Hi-fi Prototype, UI Pattern library, Spec Dpocumentation,AB Testing.
Decrease check out bounce rate. Reducing distract elements during checkout process and easier to complete purchase.
Heatmap, Scrolling Map Research
I collect current cart/ check out page (mob and web) heatmap performance report.
Cart Page Heatmap
1. Suprisely, most customer go over cart information and click bottom check out button. Two checkout button may cause discract during checkout process
2. Customer prefer to add interested products on cart first, then compare it on cart page and removed need less items.
3. Striking coupon section attract customer attention.
Check out Page Heatmap
1. One page layout clearly show all check out process. But may cause customer distract by overwhelming information.
2. Most customer choose USPS First Class Mail, which means customer willing to pay little shipping fee and get products fast.
3. Lots of customer prefer to use paypal online payment.
According to AB testing Result, I have some important finding.
1. Collapse coupon section reduce distraction
Collapse coupon and promo entry fields can reduce distraction and improve success complete purchase transactions.
On AB testing report, making coupon section available, but not distracting customer show better performance.
2. Visually Reinforce the Credit Card Section increasing security
Placing a padlock icon are performs well to help the perceived reinforcement of the sensitive fields.
3. Placing a security icon on checkout button increasing credibility
Add security lock icon on check out button can increase websites trust signal, and reduce customer hesitate during purchasing.
I analysis 20+ ecommerce site cart/check out page, analysis their advantage and disadvantage.
On wireframe section, I explored multiple options, and discuss with team member.
Opt 1 and Opt 2 cannot show the summary section during check out process. When add shipping information or discount may cause subtotal changed, the summary section always show can reduce confuse.
In final I suggested opt 3 layout, it can show all check out process but not cause overwhelming information.
Check Out Wireframe Exploration
- collapse promo reduce distraction
- add paypal and apple pay provide quick online payment
- add security icon increase trust signal
- Provide contact information, in case customer need help
- Use bright color show discount/free information
Check Out Page:
- remove menu bar force customer stay in cart page
- show all check out process but not provide overwhelming information to customer.
- Always show summary section, help customer clearly see price change
web check out/ cart final design
Beside the feature same as web design, on small screen I considered:
- Use one checkout button, reduce distract and duplicate information
- Make check out process clear and straightforward. when finished one section will auto open next section and closed previous one.
mob check out/cart final
Evaluate Data & Measure Success
After Launch new check out/cart page, bounce rate decrease 5.41%