Some of you may know that I run a Chinese takeaway and delivery shop in Lancaster, UK with my partner and her brother. My role is strictly ‘front-of-house’, customer service, chief geekster and go-and-get-stuff-from-Preston’er (among other things like doing the weekly books and tracking the cost of goods sold etc)

I can’t for the life of me go in the kitchen where it’s all fire and wok but, I can do all the other great things like come up with great marketing ideas, develop online solutions for advertising, answer the phone and understand the myriad of different accents you get when you run a delivery orientated business in a two University town.

Pretty Vs Useful

One of the things that was inevitable for me to do was, The Website.

Now, I class myself as a developer not a designer. The difference? to me, a designer designs. They take an idea and take it from nothing more than a think in the head to a pretty thing you can see in front of you. They make things that are pretty.

A developer (to me at least) is someone who develops things. They take something that is partly tangible and make it better/bigger/more. In essence, they get something and develop it. They make pretty things useful

Obviously, there’s more to it than that but you get my drift.

From little acorns..

This is the site the shop used to have..

You can see it’s very basic, it had to be because it was made a looong time ago on something like MS frontpage or other ancient artifact invented by Margaret Thatcher. There’s nothing wrong with simple, simple works because, well, it’s simple! You don’t need a degree to navigate it and the menu display used a fancy bit of javascript that kept the categories stuck to the left wherever you scrolled on the screen… (that was high class DHTML at the time)

It did the job, people used it and found what they wanted to eat without having to search behind the fridge or sort out the over stuffed kitchen drawer for a dog eared menu.

..bigger acorns grow

It was obvious, inevitable, ordained that I, master geek, should take this website and make it mine!

The first thing I had to play with was the logo. I couldn’t change it because the shop signs and menus et al were emblazoned with it already and any designer/developer worth his salt will be able to tell you lots and lots about brand recognition and the pitfalls associated with making any dramatic change to the shape or flow of an existing brand.

Look at the history of the Coca Cola® logo at Andrew Keirs’ blog. Barely any change at all.

So, this logo needed updating but it also needed to stay recognizable..

What could I do? My options were,

1. outsource
2. fudge it in photoshop
3. ask the internets

Outsourcing was out of the question, I’ve tried that route before and always regretted it. Probably because for the price I was willing to pay I had to settle for second best or go through 3 or 4 fifteen year old middle men who couldn’t speak enough English to fully understand what I wanted so, that was option 1 gone.

Fudge it!

I’m no stranger to Photoshop, more realistically, I’m no stranger to Layers and Blending options. You can pretty much do anything with the filters, layers and blending options on Photoshop. (real designers and ’shop experts are experiencing skin crawling sensations right now)

The first thing I did was grab the low-res image as a screen grab (alt + prt scr) and paste it into a new layer, add a text box and click the ‘blending options’ menu item. A couple of copy/pastes later, I had this..

Hurray!

The hurray didn’t last long though, it looked better to my eyes (of course it would, I made it) but, it didn’t print well. It looked ok as a tiny teeny logo on the corner of a menu but it looked bloody awful on a 300dpi glossy proof.

Have no fear, The Internet is here

I turned to the internets to see what I could find.

I discovered I could get the logo turned into a vector image by a design shop = £200 please, um, no thanks.

There’s software you can buy to do tracing that turns an existing image into a vector = £lots. No way dude.

And then, Vector Magic. A website that offers a free, online, 2.0, do-it-yourself service that takes a bitmap (or other format) image and gives you real time tools to turn it into a vector based no-jaggy image.

Gawd bless them for their free-ness, this is what I got from the low-res jpeg grab and a bit of jiggery pokery in ’shop..

Loooaaads better! It was vector so I could blow it up to any size I wanted and it would still retain the curves and straight diagonal lines it had when it was little. Awesome, 300dpi no problem. Menu printing – no problem.

Procrastination, the best way to pretend to do work

After pissin about with the logo and menu redesign for what seemed like a few seconds but turned out to be about 3 months I started working on the website.

When I’m confronted with a do-it-from-scratch project. especially if it’s a you-better-not-spend-more-than-a-hundred-quid type of thing then I try to start with something that exists already and see if I can turn it into a working site.

I first searched for wordpress themes with the word “restaurant” or “takeaway” or “Chinese” associated with them. Zip, nada, zilch.
The best I could find was the oriental theme for Wordpress which after a quick browse just wouldn’t do. It’s a nice theme for a blog but it didn’t have many options for turning it into a proper takeaway website.

Wordpress is awesome for it’s ability to create non-blog sites, I pretty much use it exclusively for making any kind of online publication. It just wasn’t awesome enough to turn this simple theme into what I wanted.

Back to the drawing board?

oh dear, would I have to actually PAY SOMEONE to do it for me? bwahh, that’s not gonna happen for less than a monkey (Brit speak for 500 quid). This did seem to be the only option though.

This website was designed when I used an Indian oursourcer company once before to help for a website I got commissioned with for a pretty fancy pants place in Milton Keynes. The budget was a lot larger and even though the site looked beautiful and the client was impressed, I didn’t have the backing to do it this way for us. Besides, what if we sold the business? What options would the new owner have to edit and update their prices and menu? None, that’s what (unless they were a geek like me, unlikely though).

WordpressMu and Premium Theme awesomeness

And then, I perchanced (real word, honest!) on a CMS theme called WPMu-Dixi from the guys at wpmudev.org . I had it installed on my WPMu site at The ComLuv Network as a premium theme available to supporters (a plugin from premium.wpmudev.org that opens up a paid monthly subscription to users).

WPMU-Dixi.
An awesome CMS type theme that can be edited through the admin page.

It’s been there a while and it was only by chance (yup, procrastinating) that I looked at it again but this time, with the eyes of someone wanting a way to completely customize a site without editing template files AND keep the usability and power of a Wordpress theme. Mainly, tags, categories, RSS feeds, easy editing, instant results and googleability (another real word).

It’s benefit was the home page feature, it was completely widgetizable which meant that I could remove all the standard blog type things and replace them with takeaway type things. You can also change almost everything about the theme using the admin settings page, fonts, colors, backgrounds and header images. Yey! rock on, make it so Mr. Data…

All on one page please

One of the things that I didn’t like about the old website was the fact you had to go clicky clicky all over the place just to find the telephone number or location and something I felt was needed for a new one was a single place to find all the information you need.

As a savvy web user, I have no trouble using my common sense to look at an ‘about’ page for location, clicking on a ‘menu’ link to see the menu seems like a no brainer but, to a ‘quick, I want it now’ internet surfer that seems too much to ask.

You have to think why a user is at your website. As a Chinese food takeaway and delivery business, the main reason someone is at my website is because they just searched for a Chinese takeaway in Lancaster (woot! number 1) and the last thing I want them to do is to spend more than a few seconds figuring out if 1. we actually deliver to their area and 2. we are open. So, you see, in my opinion you should be able to see the phone number, the location, the type of food served and opening hours all on the first page you come to when visiting a website (a site for a takeaway that is). If you can’t have it all, the very least is the location and telephone number right there in your face.

Edit, paste, tweak, finangle it and gawd bless Firebug

I use firebug all the time, it’s wonderful to be able to inspect any element on a page with a simple F12/click and change its’ css in real time to see what it will look like in a different size or remove it entirely.

After just a couple of days of spare time (the bits between rushing to Preston to buy mushrooms and spending whole afternoons trying to get the ancient Win98 order system to work on a Linux box) I was able to experiment with Firebug and completely transform the Dixi theme into this..

You can see it’s got a BIG telephone number displayed which is the number one reason people are searching for the site (from research). The location (number two reason) and a downloadable menu (third reason).

But, that’s not all! I spent literally days and days entering in all the menu items as posts using categories, tags and descriptions. With over 200 individual items, that was quite a challenge (to my boredom threshold). And, while I was there I thought I might as well add custom fields to each post – the price of the item and the item number for future use.

It works quite nicely and because I took the time to tag every item and categorize it, a user can click on one of the tags and see every item that contains chicken or is classed as spicy. Clicking on the title of any one of the items in the list takes them to the single post page where they can see a picture (if available) and a description of the item and because it’s on a wordpress site, they can leave a comment or review of the dish being displayed. Bloody good wot!?

Extending it even further

I could have left it like that, it was enough but, being a geek and serial tinkerer, I wanted to make it do more and show off what can be done with a few extra bits like a custom plugin and some jquery’ness as well as provide a showcase of what can be done with a supporter account on The ComLuv Network (ever the promoter that I am) (and worried that the server the site runs on might use up all my spare sweet money before I get enough paid customers).

The click to see a list of items that have, for example, chicken or cashew nuts was ok but it showed the excerpt of each post in a format that meant the page went on and on and on. A solution that came to mind was a custom child template but I couldn’t figure out a way for it to take over from the existing tag display code without editing the template to put an if/else catch.

Not good, I didn’t really want to go that way because 1. it was time expensive and 2. I wanted others to be able to use the template for things other than as a takeaway site and, I wanted to be able to upgrade the theme if necessary without having to redo all the custom code.

jQuery, and Wordpress filters/actions – I love you

I dug up some code for how to use the custom fields in a post and researched the_title() wordpress filter and added some jQuery-after-the-fact-code to change the css for the template. Loving it! with just about 30 lines of code stuck into a plugin wrapper, I was triumphant at being able to take the tags and archive and search results page from this..

which makes the page a very very long one, to this…

which shows the item number, price and shrinks everything down to a ‘consumable by impatient surfers’ level. I did some other magic with jQuery to change the “leave a comment” to “leave a review” and changed the title of the tags to “see X dishes containing Y”. Other simple search/replaces on terms that are used primarily for blogging were done too. Easy peasy with jQuery!

I am super pleased with how it turned out, just about the only thing I could have done more is “add some frickin lasers”

What’s next?

• Online ordering.
  Simply done so anyone can do it just by activating a plugin. That’s what’s next, I already have some bits of code that should be able to turn any post that has a custom field of “price” in it and insert an “add to cart” button on it. Combine that with an AJAX shopping cart and paypal gateway and there’s no reason it can’t be a fully functional online ordering system within a week or so.
• A do you deliver to me plugin.
  A customer should be able to enter their postcode and find out if we deliver to them. (kind of already done using my delivery worksheet/google maps api stuff)
• More pictures of dishes
• A package to allow any ComLuv supporter to add these things to their site at a click of a button
• An email course explaining in more detail each step I took to make the site number 1 on Google for our chosen search term
• A video series showing how to turn Dixi template into your own business site
• I’d better stop here or I’ll think of so many things that I wont have time to do anything else!

Take a look at The Fired Wok Chinese Takeaway website and let me know what you think, remember, it’s a wordpress template using only 1 custom plugin and no template file editing. I’m feeling pretty pleased with myself but I know there are things that only someone who isn’t me will see so feel free to leave a comment (here) with feedback.

Holy crap, this was only supposed to be a little quick post. 2500+ words and a few hours later, ahem.

Blog Tools, Business Software, Wordpress, ecommerce

chinese delivery fired wok marketing modification order online restaurant takeaway template web design