There is no argument about how e-commerce has integrated itself in our lives in the recent couple of years. Online shoppers now have access to e-commerce websites through different platforms; laptops, tablets and smartphones. Although it’s the same shop, where the user goes through the same journey, the experience quite varies between bigger and smaller devices and how your users interact with them.
In this post, we are going to explore this user journey and the differences in interactions between a 14-inch laptop and a 4-inch smartphone. This inspection will only include comparison between the view of the website from a desktop view and mobile browser view (responsive version).
The journey
The e-commerce website visitors aren’t all the same when it comes to familiarity level with the shop. Some are frequent visitors, beginners or first-timers. Thus, every user will take a different path. For example: a frequent user will probably go through a much faster checkout experience, since their info is already saved in the system, rather than a new user that still needs to provide their payment and shipping info.
However, we will go through some of the main screens that most of the users will probably go through which are
- Home page
- Category page
- Product page
- Cart
- Search
- Search result
- Checkout
- Post-checkout & Account
Home page (1/8)
Similar to shop window display, you showcase products, discounts and offers in this page. Users should be able to tell if they can buy what they want just from skimming through this page, otherwise they will abandon the website for another alternative.
Web view:
Walmart focuses on listing ads, offers and campaigns in the home page. This makes the page look more lively and active which is a great attention grabber for the shopper.
Mobile view:
Similar to the web, ads and offers can be found but in a much more compact design using the slider to make it more usable for the users holding their phone and using their fingers to interact with the screen. A common practice is to list all the shop categories in the home page of the mobile view for accessibility and exposure to display as much information as possible in a such a limited space.
Category page (2/8)
This page includes listing of all the products related to a specific group. Users would make use of this page if they are hesitant about which product to buy and/or would like to view multiple options or if they just came to browse without a specific destination or purpose in mind.
Web view:
Nordstrom helps their users decide on the product they want much faster by guiding them, using big and flashy imagery indicating subcategories. Once the user clicks on a certain subcategory, they are redirected to a clean display of products side by side, as well as all the relative information they need to view.
Mobile view:
Due to limited visual space, the subcategory filter is replaced with a button that opens a list of all the subcategories, followed by products display identical to the web view.
Product Page (3/8)
Web view:
Product images are the closer the shopper will get to the actual product. Using clean and high-quality images enhances the experiences tremendously. That’s why Gilt web design capitalizes on product images without excluding relative information like price, color options, quantity and product specifications details.
Mobile view:
The information included in this view is identical to the web design; however, all elements are resized, aligned and placed accordingly to provide readability and usability on mobile.
Cart (4/8)
Web view:
Source: sears.com
Sears makes use of the big screen by including a lot of details regarding the shipment and offers, as well as the product information.
Mobile view:
Unlike the web design, the limited space forced the design to include only the product information. The only consistent principle in both web and mobile views is making the “checkout” button the most prominent visual element.
Lessons Learned
There are no differences in the content present in both web version and mobile version of the websites. The only difference is how it is presented. Web users interact with a bigger space using a mouse or a touchpad, while a mobile user has access to small screen and is able to navigate using only hand gestures. That difference in interaction requires different types of design elements to ensure usability on either platforms.
The journey isn’t over yet. We will be exploring the rest of the screens in part 2. Stay tuned!