How can the checkout process be improved?
BrightStores is an e-commerce platform that is constantly adding new functionality, which means the functionality remains modern but the design does not always get revised. This means features get added on top of features until finally it is time for a redesign.
In this case, the checkout address fields had not been revised in several years. Although most online stores were already using a more streamlined version for checkout overall, BrightStores had yet to make the leap.
Focusing on the Shipping and Billing sections at checkout, I worked with a team using Moqups to create wireframes for the different options before the final version was implemented by our development team abroad.
Too much empty space
As you can see, the original Shipping section had a lot of white space that was going unused. The contact and address were split up when they could be together
01. Research
Our team split up to look up existing e-commerce sites such as Amazon, Anthropologie, and Shopify. We then all came back together with screenshots and notes on our experiences shopping on those sites. We found that sites did not use as many columns and fields that could go together normally did (such as first name and last name).
02. Wireframes - Shipping
Knowing we would be editing the Billing fields down the road, we focused on the Shipping fields first as these would directly impact the design chosen for the Billing area.
Using Moqups we created the top wireframe which we quickly realized was not a big enough change from the existing layout.
Based on research, we then created a “stacked” version which we decided to use in the final version as it appears to be the standard in e-commerce and as such is the most user-friendly as people automatically know how to navigate through the process.
03. Wireframes - Billing
Once we completed the Shipping section, we then moved on to designing the Billing section to match.
We streamlined the Billing Address so the contact information was joined with the address fields. This allowed for a more even checkout area with the Payments visible on the right hand side.
04. Final Outcome
05. Looking Forward
We researched and designed how to make a checkout process that would be more streamlined overall. This involved creating a checkout page with the cart items rather than having the cart and checkout remain separate. This is currently being done on many e-commerce sites as it helps users complete their orders faster. In the end this was not implemented for BrightStores e-commerce storefronts, but instead was used for their newer platform, Simple Stores.