Theme Design Best Practices

I decided to use WC (WooCommerce) as the platform of choice as it offers unlimited customisation as well as a wide range of features and add-ons. Before I began the design process I wanted to make sure I created the best experience possible, both on desktop and mobile. I started by doing some research around UX best practice, specifically for e-commerce platforms. WC offered some valuable insights into good theme design and provided UX guidelines to work from.

WC Documentation

The WC documentation states that a theme design should be simple, consistent, uncluttered, memorable, intuitive, efficient and functional. It breaks down the various design elements and provides guidance on each, some of which I’ve highlighted below;

• Layout – should be up to industry standards in terms of hierarchy, flow, content balance and white space
• Typography – should provide elegant and legible font pairings that promote comfortable reading, as well as consistent font sizes, line widths and spacing
• Iconography – icons should portray a direct meaning of the actions/situations they are representing and are consistent with regards to sizing and colour
• Colour – the theme should follow are harmonious and consistent colour scheme and contain a primary/accent dominant colour, as well as one or two complementary secondary colours
• Patterns – the theme must employ a consistent set of patterns such as
  • Navigation, sidebars, footer
  • Content blocks (title, paragraphs, lists, product details, reviews, image showcases etc)
  • Form structure and elements (fields, drop-downs, buttons etc)
  • Tables
  • Lists
  • Notices

Across the design and development process I used the WC documentation as a guide to improve the user experience across the platform.

Accessibility

Along with the WC documentation I referred to the WordPress Theme Handbook to make sure the Web Content Accessibility Guidelines (WCAG) were followed as closely as possible for those who are visually impaired or cannot use a mouse. These included;

• Headings – appropriate use of heading elements and in the correct hierarchy (e.g. h1,h2,h3,h4)
• Links – use meaningful link text to describe the resource and underline where possible
• Sectioning Elements – use appropriate section elements (e.g. <header>,<nav>,<footer>)
• Images – add alternative text (alt attribute) to all images for non-visual reader
• Forms – make sure labels are used (even if hidden) for those who are visually impaired and use screen reader software
• Colour and Contrast – make sure your design palette works for those who are colour blind

References:
WooCommerce Marketplace Theme Design and User Experience Guidelines
WordPress Theme Handbook – Accessibility
Web Content Accessibility Guidelines (WCAG) 2.0

Wireframing & Prototyping

Before I began wireframing I researched some of the do’s and don’ts of e-commerce design and found some useful resources. Toptal had a valuable article on eCommerce UX Best Practices which stated that nearly all eCommerce sites rely on a similar sequence of pages to funnel shoppers through the sales process.

• Uncluttered homepages with irresistible value propositions
• Well-organised category pages that are easy to navigate
• Polished product pages
• Uncomplicated checkout pages that show progress and make shoppers feel secure

The Nielsen Norman Group website had a useful UX guide on what to include on your product pages, these included;

• Descriptive product name
• Recognisable image(s)
• Price, including any additional product-specific charges
• Clear product options, such as colour and size, and a way to select them
• Product availability
• Clear way to add an item to the cart, and clear feedback when it has been added
• Concise and informative product description

I used these resources (as well as WC guidance) as a basis for my site navigation and layout structure.

Visual Design

I created a brand identity for The Foil Printing Company and worked from this to establish a style guide and component library. The site was built using the popular Bootstrap framework.

The visuals were created in Sketch where I worked to a 12 column grid with 30px gutters. I created mobile visuals first as the majority of users would be mobile based, arriving to the site via social platforms.

Please find below some examples of the mobile and desktop visuals.

Results & Takeaways

I enjoyed working on this project as it was my first introduction to the world of e-commerce. I learn’t a lot about UX best practices, accessibility, and how to optimise the shopping experience to reduce customer drop-off and improve conversion.

I also gained valuable development experience relating to WooCommerce and theme integration.

@thefoilprintingcompany