Problem: A large percent of users were abandoning our checkout flow after clicking the "Buy now" button on a product. We discovered that our initial inline version caused confusion during usertesting because it did not match user’s expectations and presented certain usability issues. 

Solution: Redesign our checkout flow by researching checkout flow best practices and current examples (Amazon, Zappos, etc.).

Design: 
(1) I decided a tabbed approach would be the most effective because it is not only a widely understood UI pattern but it could also act as a progress bar for users by showing them how many steps they have left.

(2) Users would see the form for both the credit card and shipping sections by default when using our checkout system for the first time. The previous version required clicking into each section to add information, which was especially confusing for users during usertesting. After they had entered this information once, those options would be selected by default the next time. They also had the option to enter new information. 

(3) Added a separate review page so users could feel confident in their purchase when completing the final step of the checkout flow.

Results: Abandonment of the checkout flow process went down. Additionally we received less questions from users about how to complete their purchase.