My Experiences as a Design Hacker. Now There’s a Name For It

coyboyI am a business owner first, and although I have been building websites since 2000 I had also been a hacker. Get a business idea, quickly build it myself, and get it in front of my market.

If I got a bit of traction and some sales I would upgrade certain parts. I had some friends that were designers and got their input. I was able to keep everything together with rubber bands and build a solid enough business.

“Some” of what I considered to be a lack of professionalism, or at least cowboy methods, I now see promoted as Minimum Viable Product (MVP) and Agile Design

Traditional Web Design Workflows and Where They Failed Me.

In 2009 I discovered Elance and thought all my problems were solved. “Designers for $10 per hour, now I can afford some real designers!” I contracted this Indian girl and approved her for 10 hours to redesign the home page of a site I was managing.

She eagerly got to work and presented me with a link to a webpage, as I went to browse the web page none of the links worked. I then realised that it wasn’t really a web page, but just one big image in a browser. This is odd I thought, “Why go through all that work of creating a mock up website in photoshop that was just going to be copied in html and css, etc?”

I then came to realise that this was the best practice design process, and I figured, “well if that’s what smarter minds than me have decided that is the best way, then who am I to argue”.

I decided to try and embrace this design process, and I must admit it had some real benefits. I was familiar with photoshop, so I was able to get the source doc off her (psd). I was able to take a much more granular look at the design than I was used to after working directly in the browser all those years.

Still not convinced it was the most efficient method duplicating it in 2 file formats; I did recognise that design process was less inhibited by the technical restrictions of html and css. Build it in Photoshop the way you wanted and worry about how you will get it to work in the browser later. I approved the psd with a few changes and she created the html version for me and delivered for a successful project.

Iterative Design is Human Nature

I then changed my mind a week later and hacked the html and css to the way I wanted it. You see it took me a week to digest and for my own internal design process to take shape. There were usability and business case issues that I wasn’t able to conceive when the design was just an image.

I lacked the conceptual thinking necessary to visualize all the elements that were necessary for this design process. It was in part my lack of design experience, but I had managed this site for a long time. And I was more familiar, and understood the business and its’ customers more than anyone.

My product knowledge came from years of working in the trenches in this business. So no matter how experienced in design any contractor was they were not going to be able to have the same insights into that business that I could.

And if I weren’t able to list all the elements needed then and there in the initial mock up stage, I’ll have to add it later into the html and css, or do the whole process again of psd -> html. Etc.

I Don’t Think it Was Because I am an Idiot

I consider myself intelligent and a good strategist. So if I wasn’t able to conceptualise what the website needed to offer it’s audience in one sitting then it’s highly likely that most business owners will have the same issue. The point is, solutions don’t come from a one-hour meeting, they take time to develop.

This is only talking about what we know. The solutions that we don’t yet know, that we need to test and record the behaviour of our users, is even larger in scope and complexity.

At the time, around 2009, I didn’t recognise this yet and just believed it was my lack of experience. And I didn’t feel I was in a position to challenge the accepted best practice.

Off the Shelf Themes vs Waterfall Custom Design.

A couple of years later we decided it was time to upscale the platform on my site GardenWare.com.au and chose the ecommerce platform Magento. I bought a premium (paid) theme and customised it to my brand. Before long the complexities of Magento made me reach out to a developer. Finding a reliable Magento developer in my price range is a whole blog post on it’s own. Suffice to say after 6 long months I finally found Arif from India that I could both afford and work with.

The process of customising the new theme was pretty disorganised and I micromanaged the whole thing without enough knowledge to do so. If I wanted to change something I would contract a freelance designer, or often a couple to do the same task. I could then pick which one I liked best (the joys of Elance pricing) and then pass to Arif and get him to implement. Despite my unstructured approach the project was a success and achieved all the goals we wanted within budget.

A More Professional Approach

It was time to re-build my other site. I had recognised how far my process was from the industry standard and thought I should try and behave a bit more like a professional. There were also a number of issues and bugs we had to overcome using the pre-built theme, and the project manager from Arif’s firm suggested I build this new site from scratch using their process which I agreed to.

As expected I was presented with some mock up images for approval, which looked fine to me. Once I approved, they said they would pass it onto their html expert to convert the image into a static html and css file. It would then be passed on to my developer Arif to integrate into the Magento Content Management System (CMS) we were using.

I was a little bit sceptical at all these steps, but soon found out that this was the industry standard “waterfall” approach. And it was the way grownups must do it.

Or was it?

I was happy enough with the end design, but it went over budget and a lot of the original design was scrapped. It had to be redone either in the browser or if more complex changes were needed, we updated the original psd and then integrated into the site.

What I found was that when I just gave Arif a quick mockup or even just explained what I wanted, he was able to integrate straight into the site without any help from the photoshop or the html expert cutting the process down by half.

I was starting to think these industry best practices were great. Great at creating more jobs for agencies and larger bills for clients. It was then I started to research and find a lot of information on “agile design process” and of course read “The Lean Startup”

When I started my own agency, I decided to make it my mission to create a design process that was organised and professional in approach. But also reduce the waste I saw in the “waterfall method”.

I wanted to create a design process that was more in tune with human nature and embraced the iterative and constant improvement nature in humans. A design process that made allowances for business owners not being able to conceptualise the entire process in the first round of revisions.

You can see this in a case study on how we carried this out in practice http://www.nickj.co/redesign-iotagarden/

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: