Official website for Web Designer - defining the internet through beautiful design
Author: Steve Jenkins
6th February 2013

Behind the site build of fashionista Hard Graft

In-house duo James Teal and Monie.Ka reveal how they took control of the Hard Graft build to create a web experience worthy of its bespoke products

Behind the site build of fashionista Hard Graft

Behind the site build of fashionista Hard Graft

Company | hardgraft (in house) Web |

Hard Graft, originally titled Working Class Heroes, was born back in 2006 with little thought for the future and little business knowledge. However, founders James Teal and Monie.Ka had a clear vision to create honest handmade products from natural materials with original and clever designs.

Hard Graft’s values are built upon the fact that real craftsmen in an Italian workshop create its products.
A few years back Hard Graft decided that the combination of wool and leather needed to be applied to tech accessories. It wanted to use high-end materials to create unique and cleverly thought through designs that offered unrivalled attention to detail and stellar craftsmanship. Its bespoke signature style is brought to life by two young and talented Italian leather artisans and their own specialist selection of materials. Hard Graft uses its own premium blend of one hundred per cent wool felt and premium one hundred per cent vegetable-tanned Italian leather.

To compliment Hard Graft’s obvious offline talents, its online section is kept in-house. James Teal, designer and co-founder, explains, “We have been designing and building our own website in-house ever since we changed our name to Hard Graft back in 2007, it all started as a pretty simple online shop in a classic layout. Over the years the website grew, like us, and like our products. Design is to me, next to quality, the most important part of our job, doing it in-house was the easiest, most honest way. I think we would have driven an external agency crazy – we are perfectionists.”


Hard Graft sells products, and this provided the starting point for the whole site. No shop window, just straight into the action.
Teal: “Our first thought when creating our current website was to delete everything unnecessary and get straight to the point. Like so many online shops there is a homepage with this mood image, equal to a store window in the real world. We thought: ‘wouldn’t it be better to just delete this barrier of the window?’ You come to Hard Graft and are immediately right in the shop, surrounded by all our beautiful, hand crafted goods. They really are photographed so well that you can almost feel them.”


A straightforward design process powered by Photoshop mock-ups helped visualise the Hard Graft concept. A revisit after a couple of days away from the design ensured the right option was selected.
Teal: “The design process was pretty straight forward. First, draw up ideas in our Moleskine, discuss it together with my partner Monie.Ka and then create some Photoshop mock-ups. We visualised every single page first, slept on it for a few nights, and if we still thought it was a good layout we stuck with it.”

Behind the site build of fashionista Hard Graft


Choosing the right backend for the Hard Graft webstore was critical to its success, and after a lot of research, Shopify got the nod ahead of the old eCommerce platform.
Teal: “With our last website we had Magento as the online shop backend. As designers we didn’t like the look of it at all. Everything seemed so clumsy, so we did a fair amount of research to find a better platform. Since designing and programming our entire website in 2007, a lot has changed and luckily there are pretty good online shop platforms available now. We settled on Shopify and implemented our new designs, but this was the biggest challenge as Shopify has a few limitations, like maximum image sizes and its own language. We had to find creative solutions to achieve the perfect layout and functionality. However, multi-currency handling and multi-browser functionality needs ongoing maintenance – we’re still fighting a bit on that challenge.”

Behind the site build of fashionista Hard Graft


Teal: “Launching the website was pretty scary. When we did the previous Magento store, the site kept crashing every time we sent out a newsletter. So we wanted to make sure it kept up with the traffic. Apart from our newsletter, we’ve never done any advertising. Thinking back it was a pretty smooth start, a few minor errors here and there which we fixed on the go. Our products and designs are geared towards the creative professional who has an eye for quality and loves details and individuality – they can see that we put a lot of effort into the website and I would like to think that they really appreciate it. Even though we are product designers, we proved that you should follow the design through to the packaging, branding and, well, your website. Everything fits together perfectly.”

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.