John Allsopp

Professionally engineered Internet solutions for humans

Case study: The Tin Shop

The Tin Shop is a small family business comprising two partners, Lisa and Rex, who have a 'bricks and mortar' shop in Scarborough selling antique tins. They also trade on eBay, and had their own website (see 'old site' image) prepared by a local designer.

The new home page for www.tinshop.co.uk displays up to ten randomly selected tinsThere were lots of initial requirements, but one major one was for Lisa and Rex to save time. Running a shop and an online business took a great deal of effort and they wanted to make space for themselves and their son. I've heard this requirement often since and it's something an Internet system is perfect for (because it's possible to build a completely automated business).

When we first met on the 27 February 2002 I was completing my second year at university, so I had to fit the requirements of this project into the time I had available. We made a plan for me to work over the Easter and summer breaks, with the project mostly completed by then.

Before: the original Tin Shop site was difficult to maintain

As often happens the requirements blossomed. Lisa and Rex are very forward-thinking, so they allowed me to implement many nice features on the site, for instance, I'm working now on an alert system whereby people register keywords representing their interests (eg. oxo), and when a new tin is found and described with matching keywords, the system automatically emails the customer with a direct link to that tin's page.

We also worked on a way to link the Tin Shop's database with the online auction site eBay so that the whole sales cycle, including eBay, could be automated. Unfortunately eBay stopped the system we planned to use, and required us to spend quite a sum on an alternative system which, although much better featured, wasn't what we needed at the time. We are, however, interested in finding partners to spread this cost, so if you would like a website integrated with eBay then please get in touch.

One problem I wrestled with is how to manage the stock. With a real-life shop and a website, it's likely the shop will display items that are on the website. What happens when we sell a tin? If we sell one on the website, we want the site to send a text message to Lisa's mobile phone to let her know to take it off the shelves. If we sell in the shop, we want to enable Lisa to log the sale using her mobile phone, so it comes off the website.

Technically the site is written in the open source programming language PHP (which costs nothing), together with a similarly free and open source database mySQL. Almost everything you see on the site is driven by that combination, and is stored on a database. The Tin Shop have a maintenance screen to manage stock and most parts of the siteWhat you don't normally see (but I've provided a couple of screenshots here) is the maintenance screen that enables Lisa and Rex to manage the listed items, all the category fields, such as tin quality, country, tin category, type, period, manufacturer and much of the text. There's also quite a bit of JavaScript to provide things like the rollover behaviour of the menu, and form data checking, for instance when ordering. I used Boehm's Spiral adapted for web development as an overarching method for managing the process.

Adding items has been made quick and easy using drop down choicesAs usual my role hasn't just been technical. Besides business-level consultancy (for instance, on the design of the postage and packing system, how to manage stock, and how to manage multiple purchases), I created pretty much everything you see on the site except the tin data. The page layout, design and colour scheme was collaborative with the client as it almost always is, but I wrote the text, the information architecture (what's there, how's it labelled, how do you find it) is all mine, and the menu collage was a joint idea which I implemented. The idea behind the collage is that you only see it in full when you've visited each of the main pages. The 'torn paper' design was my idea, and I'm pleased to say it was used as the basis for paper stationery later (see image).The menu collage was used as the basis for new stationery

The site was designed from the start with search engine positioning in mind. Each tin page has its own URL (web address), so as well as people being able to send links to specific tins to their friends, search engines can link to individual items. There's no requirement to log-in which would stop search engines finding stock. Most interestingly, the [random item] button on each item page allows the user to link to a random item, but more importantly, it allows the search engine to link through the database too, finding all the tins in stock. Otherwise, each time it visited it would only find the ten tins displayed on the home page. I recently added the message "Click to see more oxo items." so when you do find a, for instance, oxo tin, one click shows you all the others in stock. This works for brands like oxo or mackintosh, and for manufacturers such as cadbury's. This also lets the search engines see a, for instance, oxo themed page which would get a good position in the search engine results list (because it will be mentioned a lot) when an oxo collector enters the keyword 'oxo'. Our search engine position has continued to rise since we started, something I monitor, report on, and respond to each month.

The item page for www.tinshop.co.uk includes flexible space for any number of photographsThe project was managed using time logging and reporting software, and Tin Shop were provided with a development website that recorded all decisions and meetings and provided a record of progress. They also received an email at the end of every day of progress letting them know what had changed.

So far I've worked for 800 hours on this project, but because of my pricing scheme and how early the Tin Shop approached me, much of my time was free of charge. This was my first PHP, mySQL, and JavaScript project. Nowadays I'm much more proficient, so a similar project would take less time.

I've an embarrassment of quotes for you from this project. From the client: generally "the site is sheer perfection..... I love it.... thank you - you're brilliant", "thank you for being so helpful, and always on hand, you are a pleasure to work with", "a brilliant programmer!!! - you'll go far", and "fantastic, brilliant - so so good - THANK YOU", about data entry "it's so easy" and "loading items is super quick", and a customer commented "I'm impressed with all of it, well done".

This project illustrates how an Internet-based system is not just a website. The Internet allows you to integrate all your systems. The Tin Shop website is just one part of the whole business, and it's not the only way the system communicates with clients, email is used too. Behind this customer facing system is another that The Tin Shop uses to manage their business, comprising a maintenance website, an interface for mobile phone access, and a system for text alerts. There are planned automated links too with eBay and suppliers of currency exchange rate information. The Internet is the common link, the enabler for the whole business automation system. That's the difference between building Internet solutions and just designing websites.