Designing the User Interface for a Mobile First Ecommerce Site

Darryl Hutton
Apr 9, 2014 · 5 min read

Using underscores to setup a blank theme for Wordpress with Woocommerce

Overview

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


Grid System

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.

Example of how the fluid grid reacts on smaller screen sizes

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 .


Header

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.

Sketch of header UI by an interviewee (left) and the design used in the prototype (right)

Navigation

Navigation menu opened on Blackberry Z10 displaying child categories of ‘Menswear’

Footer

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.

Footer displayed on both desktop and mobile device.

Product Grid

Product grid sketch by interviewee (left) and design used in prototype site (right)

Product Information

Sketch by user of add to cart hide/show (left) and flow of this action on the prototype site (right)

Cart Page

Cart page design on prototype site

Checkout form on mobile device

    Darryl Hutton

    Written by

    I create and improve online experiences through a user centred approach. Full-Stack Digital Designer. Belfast NI | darrylhutton.co.uk | dribbble.com/darryl

    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