Using User Sketching in the UX Process

Darryl Hutton
Apr 9, 2014 · 5 min read

Part 12 of 15

A series of journals documenting a participatory design approach to improving the usability of mobile e-commerce web experiences.


This journal covers the observations and recommendations from the user interviews conducted between 12th and 19th March 2014.

Four one-on-one interviews were conducted this week, the users had various levels of experience in using eCommerce websites on their mobile devices. One user had never used their mobile browser on their device as they had recently purchased their first smartphone.

In each case users encountered issues in either one or both scenarios. These users gave the following recommendations and supporting sketches for elements common to eCommerce sites.


One user who commonly visits websites using their tablet device suggested a simplified header on mobile devices.

Suggested site header design

The user suggested providing feedback to users in this header stating,

“The cart icon should change to show the price or the number of products there, so I don’t need to check the cart page to make sure my products are there.”

A second user also highlighted a usability issue in the eCommerce site’s header they chose for the first scenario.

“The search box should be visible and not hidden behind a button, I didn’t know it was there”

User did not notice the search icon in the header

Finding Products

During observation of the scenarios, it was interesting to see users use different methods to find the product they were looking for. In particular, some users used the search input on the first site, yet on the second site they made use of a dropdown menu or chose a category from a grid on the home page. This showed me that users do not have a set method for discovering products and are likely to choose whichever method appears the simplest. I asked users to give reason behind their choice of finding the product if multiple methods were present on the site. The answers given were:

“I saw the menu button first”

“The search box was right at the top”

“I saw the category on the home page and I knew the product I wanted would be in there”

With this in mind, I believe it is important to give users a choice by offering commonly used functionality that users will be familiar with. It may be the case that the user knows exactly what they are looking for, for example in Scenario Two some users were able to use the search functionality to search for “Game of Thrones Series Three Blu Ray” whereas another user wanted to buy a dress in a sale and navigated through Sale > Womenswear > Dresses to find the product they wanted.


Although not included in the scenarios, footer links on some of the sites were noticed and required the user to pinch to zoom in order to find them. This resulted in the user getting frustrated and also forgetting to zoom out when she scrolled back up the page to find the link required.

Footer links problem and suggested solution by user

Product Lists

Some users expressed an opinion on how the product lists were displayed on their screen. The concerns mainly related to the length of these lists, the loading time this took and the difficulty in finding a product they saw earlier in the list.

In order to address these three concerns I explained the concept of pagination and how this could address the issue. Users agreed unanimously that displaying roughly 10 items per page with well sized pagination navigation on each page would improve the usability of a site that sold a large amount of products.

User sketch for product grid — allowing for more products to be displayed at once

Secondly, one user was presented with a list that took a long time to scroll through. He suggested that displaying the products in a grid 2 products wide would take a lot less time to scroll through. In fact, by halving the width the height would also be reduced, meaning that 4 products could be visible on the screen instead of one.

Product page

Users unanimously agreed that the product image was the most important element on the product page, therefore this will take prominence in the prototype created.

Users generally found the product pages well laid out on their devices, one user however had a recommendation for improving the interface after experiencing frustration.

He attempted to add an item to his shopping cart when he had not made a selection of the size or fit of the item. This caused the page to refresh and display an error message prompting him to “Choose a Size”. Once he did this he tried to add the item to his cart again only to recieve a similar error message “Choose a Fit”.

He suggested hiding the “Add to Cart” button until selections had been made, in order to stop users from pressing it without making vital selections relating to their product.

User suggests hiding the add to cart button until required selections have been made


In the majority of scenarios, users were presented with feedback relating to their actions. In particular, when users had added an item to their cart the site either showed a message making this clear or took the user to the cart page.

I asked users which they would prefer, some users suggested that they may want to continue shopping whilst others did not mind being directed to the cart page, so long as there was an option to continue shopping.

The next step in this project will involve taking on board the feedback and sketches from users in order to build a working prototype which can be tested against the usability heuristics compiled last semester.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade