How can the checkout process be streamlined?
BrightStores is an e-commerce platform that provides the promotional products industry with software solutions. In essence, it is a B2B company that helps distributors create online storefronts for their clients. If you’re still wondering what this means, imagine you are a Netflix employee that gets points to go online and buy Netflix branded gear. That storefront is what BrightStores builds.
BrightStores wanted to create a new checkout process where the user would not have to go to a cart page first, but could complete their entire order on the checkout page. Working with other designers on our team, we updated the cart and checkout flow of existing e-commerce templates to be more streamlined and modern.
Although this design was not used for BrightStores in the end, it was then used to help kick off the creation of a new BrightStores product, Simple Stores.
01. Research
Our team split up to look up existing e-commerce sites and go through the shopping experience as if we were the users. Unfortunately we were not allowed to do user testing with this project, so we all had to rely on experiential testing. We then all came back together with screenshots and notes on our experiences shopping on those sites. We found that many smaller sites have a pop up appear in the top right once an item is added to the cart and then all of the checkout information, including the product information, appears in two columns where the user can then checkout.
02. Sketches
After discussing the best user experience, we drew designs to help us decide what would give customers a more user-friendly experience.
Some did not work out
The sketching process was used to figure out the best layout before creating wireframes. Some, like this one, were abandoned part way through as we quickly realized what would and would not work. In this case, having the labels left aligned was not the optimal layout.
03. Wireframes
From our sketches, we then moved on to creating wireframes which we quickly turned into prototypes. Once we added in the rest of the order summary information, we found that some designs did not work as we had hoped.
04. Project Twist
Although we had originally been designing for a streamlined checkout, we found that versions that would not work for BrightStores as there was too much data, would work for Simple Stores as they would not require as many fields. This design was the one we created as the final mockup for a streamlined checkout within BrightStores due to the many fields.
05. Final Outcome
This version that had the screen divided down the middle ended up becoming the version we based Simple Stores on. This design had originally been rejected for BrightStores itself because we found that depending on the order size, the user would have to either scroll to keep filling out information or scroll to see all of their products. We decided this was not the right design as it left a lot of blank space if the user wasn't ordering a very particular number of products.
However, this design worked perfectly for Simple Stores as there would not be enough data to keep the user scrolling.