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


Grid System

Example of how the fluid grid reacts on smaller screen sizes

Designing the UI from user sketches and recommendations


Header

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

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