Designing Checkout Page for Online to Offline E-commerce Site
What is O2O ?
Online to offline service or O2O is an extra service that allowed customers to do online shopping from your website and then they can pick-up the item and/or pay the invoice at the offline store.
Imagine, you are a retail chain company having stores all over the country and you are well known among customers for your grocery items. The advantages of the distribution channel and payment gateway are yours, and things will be easier for customers if you expanding your business into an online presence.
- Check inventory stock.
- Help your family or friends buy somethings.
- Reduce the shipping cost, lower prices for customers.
- Shop online when you at the office and then pick-up the items from physical stores near your home.
- If customers don’t have a credit card, they can pay the invoice at the nearest store.
The Process
We started by interviewing users from different groups, based on the Personas. We are trying to understand the current flow, identify existing problems and the opportunity, gathered information as much as we can. Within the project, we always follow this pattern in our mind: Understand the problem > Define the solution > Validate Qualitatively > Verify Quantitatively.
From the research, we found out the main function that we need to have for this O2O is the store locator feature. Customers able to find and collect/pick up the items from the offline stores.
We started writing the interface by listing down all possible scenarios before we jump into any design related works.
The list should be open-ended and flexible enough to be transformed into user flow, storyboard, scenarios, wireframe, etc.
Above is one of the examples of the O2O process. The full version will be involving several more complex processes like the Ordering process, O2O process, Payment process, Shipment process, Updating item status process, and Finishing process.
Detailed Works
We arranged anything that needs immediate action on the top of the page. For example this page, the goal is to make sure customers choose the pick-up point first and choose the additional information needed for the pick-up process.
Next, we changed the action priority for the customers. We put the credit card form (the selected payment method, in this case) on the top of the page and switch all elements from step 1 to the bottom of the page.
Last, this is where we summarize all information. We provide “What’s next” section at the bottom of the page for customers, so they didn’t get lost in this checkout flow and aware of the next actionable steps.
For more detailed UI check it out on my dribbble page
