My Experience With Outsourcing Web Design

The new version of Bingo Card Creator is up and open to the world now.  It features a massive integration with Daily Bingo Cards (no link since the site is, well, integrated) and a spiffy new design.  I’d like to talk a bit about why I did that, how I got it done, and my reflections on the process.

Why:

I really lack design skills.  Sure, I can edit HTML and modify CSS if given a template to work with, but visually I’m just totally lost.  Ask my coworkers — I can fail to match colors given a closet full of white shirts and black pants.  While the open source Sunny design by Sangent kept me going for a ridiculous amount of time, I had always been not-wowed by the brown text, and the HTML was getting far too crufy to use in a dynamic site and to modify quickly and easily.  You’d be *amazed* at the challenges in keeping the right hand sidebar in a pretty position, for example.  (My fault, obviously, not his.)

Sadly I did not keep a photo diary of the website to show you how much, or how little, it has changed over the years.  Ah well.

You’ve Got Talent, I’ve Got Money, Lets Party!

One of the main things I appreciated with the OSS web design I used was that it fit my budget (um, nothing) when I was starting with that $60 constraint back in the day.  After 1.5 years of growth, though, Bingo Card Creator throws off enough cash so that I can comfortably smooth over my weak points by hiring people with talent to fill them.  This worked so exceptionally well for me for getting bingo cards written (total cost: approaching $500 and worth every penny) that I was fairly confident on doing it for web design.  One catch: I only know one web designer, and he was a little busy this month.

Enter eLance.  It is essentially a Rentacoder-type site with a) a much, much better interface and b) a wide collection of Internet professionals probably a little more biased towards web design.  I wrote up what I wanted, mentioned my price range was sub $500 (mentally I was thinking $300 – $500 based on expected quality), and started soliciting bids.

Here’s the project description.  Note I tried to make things as easy as possible for the designer.  This was both to tell folks which types of designers I wanted bidding, and also to signal to designers “This is not a client who is going to suck your time and be terrible to work with”.

What I need done:

I am a business owner and web programmer. My artistic and design skills, however, are limited. I am planning on merging two of my websites in an education-related niche, and will be using the merge as an opportunity to improve the current graphical designs (which are based on very generic looking open source templates, and do not mesh well at all).

All I need done is the CSS, HTML, and assorted graphics files for one page to use as a template — I am capable of porting the template to the rest of the site by myself.

What I already have versus what you will build:

I have two functioning websites for you to work off of, including the page whose content you will be using to design the template. I will also provide you with a design document identifying features which I will need in the template — target resolution, number of columns, and the like. You get to take the existing content plus the design document and turn it into something pretty. I have also got a logo which you can incorporate into the site, or not — I’ll leave that one up to your discretion.

Style notes:

The overwhelming majority of my users are non-technical females in their 30s and 40s. The website needs to have a clean, inviting, and bright feel to it. I rather like the artistic direction of most Web 2.0 sites, if you need general inspiration — simplicity, curves, etc. If you’ve got a portfolio of sites like that, you’re more likely to get my business. What I do *not* need is a generic-looking template with a stock photo on it.

Technical notes:

For SEO purposes and to ease my integration job, I’m going to need the CSS externalized, the layout to be done primarily in CSS rather than in tables, and the code to look very clean.

Timeframe:

I’d like to have this done within 2 weeks, which is quite generous for the amount of work I expect this to require.

I started to get a lot of bids, most extraordinarily low from countries with low prevailing wages.  Many of their portfolios were filled with… websites of a quality which I would not aspire to?  Most of the bids were also copy&paste templates which gave absolutely no indication that they had actually read more than a sentence of my proposal.  Here is a fairly typical one, with some edits for anonymity.

We are team of professionals having expertise in developing web based application using PHP/ASP and Cold fusion and in web designing using Photoshop, Dreamweaver,Illustrator,Flash 8.0/Flex & Maya. After reading your project description, we are highly interested to do this CSS page for you.  [Note this first and most crucial paragraph tells me nothing of use, other than they understood the word CSS.]

Here are some of the reference websites designed by us recently.

[Snip of websites, none of which look remotely like anything in my niche, inviting to ladies, etc.]

We can carry on with your work for 100 USD where in we will design this page exactly as per your requirements using CSS. Kindly revert back incase you need for information from us. Thanks!! Bob

One proposal, however, stood out:

Hello and thanks for the opportunity to bid on your project. I understand your requirement for a clean, web 2.0 style professional layout and can deliver precisely the same.  I can deliver a high-impact template incorporating pleasant colors, ease of navigation and a look that would not tend to bore prospective visitors, even on multiple visits.  [Holy cow, a designer who talks about design and not tools.  Pinch me.]

I have over 9 years of experience working on CSS layouts and can assist you better as I am a woman myself.  [She read the spec!]  If you can give me the links to your current websites as well as a summary on what you expect the new design to do for you, [she knows she needs more information and is unafraid to ask before promising the moon!] I am willing to do a FREE sample design for you to consider before you may chose my bid or any other.

Feel free to see my portfolio –http://www.gursimran.com [take a look — the portfolio page itself sold me]

Thanks & Regards,
Gursimran

I was at this point 95% convinced I would choose Gursimran, based on the quality of her letter and portfolio.  However, she had offered to do a free design, so I decided to take her up on it.  After giving her my requirements spiel, this is what she came up with:

Hello again Patrick,

Please find attached [warning: huge image, new window] the mockup I did for you.

What I have tried to achieve with this design:

1) Integrate web 2.0 elements like soft gradients, visible text and bright choice of colors for ease of navigation and a clearer message.

2) A layout completely achievable with the use of pure CSS and with excellent flexibility as well as editable text everywhere for easy updates.

3) Individual header images which use text as their headings (editable via html) enhancing the message as well as giving a professional outlook.

4) Well spaced out elements to give a lot of open feel and ease of navigation.

5) Use of red and yellow from the logo balanced with gray elements to give subtle yet effective direction to the layout.

I do look forward to your comments.
Everything in this layout is built from scratch (except for the logo) – so feel free to ask for any modifications on the same. My goal has been to keep it simple but effective – do let me know if you prefer it any other way.

Thanks for your consideration,
Regards,
Gursimran

Its clean.  Its web 2.0.  Its beautiful.  It is also colored blood red, firey orange, and black.  OK, clearly we need a bit of work on the color scheme, but this makes me 100% certain that I’m going with Gursimran.  We then go through a few iterations on color — I keep saying variations on “bright” and “pastel”, and some of her options were closer than others.  Not being totally happy with any of them, I looked through her portfolio (the online equivalent of paint swatches), and said “I really like the blues you have here” (her personal blog).

Concurrently with the color scheme selection, we work on button designs.  Funny thing about icons — if you don’t know a bit of trivia about the cultural background of the audience, you just might make your Download Now button look like a stopsign:

Stopsign download buttons

So I told Gursimran that red + hand displayed palm up does not mean “You’re cordially invited to download this software” in America, and suggested some improvements to make things more inviting.  The next version was much improved:

Much improved icons

(Note: not using those on the website at the moment, but I probably will later after some tweaks to them.)

Then I got a bit of touchup work done on the line wrapping, and voila, one completed website.  I quickly mailed Gursimran back thanking her for the design, and released her payment.  A glitch on eLance’s side caused me to be refunded five minutes before releasing the payment, so I had to send it again, but other than that things went off without a hitch.

The End is Only the Beginning

I was largely satisfied with that design — not quite feeling the dark green, but otherwise it was worlds better than what I could accomplish by myself.  Feedback from my professional peers was also largely positive.  Then I started to integrate it with my sites, and found that a few points were a little brittle.  For example, if you had sidebar items which were 2+ lines long, they’d overflow the image designed to hold them.  Uh oh, not good when you need to write things like “Canadian Provinces Territories And Their Capitals Bingo Cards” (longest one on the site at present, by the way).

And I really didn’t like that green.  So I busted out Stylizer (highly recommended, and a uISV product to boot), replaced the image background with a plain HTML color, and then used their extremely intuitive color selector to find a green that I liked.  Then I noted its HTML value, opened up the old image in Paint.NET, used the magic select button to grab all of that wedge Gursimran had nicely drawn for me, and flood-filled it.  This gave me solid green, but solid green was a little much, so I played with a bit of a gradient to white until I found a look that I liked.  Then I went back to Stylizer, changed the text from black to white (which makes it look a whole lot less dark), and changed the rollover color to blue so it would be visible.

Now, what to do about the sidebar?  Well, I decided to go all text labels on the sidebar for consistency, and made them green because otherwise the navigation bar would be the only green thing on the site, and looking at it was making me feel blue.  (Bad puns like this are an English teacher’s stock in trade.)

Twelve hours of HTML editing and Rails wizardry later (30 templates to alter, gack), the site is looking better than it ever has and will now be MUCH easier for me to update in the future.  It also has some functionality improvements which I’ll talk about later.

Suggestions for outsourcing

  1. Get ready to be flooded by a bunch of low-quality, copy/paste proposals on the freelancer.  Ignore them, and focus on finding the diamonds in the dust.
  2. The more specific your proposal is, the better informed your designer will be and the more likely you’ll attract a quality designer (who, naturally, want quality clients).  Gursimran commented that I was one of the best clients she ever worked with, and she is certainly the best designer I’ve ever worked with, which is sincere praise even with a sample size of 1.
  3. English is funny sometimes.  Examples you can point to sometimes help a lot more than our limited design vocabulary, especially when you’re an engineer and your design vocabulary contains only the words “pretty” and “not pretty”.
  4. For God’s sake, look at the portfolio before accepting a bid.  You might not get designs as stunning as the portfolio, but you certainly aren’t going to get better, and about 50% of portfolios disqualify designers straightaway.

Anyhow, next time I need something done, I’m shortcircuiting this process and bringing work straight to Gursimran.  I recommend her to any uISV needing a quality design done in a visual style similar to what she usually produces.  Please don’t make her so busy that she can’t work on my sidebar buttons. 

Minor nuisances

Communication and length of time it took to get the design done (two weeks and change) were more problematic than it would have been if I had had face-to-face contact with the designer.  However, I was in no particular hurry.

Next Step

I’m getting a new logo designed to match the new look.  Expect my report of that next weekend.  There are also a million and one little tweaks to do to the new site.  If you’ve got comments, I’d love to hear them.

Standard Disclaimer:

I have never accepted payment for plugging service providers and won’t start anytime soon.  Gursimran graciously consented to be written up for this blog post.

Advertisements
Explore posts in the same categories: web design

13 Comments on “My Experience With Outsourcing Web Design”


  1. Nice job, I think this is definitely a well done design. I found your 404 page humorous, and a nice touch. You are probably well aware of it, but a couple of your top-level navigation links are returning that clever 404 page: “purchasing” and “printable bingo cards”.

    Figured you might want to know asap, although I’m sure you’ll see it yourself soon enough.

  2. Stuart Says:

    I just wanted to thank you for the advice and to let you know that you don’t have to worry about keeping a photo diary of your website, that has been taken care of for you. There is a site called the “Internet Archive Wayback Machine” that seems to take periodic snapshots of the web. You can see the snapshots of your website at: http://web.archive.org/web/*/http://www.bingocardcreator.com

  3. Patrick Says:

    Thanks for the heads up! Seems I borked something on the last commit — fixing momentarily.

  4. Patrick Says:

    Stuart: unfortunately, the archive doesn’t keep track of stylesheets, which means the earlier versions of the website are totally unrecognizable.

  5. Tom Says:

    As a web developer and designer (and sysadmin and…) myself, I recently took my first step into outsourcing as well and came out with a black eye. Not only did they accept business terms (this was E-Lance) that had 4 out of 7 of their working days as days they weren’t going to work (which they failed to mention), I ended up doing most of the work myself because they didn’t have enough CSS knowledge to complete it. And they didn’t even have IE6 installed for testing!

    I gave them everything: A complete Photoshop file with the entire design, written specs of how different elements should behave, etc. I pointed out every single issue in the in-progress design. Heck, I even told them how to do stuff when they couldn’t figure it out.

    It was supposed to be a simple WordPress template that I could have done myself, but I wanted to get some other things done. Instead, I ended up using almost nothing from their unfinished work and still had to pay for 2/3 of the project just to get the code. Here’s the biggest lesson I learned from this:

    If you’re outsourcing a technical job you could do yourself, it’s not a very good idea to pick a person/firm who is willing to do it for less than you would charge.

  6. Duncan Says:

    I like the new design, but what I’d like to know is what is your aim with it?

    Your old design seemed to come in for some criticism, but it worked and with a reasonable conversion rate. i.e it was fit for its purpose which was to sell Bingo Cards.

    Are you hoping to significantly improve your download/conversion rate?

    BTW. This would make a good blog post. The point at which the time spent improving and tweaking a site/product could be more productively spent on developing product number two.

  7. Patrick Says:

    That could indeed make a new blog post. Here is the short version: the major change this weekend wasn’t the design — that was just a “target of opportunity” since I was already overhauling the website. (The design was *much* uglier in terms of HTML than it looked on the screen, incidentally, to the point where it was making programming improvements a chore.)

    The overhaul consolidated the Daily Bingo Cards site into the BCC site, and laid the groundwork for future changes in presenting my content to visitors and driving them up the value chain (from viewing site to downloading cards to downloading trial to giving me money). I am hoping those changes result in about doubling my sales by the end of this school term. Not bad for about 30 hours worth of work (counting the time it took to make the DBC site in the first place).

    I don’t have current plans to launch a new app simply because it would require sustained focus from me and the day job is precluding that at the moment.

  8. Alex Says:

    Hey Patrick, have you ever checked out 99designs (http://99designs.com/); it used to be http://contests.sitepoint.com? I haven’t used it yet, but I’m considering doing it over something like eLance. It looks quite promising. I’m curious to know your thoughts on it.

  9. Paul Young Says:

    Hi Patrick,

    Thanks for the mention. Good to hear you’re enjoying Stylizer!

  10. Stormy Says:

    Hi Patrick, I’ve been following your success online on some other blogs and have appreciatred your input as an mISV over the last year. So up front…thanks for all your valuable contributions. It’s helped me with my business, too.

    I have a quick point on your web site redesign experience.

    I graduated from an art school here in the US. Done all types of art and web projects from murals in Hollywood, to corporate logos, to wine lables and antique designs and signs, to now web design and development. Ive done allot of website designs for corporate clients over the years and familiar with CSS and all that Web Standards “stuff”. Ive since moved on and now software engineer. I still do web design when I have to, but my focus is on the biz web application tier now. Anyway, Ive done my share of site designs, and have some perspective. Basically its this…..you get what you pay for! And, unfortunately, I think you got what you paid for, which sadly, isnt that great.

    I think the site design and CSS is “ok” and Im sure your very happy with what you got as far as what youn tried to achieve. But to me, to pay someone so little for a site design that took almost two weeks, and turned out so mediocre, (not good or great, to be honest) says something about offshoring or outsourcing work like this. Im not against your site architecture….I think, like your information on mISV’s, its stellar and second to none! But the site design leaves me stuck wanting more for you. It seems its is very “1990’s” when we all used to use those clunky bevelled buttons and giant tabs. The greens make me think “green peas” or of my kids sippy cup colors (bullfrog green!)….not something harmonious or elegant and even integrated with your brand or “corporate colors”. To place those designs and colors next to your logo colors is a little strange. Maybe those were your choices, but even then, a good web designer should be able to offer to a web palette of choices that match those colors.

    So, not to be harsh, but I think this is a great case in point about offshoring these types of tasks. You get what you pay for. And what you got was not that great. I think if you look at allot of the really nice web site designs online you will find allot of dollars were spent to hire really talented, trained artists, designs, and developers….people university trained and experienced…and whats more, people who CARE about you, your company and its customer-base online. I dont think you really got that and to be honest, didnt even get $100 worth of work. Maybe you can say “hey, I aint got that kind of money”. But then you have to ask yourself, how much do you value your business proposition to others, your business’s success, and IT in general? Thats like saying, anyone in India can build a Bingo Card Creator just like yours and with a site designed like yours. Maybe you have the edge in SEO, but hey man, you are seriously selling yourself short then.

    Sorry if thats a bit harsh. I just hope this makes the case out there that you get what you pay for in terms of IT and web designs and offshoring. If you outsource or offshore IT to people who dont know you, whom you never see, and whom dont really care about your business, or you, or your business, you will get a product that reflects that, unfortunately. IT and IT quality in web design is not a commodity you can outsource, especially when its your company brand and your product selling point thats at stake. In other words, if everyone did what you did, what would make me choose your product from someone else with the same exact product, and website design, and brand?

    My point is that online, the Web is huge….and the ONLY thing left any company has to differentiate itself from others (other than SEO) is quality of the product and the hard work of talented people that built it, designed it, and whose design quality supports that brand. In other words, if we all lower ourselves to the “cheapest” solution in IT rather than the talent, you get what you pay for.

    In the end, your company brand looks like it was created somewhere else, and there is nothing truly differentiating your company and its product from any other company or product overseas. I hope that makes sense. Like I said, Im a big fan of your work Patrick. Im just sad as an experienced designer and developer to see someone who seems to care so much about their products, take two steps back when it comes to their site.

    My recommendation…consider spending a little money, and hiring someone locally, where you live, who knows about web design, to come work with you on your site and brand. Pay a little more, but I bet you’ll get allot better experience. Having someone you know, who halfway cares about your goals, and can come meet with you face to face, and who has been trained in web design, you will get a much better web site design.

  11. Lianne Says:

    Hi there,

    I’m from CBC radio.
    I was wondering if you’d be willing to do an interview for the pop culture show DNTO. Our show is all about outsourcing. I was thinking you could talk about all the work that is involved with outsourcing work – something some may perceive as an easy task.
    Let me know!

    Thanks


  12. […] heartened by Patrick McKenzie’s experiences with eLance (and from there have opened a dialog with Gursimran) and the final design of […]

  13. Ian Ozsvald Says:

    Hi Patrick. I’ve just blogged a review of eLance since I too worked with Gursimran. I chose to invite her to bid based on your article here, I figure that my write-up might help others to test eLance too.
    Thanks for the post, it definitely tipped me towards using eLance – cheers!
    Ian.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: