Skip to main content

Let's rethink "My profile page" at Drupal Commerce

Last year we started to implement our first Drupal Commerce 2.x projects. We had it in our mind, but we never dedicated the time to create a properly working, user friendly, cool "My profile" page. Now we did it!

I will walk you through the main elements, but first here is the big picture:

Drupal commerce - My profile page

 

The basic concept was to try to make a cool user experience and to really focus on the basic profile page and profile edit experience.

In the first column there is a "My profile" block with username and email address. The "Password" is just a hidden field, but we wanted customers to know that there is a place where they could edit their password if they want.

Below that there is a "Newsletter" block. It shows if the user is signed up or not to receive a newsletter. It is also easily editable by customers with a small tick box. 

The second column is the "Cart". We had a long discussion if it is needed here or not, but at the end we decided to give it a shot and test it. We will see how useful is it for customers. On the image there is a graphical information about the number of items in the cart. There are two action buttons as well, the first one directs you to "Cart page" the second one leads you to "Checkout page" to finish the shopping.

The third column is a "Wishlist" block. There is an option to add items to cart one by one and a button to add all of them at once. 

Profile, cart, newsletter, wishlist

 

The second part or let's say second row of Drupal Commerce my profile page is dedicated to order history and for addresses. We left space to show the latest six orders, with dates, order number and order status. We tried to emphasize the differences between order statuses so customers could easily distinguish at a glance which package is sent, which order is completed etc.

The last block is dedicated for addresses. The "Default address" is visible on the block, but there are options to view and edit all the existing addresses the customer used and of course there is an option to add more addresses.

Finally at the bottom of the page we placed two action buttons we thought could be useful here. The first one leads customers to a quick contact form to send their request by e-mail. The second is an active phone icon to make an immediate call. 

 

My orders, default address

 

This concept is still evolving. Although, this page is not the most important part of an e-commerce store, we will test it this year in couple of projects and hopefully update it to be more useful to customers.