At this stage in the process I will be creating a working prototype of an eCommerce site for the purpose of implementing and evaluating how effective a user centered design approach is in creating a usable interface for a mobile eCommerce application
The site is built using WooCommerce as an eCommerce toolkit for Wordpress with the front-end design designed and built by myself and used as a theme for WooCommerce that could potentially be distributed and used by anyone interested in implementing an eCommerce store with a usable mobile and desktop interface created using a Mobile First Responsive Design approach
At the start of this design process I decided to utilise a fluid grid system that would adapt to the screen size of the device used to view the site. The site will be made up of containers that contain a grid with a maximum width of 960 pixels which can be split up into a maximum of 12 equal columns. This grid was then adapted for smaller screen widths by using two seperate sets of media queries, implemented via CSS, that would change the percentage of the column widths.
As the image above shows, the grid is used at 960 pixels wide to display the information in the header of the site in two separate grid columns, each set at 50%. At the breakpoint for mobile devices this grid adapts and spans these columns to 100% allowing for a better viewing experience on handheld devices.
Designing the UI from user sketches and recommendations
In the interview process a number of recommendations were made by users, with some also providing sketches. These sketches were used in designing the UI for this prototype as well as ideas I implemented based on observations .
The design of the header was suggested by a user during the interview process. He highlighted the site’s name, search bar, login/register, basket and menu as the elements that should be available on every page at the top.
I also took the recommendation of a different user who suggested that the search bar should be visible all of the time and not hidden behind a button, as this could be easily missed or misinterpreted by a novice user.
The navigation will be hidden behind a button at smaller screen widths so that the user can easily get to the content without having to scroll past a list of options on every page.
This list will contain a set of parent and child options. The child options will be visible when the parent is selected, in an accordion style menu.
One issue that was raised during user testing was the use of the hamburger icon to represent the menu, with most users having to guess what it meant. I have looked at an AB test of responsive navigation using the hamburger icon and alternatives. For the purpose of this prototype I will be using a hamburger icon with the word menu wrapped in a border so as to look more like a button.
The footer design was based upon a sketch by a user, frustrated by difficult to select links at the bottom of some responsive eCommerce sites. At the smallest set break point, the links become bolder, have more padding and are given a bold border so that users are able to easily select the link they require.
The layout of the grid of products was sketched by a user during the interview stage. He preferred the grid of products to be displayed 2 products wide, instead of the 1 product wide list he experienced on another website. This would allow the user to see 4 times as many products on their screen and require less scrolling to reach the bottom of the page, meaning they can find products more effectively through this method of search.
The product information design was based upon feedback from multiple users that the product image should be the most important element on the page. This page was also designed with observations and sketching done during the user interviews. One user suggested hiding the Add to Cart button until all selections that are required to be made are complete. For example, the user must select the colour or size of the jacket before they are able to see the button to add it to their cart.
The cart page was discussed with some users during the interviews.
In order to create an effective and easily read cart it was suggested to start with the mobile device and add more information as the screen sizes became larger. In the case of mobile devices the users suggested showing the product’s name, size, price and quantity.
On a larger screen it could be possible to also add in an image of the product.
Finally, I made use of a plugin to see if the long forms used for the checkout process could be made more usable. This plugin allowed me to hide the labels for each input using absolute positioning outside of the viewport, which means the forms are still accessible via screen reader.
This plugin then took the text used in the placeholder of each input box and placed it above the text the user inputs. While this might improve usability on certain mobile devices, it will require thorough testing across many devices to check for possible exceptions.