back
e - commerce
Integrating e-commerce on the website and enhancing the user experience while enabling easy navigation. Maintaining the design consistency and tweaking the existing website by adhering to the Baymard guidelines.
role
UX/UI design
team
Jesha Shah, Akshay Kenjale,
Anushka Khurana, Avitha Celestine
time
6 weeks
*The following project represents a hypothetical academic exercise. It does not reflect work endorsed by the representative brand.
original website
research
We did Baymard assessment to understand the things that are lacking in the existing Method website. Below the graph of the evaluation. We also conducted strategic research for the competitor brands of Method.
Competitive analysis
key insights
-
Method website lacks the e - commerce elements like sign in ,cart, wishlish and checkout page
-
Product categories are not called out on homepage
-
Product list page should have sorting options, quantity field, add to cart buttons
-
PDP page does not have prices, revies and has information clutter
design solution
Adhering to Baymard guidelines, we integrated all the e - commerce elements to the Method Website.
lo-fi wireframes
high fid wireframes
home page
account , wishlist and cart in top right
catergory list on the header for easier and faster navigation
Catergories again if the users scroll down and see the images of the products
Details about the product, add to cart button, quantity field for faster order from home page itself.
Footer also have categories for navigation and other pages and necessary information listed.
product list page
Categories placed on left which could be extended
Sorting options for user to find the product they want faster.
product display page
Product
suggestion
Breadcrumps allows user to understand where they are in the website
Title and flavor written with text hierarchy with reviews for faster decision making. Price listed with bigger text.
Delivery estimation with the pin code
Collapsable product information to avoid information clutter
cart and checkout
Cart overlay pops with a product when a user clicks on add to cart. They can add quantity of the product as well as delete them.
​
Bar on the top shows how much the user need to shop to get free shipping.
​
Checkout button in red is highlighted. It makes easier for user to navigate and order,
Step by step checkout process without adding number of pages. The website allows guest checkout as well as quick sign in option. User can click on edit to change their information if needed. Page has ordr summary on the right. Order review enables user to check all the information again before placing the order.
sign in, wishlist and order tracking page
baymard after analysis
