Start up in 7 days series:

Even without knowledge of how a website works, you can manage the construction of one.  All you need is three key elements: your mood board, an understanding of the data and a user experience map.

Scope

The first thing was to understand the scope or context of the problem.  Using crude stick figures in my notebook I scribbled down the two ways users would interact with AutoCarLog and made note of the blocks which were outside of my control.

User > website > database

User > mobile > SMS gateway > database (subject for Saturday’s Blog)

In order to maximize my efficiency I needed to understand the relationships between each block.  These are; the user interaction with the website (user experience) and the website interaction with the database (database design).

If you’re going to hire someone to do your development, a good understanding of these two elements will mean you can save time (and money) by giving them a head start.

Keep it simple

Before getting stuck into some design, I took a step back and asked if I could build the service I wanted using (and perhaps modifying) an off-the-shelf-product.  For AutoCarLog? No. There were too many unique features which would mean that it would take longer to modify an existing system then it would to develop a new one, however that’s not always the case.

Take a look at your context diagram.  If you only have three elements “user > website > database”, then chances are you can use an off-the-shelf product.

There are many template-able free products you could use such as wordpress and Drupal.  Have a look at these, and the available plugins before you dive into building your own, no point in re-inventing the wheel!

User Experience

User design interface

Drawing my user experience

The user experience is something I value highly in every product and service I produce.  One of my products must be intuitive and simple yet offer all the information my customers could ever want.  A good user experience reaches deeper than pretty graphics (which I haven’t even considered yet) and should be done first.

I used a mind map, with the user in the center and explored all the ways I wanted them to interact with the website.  They needed to signup a new account, add new trips to their logbook, manage their account and view and download their completed logbook at the end of the year.

From the mind map, I wrote down a series of network diagrams explaining how a user would fullfill a particular function.  All up I had about 30 of these, here’s the one to add a new mobile number to their account:

Login > click on senders > enter new mobile number > click save

Data in data out

Almost every dynamic website you come across has a database behind the scenes. Twitter, Facebook, eBay, my blog, even Anthill Online has a database driving the content and Google takes it to the extreme with over 1 million database servers.

If you’re going to use someone else to do your code, having a basic understanding will help you discuss the development with them, particularly if you use an online development source.

At the bottom is a photo of the page I used to design the AutoCarLog database.  The blue shows the initial concept, the red is the actual database I created.  From that initial concept I was able to explore the relationships between the data and ultimately build the database.

Language

I’m using Apache, PHP, MySQL for AutoCarLog as I’ve used it extensively in the past and it’s free.  I can also use my existing code modules used in other websites for the common functions (like logging in).

This triad of open source offerings work very well together and are well supported by a massive community with plenty of examples of code online.  There is very little you can’t do with them.

Choosing this combination is also slightly cheaper than some alternatives as the hosting cost won’t be as high (it uses Linux) and there are more developers available – you don’t need to understand the language to take advantage of that fact!

Outsource

AutoCarLog mood board

AutoCarLog mood board

I now had everything I needed to build my site myself or to get someone to do it for me.  For AutoCarLog I had the skills to do the development myself, but that’s not always the case.  So where to find that someone?

If you have the budget, consider a local business.  There are a lot of them around, so it pays to do your research to get a good quote.  Give them your three key elements so they can give you an accurate estimate.

A more hands on (and cheaper) approach is to use an online marketplace such as guru or elance.  Here you publish your requirements and budget and others bid for your work.  Be aware, you need to rule your new employee with an iron fist to ensure you get want you want on time, but in most cases it’s cheap and it’s quick.

Lastly, the thing you need to remember when outsourcing a site is that there are two components to the it: the functional guts and the pretty graphics.  (This blog so far has only considered the functional guts.) So if you’re hiring an individual consider their specialty may be biased towards the functional guts (developer) or the pretty graphics (graphic designer).  Make sure you enquire as to their skills in both areas.

Give it a go

Web development isn’t as daunting as you might think.  There are heaps of tutorials and examples to follow and if you’re a naturally structured person who likes writing things down in lists, then you should be able to pick up code.

I taught myself everything I know about web development by following online guides and just giving things ago.  After just two months I had a basic contact management tool (which I still use).  After just two years I had built an enterprise application driving a business with 30 staff that I sold to my largest competitor, as it was superior to what they had been using for years!

But for me, I’ll do the pretty tomorrow, now on to the functional guts!

Database Design

Designing the database

Filed under:   7 day startup   autocarlog   challenge   start up