How can we simplify online shopping?

In order to keep up with demand for simpler short term stores, BrightStores, an e-commerce platform, wanted to create a new simplified platform that would consist of two pages and would allow the cart and checkout process to take place on the same page.

Working with other designers on our team, we created a simplified checkout flow that had space to display the items in the cart for a streamlined payment process.

This design was then used to launch a new BrightStores product, Simple Stores.

01. Project Pivot

While working on a project for a streamlined checkout within the BrightStores platform, we realized that although one of the designs we had created would not work for that purpose, it would work for a much simpler store. As clients began to request more stores that would only have a few items and not require such a complex checkout, BrightStores decided to create SimpleStores.

As we had already done the research for a more streamlined checkout, we just had to tweak the work we had already done to this new idea for it to work. One of the constraints with our previous project had been the amount of data that needed to be collected, but in this case that was not an issue so we revisited all versions we had created to keep going from there.

02. Wireframes

We built off the wireframes we had built for the streamlined checkout and created more versions to run past our team.

One version we really liked had the screen split into thirds, with more room for the product descriptions. We preferred this one as it allowed the user to scroll through the product side without it affecting the information side and minimized the amount of excess white space.

Eventually we decided on the 50/50 screen design as this platform would not allow for as many product options so the product information did not need as much space.

03. Mobile Mockups

Based on the desktop version we had created, we designed mobile mockups in order to show how the cart will stack on screens under 660px.

04. Final Outcome

Our development team worked off our wireframes in order to create the finished product. Due to project constraints, some aspects of the designs were ignored, but the majority remained consistent.