Secret: The Best Process for Building Great Websites

  • By: Renato D.
  • Jul 30, 2015
  • 0
Share

Why some websites are successful projects and others are not? The key to success is in the process.

I have come across all sort of scenarios and projects over the last 5 years, including unfinished projects which ended up landing on my desk with a ‘rescue me please’ noticed attached to it.

Impressively enough, some of these websites were developed with absolutely no process and planning in place. The result we all know: wrong platform selected, missing crucial functionality, wrong user navigation flow, unfriendly interface, longer than normal development time. All of these can frustrate the client, cause delays and ramp up cost.

Having the right process for building websites and proper planning is the most important stage of any project. If you have the right planning, you are more than half way there.

We have overtime perfected and continuously improved our web development process. The process is a proven success, with Light Media being one of the highest rated web development companies in Australia. In addition, it has resulted in many successful client’s stories, some of them making millions of dollars per year using the websites we developed.

On this post, I would like to share an insight of our process in the hope to increase the success rate of website projects in Australia. Feel free to adapt to your business’ needs.

Before we get on to the process, I would like to approach 2 other common misconceptions about building a website:

Misconception 1: You can hire someone internally to do the work.
It sounds reasonable, but it is actually more complex than it sounds. To build a website, specially the ones with complex functionality, you need several different skills sets. Rarely you will find one web designer which is competent at all skills required: design, front-end development, back-end development, database structuring, API, server management, user experience (UX), project managing to list a few.

Misconception 2: You can hire separated graphic designer and web developer.
If you have significant experience in the industry you may follow this path. Otherwise, the result is a disconnection between what was designed and the technical requirements. Or even design that looks good but doesn’t integrate well with the code.

Without further due, here is the process overview:

The Best Process for Building Websites

1. Consulting

Understand the clients’ requirements. Listen, listen and listen, then ask questions, lots of questions. If you understand what the client is trying to achieve, you will be able to find the best solution.

In addition to the project technical understanding, these are a few important questions to ask:

  • What is your budget?
  • Is the business operational?
  • What are you not happy with your current website?
  • What are the new website objectives?
  • Do you have a marketing plan? How does the website fits into it?
  • Will the application have mobile apps connect to it?
  • What’s the current (or expected) monthly traffic?
  • Ask any relevant questions to give you full understanding of the project and the client’s business.

Note: we always recommend using the Agile web development methodology. Perhaps we can cover this on another topic specific to that. If you would like to go further in-depth on this topic, you can start by reading the great book ‘Getting Real’ by the founders on BaseCamp and many other successful websites/platforms/systems for the web.

1-consulting-dog-on-the-phone

2. Technical Solution

Once you have all the information from the client, you can present the possible solution.

Keep in mind: there is not one solution. Present the options with their respective advantages and disadvantages. Be transparent in which option you think is the best one and point out why. The client will ultimately make the final decision.

At Light Media, my solution option will come with the following aspects to back it up:

  • Website longevity
  • Flexibility to accommodate new features
  • Scalability
  • Minimize costs
  • Increase efficiency
  • Reduce risk
  • Open source always !

Note: Keep in simple and focus on the minimal viable product (MVP). Don’t try to built all at once. Don’t try to outdo your competitors on the number of functions. What might seem to be an indispensable functionality can well end up being a totally dispensable. Start with the core idea, prove it and built around it. 

2-solution-motorbike-cow

3. Requirement Gathering and Wireframe

Once you understand the client’s requirements and have a solution path, it is time to get down to the low level details of the website: Wireframing.

Starting a project without wireframe is like building a house without a floor plan: you will not know what the bedroom size will be until the house is completed ! It is risky to build a house without one.

The wireframe will organise all requirements into a visual prototype and provide the website flow. Moreover, it will serve as the base for the design and development stages. It will also give you a tangible product to align the expectations of the work to be conducted.

During the wireframes creation, consult and advice the client on the functionalities that could possibly blow out the budget and/or create problems in the future. At Light Media, we come from a business background, hence we are a web development firm with a strategic point of differentiation. Put yourself in the client’s shoes and look at the business as a whole and the impact the website can have in it.

The objective of the wireframing is:

  • Prototype the website
  • Collect detailed requirements
  • Map out all the functionality required screen by screen
  • Keep a record of the specifications for future reference
  • Present a proposal to the client with a cost associated with the wireframe created
  • Align the expectations

Note: the outcome of the wireframe stage may well impact the solution initial thought to be the best. Don’t be afraid, adapt and move on. 

3-wireframing

4. Design

Now the creative team will come into the project. They will brief the client about the website look and feel, research the industry and competitors and come up with the create aspect of the project. The designs of every page as per wire frame should be provided to the client for approval.

The aim is:

  • Create a design that speaks with the target audience
  • It is easy and intuitive to use
  • Incorporate the design into the wireframe

Note: good design means looking attractive but also, and as important, using processes and approaches that are familiar to the user. It is all about user-ability. Can a layman user understand the website flow and navigate without instructions?

4-design

5. Development

Once the wireframe is ready and the graphic design approved, it is time to start the web development. This is the engine that will make the design connect to the functionality and database. There is a huge amount of resources on this topic such as languages, platforms and databases that can be used. To discuss the merit of each option will deserve a post (or maybe a few) dedicated to it.

Note: If you have followed the steps indicated in this article it will be clear by now what is the best platform and approach to use. Don’t be afraid to consult your peers. Ask around, evaluate your options.

5-development

6. Test (and re-test)

Once the development is completed, make sure you test, test and re-test. The test results should provide you with a list of bugs to be fixed and areas of improvement. It is also important that the client perform their own testing. Lastly, soft-launch it to a designated group of users. Their feedback will be very important for the final tweaking before the ‘official’ launch. Avoid building new functions during this stage. Focus on polishing the work done and getting ready for launch.

In summary, skipping the stages consulting, solution and prototyping will leave you hanging empty when it comes to making the most critical decision about the website development project: how the website will look and function and how the many present and future aspects may impact the website.

6-cat-testing-website

About the Writer:
Renato Dayan is the CTO at Light Media and Tech Enthusiast.

Comments are closed.