DISRUPTING THE AGE-OLD WEB DESIGN PROCESS


S01 | E07 | HOW TO MAKE A WEBSITE, LIKE A PRO

Paul Davenport |  8 min read

Web School Series 1 Episode 7

You may well be familiar with the age-old website design process. Perhaps you are a business owner or marketing expert that has been through the process of building a website on many occasions, or you might be a website designer or developer that lives and breathes it every day.

"MOBLE has been purposely built to remove laborious and mundane design tasks and make website design dramatically more profitable" 


One thing is certain is that the age-old web design process has been largely altered since its inception, across the lion share of website design agencies. This is because it was a process designed primarily to control the risk of a project 'blow out' and potentially spiralling project costs in the days when websites were handcrafted from scratch and took significant amounts of time to design, build, maintain and modify.

When following this age-old process, the primary goal to is "complete" the website and "go live", so that a final payment can be made to the web design agency, and the website can be launched to the web.

However, as designers, we know that these traditional methods are rapidly becoming obsolete despite still being used. We all know that a website is a living, breathing thing, and it's not complete ongoing live, it has only just begun. At MOBLE we like to say:

"A website should not be designed to go live, it should be designed for life."


You can consider your website like a child. When it "goes live", it is not "complete", it really has only just been born, with a lifetime ahead to learn and grow.

Unfortunately, the age-old website design process does not allow budget, nor flexibility for such beliefs and inherits many age-old problems that modern day technology platforms such as MOBLE have fortunately solved.

In this Episode, we first take a look at the familiar age-old web design process, before introducing MOBLE's Website Design Methodology to create websites without constraints, without risk to budget, or risk of 'blow-outs', and allow your website to be quickly modified as you grow, without fearing timely and expensive redesign costs.

Finally, we'll end the Episode by looking at how most website design agencies charge for website design, largely based on the age-old design process. We'll show you alternative business models for charging clients, both 'pre' and 'post' going live, while at the same time providing your clients with a flexible solution to grow their website, and get the most out of their website budget.


A LOOK BACK AT THE AGE-OLD WEB DESIGN PROCESS

Let's look at the age-old web design process, a process that was intentionally designed to mitigate risk, reach a completion, 'go live', and receive an agreed final payment.

Does this look familiar, and can you spot any problems with this process?

  1. Workshop
  2. Information Architecture & Site Map
  3. Wireframes
  4. Prototype
  5. User Testing (for larger websites only)
  6. Visual Design (in programs like Photoshop or Illustrator)
  7. Backend Development (for larger websites only)
  8. Frontend Development
  9. Image Sizing and Compression
  10. Content Loading
  11. Testing & QA
  12. Live

I'm sure you've already recognised, that the most obvious problem with the process above is that once your website goes live, customers will be invited to visit your website. At this moment you will start to get their feedback and learn from your website analytics. Invariably as you learn, your website is going to need to change. There is little point in designing to 'go live', when to be a success, you're going to have to continually change.

Even if you have conducted sufficient user testing, the results in a staged testing environment do not match up to real-life. As a business, you might pivot your services, add new products, or target completely new user customer segments. Therefore, your initial user-centred design testing becomes less and less relevant over time. Some might argue, perhaps rightly or wrongly depending on the particular project, this step of user-centred design testing is not even required at all for websites.



THE MOBLE DESIGN METHODOLOGY

Here we see the MOBLE Methodology. Notice that any tasks that are mundane and repetitive have been removed. This is because we have automated these over the years with the MOBLE software.

  1. Workshop (Series 01, Episode 3)
  2. Styles (Series 2)
  3. Layouts (Series 3)
  4. User Centred Design Testing (for larger websites only)
  5. Website Development (for larger websites only)
  6. Content (Series 4 & 5)
  7. Testing & QA (Series 6)
  8. Live (Series 6)

Let's have a close look:

1. The Information Architecture (IA) is part of the Workshop.
As you have now learned in Series 01, Episode 3 the MOBLE Workshops define the Site navigation quickly as a Team and in Series 01, Episode 6 how easy it is to create, swap and change menu navigation.

2. Notice there is no need to design Wireframes or Prototypes.
We've touched on this a few times already. MOBLE can flip your pages into Wireframe mode and our course they are all responsive. So there is no need to draft Wireframes offline for various screen sizes. It all happens for you in one click. Plus you've also seen how our Workshops help design Layouts with metrics, and how easy layouts can be swapped and changed as you learn.

3. We skip the photoshop phase of Visual Design and also go straight to Layout design in the Visual Editor.
We only use Photoshop, Illustrator and Sketch for creating graphics, much like the title image at the top of the page, that we made in Sketch. Otherwise, the MOBLE Visual Editor has many of the tools of Photoshop, built into the visual page editor. So much like skipping the offline wireframe design, the offline Visual Design mode for design mock-ups is also removed.

4. We don't do basic HTML coding of page layouts, this is all done automatically.
We save coding tasks to customise new Headers, Effects and animations. With less time wasted doing repetitive HTML your Frontend developers can be used for truly creative things. Just like this animation here that we coded for Dirtyfeet.

IT'S-DIRTY-WORK Created with Sketch.


5. We don't waste time sizing and optimising images
MOBLE has an inbuilt compression engine that will automatically size and optimise your website images as soon as you upload them. You can even upload images in bulk with a zip file and we'll even size those for you automatically saving you hours of cropping and optimising your images. All we ask is that you upload jpgs rather than pngs since this is important in optimising your website images for Google and ensure your pages loads as quickly as possible.

6. Ongoing Content Management
As you will learn in Series 4, MOBLE Dynamic Widgets can be used to power large volumes of content simply by tagging Pages, Images, and Files. To change the content that you Feed to your widgets you just change the Tags. When you consider that you can tag large volumes of content in bulk in our Tags manager, you can control huge portions of content from the tags manager without even having to go to the page to edit.


SUMMARY

So, there you have it. A much more streamlined process that has been designed based on the MOBLE technology. We designed MOBLE this way to deliberately save time on the boring repetitive bits so that we could have more time in a project budget for the creative tasks we love. It's nice to design software to solve problems, rather than create processes to mitigate them and we're very proud at MOBLE that we have achieved that.

It's nice to design software to solve problems, rather than create processes to mitigate them and we're very proud at MOBLE that we have achieved that.

We now see that other issues are completely removed like the age-old problem of design and developer alignment. When the old process was designed, designers could rarely code and coders often had little knowledge of design. Coders would often not see web designs until after they were approved. In such cases, particular aspects of the design had the potential to blow the budget, or worse, could not be coded at all. Designers might have to go back to the drawing board and present revised concepts to the client.

It was important to MOBLE to create as many layout versions that we could imagine and make these available in the Editor, for all to use and customise. The reality is that because the layouts inherit your styles as soon as they are dropped on to the page, then your websites are near to completion as soon as the workshop data has been absorbed and interpreted. If there are revision requests you can simply do them instantly.

Your clients can drag and drop your Layouts on to a page, then test the performance to progressively evolve towards the optimum design, specifically for their audience, eradicated the need to design fixed templates, to gain sign off and completion.

There is no need to design and user test a fixed number of page templates like a Home Page, an Internal Page, a Category List View Page and Product Detail Page. You have the freedom to just keep on creating as many layouts as you like as you learn.


HOW TO CHARGE OR PAY FOR YOUR MOBLE WEBSITE DESIGN

Whether you're a Website Designer or a Business buying a MOBLE website design via an agency, it's important to know a fair way to conduct payments in the best interest of all parties.


With the age-old website design process, the website was often paid for like this:

  • 50% in Advance
  • 25% on Design Sign Off
  • 25% on Completion and Going Live


The issue with this process is that the website designer has often finished their work and has to wait while the Business works on providing content. As we discovered in the previous Episode on Website Workshops, if a structured plan has been made for writing content the Business should be able to provide concise content for each page that it prioritises in terms of the most important content. Furthermore, with MOBLE CMS the business should not have any difficulties in copy-pasting in content to pages once it has been provided.

Therefore, it is fair and logical that a payment structure could look like this:

  • 50% in Advance
  • 25% on Layout Designs
  • 25% on Access to MOBLE CMS and approved handover


As a Designer once you provide CMS Access you should have completed the Website Styles, Navigation all of the Layouts Forms and so on so forth and conducted an approved handover from the client. In Web School Series 6 Going Live, we look in detail at the Going Live process from Quality Assurance Steps, Testing, Client Handover and Delegating the Domain. There is also a 9 step Quality Assurance Check Sheet that you can work through with your client on hand over. Once this is completed both parties can feel comfortable in transacting the final payment.

ONGOING PAYMENTS

Often with larger websites, there might be a requirement for an ongoing retainer. This might be beneficial where the client needs ongoing design and content support for services such as Copywriting, Landing Page design for marketing campaigns, ongoing SEO and Marketing Automation Management.

Often if a client is struggling to complete the final content, it might make sense for the Design Agency to offer an ongoing retainer. There is no better way to consider such a retainer than with a Marketing Automation campaign.

MARKETING AUTOMATION RETAINERS

Where Analytics tools such as Google Analytics provide website traffic data with metrics such as page visits, bounce rates, time on page etc, they cannot provide data on individual website visitors for example, what pages a person visited, how many times, what forms they completed and so forth. Data on website visitors can be incredibly powerful when trying to predict which customers are more likely ready to buy, and therefore which leads should be assigned to your sales team.

In Episode 10 of Series 1, we introduce MOBLE's 5 Steps to Growth. We highly recommend that you understand this Episode before you launch your website. We discuss how you can use your website to build a loyal customer base and keep them engaged with your services via your website. Then, in Series 10 we uncover the secrets to Marketing Automation and exactly why we believe most websites should consider growing a large segmented customer database for highly cost-effective lead generation purposes.

If you're waiting for Episode 10 to be released please contact us for further information via the form below.

I'd like to know more about Marketing Automation