Sugartrends E-Commerce: User Interface Design & Prototype

SUGARTRENDS SHOPPING CART

ABOUT

Sugartrends is an ecommerce platform that allows small shops around the world to have their online shop presented on the platform.

The homepage was not performing really well, customers tend  not to click on it. Another problem we had is that people often don't understand what's behind our company. 

PROBLEM

Our shopping cart had higher bouncing rate and a majority of the people that added produtcs to the cart didn't complete their orders. Our goal was to find a way to improve those numbers. 

PROCESS

I was responsible for the whole design process - making research on our statistics, doing mockups, then transforming it to design and finally handling it to the developers team.

 

Some of the problems we were facing with this page:

  • As you can see from the screenshot a lot of the components are mixed

  • the add to cart button is shown twice, in two differen sizes and in really close proximity

  • the payment methods are not realy in focus

  • there is some unnecessary info below

  • almost all elements everything is white

FINAL RESULT

After developping basic mockups and presenting them to our team, we've decided to go with the following structure (see example below).

Some of the things I decided to change were:

  • Adding a product count as a title on top - giving you clear idea how many iteams you have in your cart.

  • Adding a preview with all the payment methods we accept, to gain trust and security into the website, since it was really unknown on the market at the time.

  • Adding information about delivery and returns, to gain trust and to inform customers about the process.

  • Adding trusted badges in order to increase the trust of new customers. This section was also added to the whole website afterwards.

  • A free shipping counter was added as well, to show users how much money the need to spent in order to get free shipping and to encourage them to add more to their order so they can get a free shipping delivery.

  • Adding information about shipping and returns.

  • Removed one of the buy buttons

  • Removed the text listing different features