Michael Rubini - UX/UI Designer
Michael Rubini – UI/UX Designer
Ecommerce_TH.jpg

Ecommerce Theme

 
 

Ecommerce Theme

 
 

In e-commerce, providing an exceptional user experience is key in order to improve conversions. How easily users find the article they are looking for, presenting the right information about a product to help users make a more informed decision and providing an easy checkout process, are only a few important principles needed in order to improve usability and conversions.

Using conversion and user-centered practices I created a responsive theme that clearly showcased product offers, a simple navigation that gave access to different core sections and delivered a fast checkout process to avoid cart abandonment.

 

Devices_Mock.png

Desktop

 
Gallery section
 

Tablet

 
Mobile
 

Mobile

 
 

Checkout

The checkout process is critical for any e-commerce site. In order to reduce cart abandonment a series of user-centric practices were applied to optimize the filling of the form, reduce friction and make the checkout process simple and straightforward.

 
 
 A testimonial from a user who bought the same item was added in the overview section to reduce anxiety, offer a positive reinforcement on the user's selection and move him forward with the checkout process. An option to checkout as a guest was also added for those users who are looking to quickly buy and item and don't want to go through the additional process of creating an account.
 

A testimonial from a user who bought the same item was added in the overview. This helps reduce anxiety and offer a positive reinforcement on the user's selection, moving them forward with the checkout process.

An option to checkout as a guest was also added for those users who are looking to quickly buy an item and don't want to go through the additional process of creating an account.

 
 
All fields were labeled as required or optional, as a way to reduce the number of errors a user could face when filling out the form. Field labels remained aligned to the top when selected so users can refer to them in case they forgot the information they should enter. The payment section was visually reinforced by encapsulating the fields on it. This helps the user perceive the section as more robust and secure. Adding a padlock symbol on sensitive fields also helps with the perceived security of the form.  
 

All fields were clearly labeled as required or optional to reduce the number of errors a user could face when filling out the form.

The use of floating labels helps the user spot errors when filling the form by providing a quick reference about the information required in the field.

The payment section was visually reinforced by encapsulating it. This helps the user to perceive this section as more robust and secure. Adding supporting graphics, like the padlock on sensitive fields, also helps improve that security perception on the form.