MediaLabPro Logo

Comparing Quotes for a Custom Website

I have received many emails from prospective clients responding to my quotes for their projects posted on CraigsList and other job boards. In most cases, the sheer volume of responses to their post is completely overwhelming, and without much knowledge of software development, many customers have no idea how to compare quotes that may range from a few hundred dollars to many thousands of dollars for the same described work.

Many customers come to me telling me they received very low offers to build their site with WordPress.

While WordPress is very popular, and I've built hundreds of sites with WordPress, I don't find WordPress to have a very robust framework beyond blog/news sites.

When it comes to building our custom functionality, or integrating multiple plugins with each other, there are more scalable options with more robust MVC structures and APIs. MVC stands for "Model-View-Controller" and describes the way code should be arranged within the file structure of a website: a well-defined standard makes it easy to work with other developer's code - for example, to make theirs work with yours or to customize existing code.

The general complaint about WordPress is that the plugins don't work well together, and the site becomes bogged down quickly as complex features are added. In many ways, plugins are sort of just 'bolted-on' in WordPress, rather than integrated within a more specifically articulated framework.

More suitable alternatives include Drupal and Joomla - and if you really want to build something custom/advanced/expensive - consider Laravel or Ruby. Drupal and Joomla are both open-source CMS platforms, like WordPress, but with better core structures for custom functionality.

When comparing bids, you should recognize whether a developer is recommending using an off-the-shelf platform or if they are proposing a custom built solution

Obviously, off-the-shelf platforms are cheaper to use

The downsides to this approach are primarily

A) You kind of have to live with what comes 'out-of-the-box', as customizations can be costly and if done incorrectly, will make it impossible to update your system.

B) Your company's primary Intellectual Property is based on a platform than any competitor can simply purchase and deploy to replicate your system.

--> If you're looking to create something NEW in the internet or mobile market, you should NOT be using WordPress or off-the-shelf technologies.
IF you just want to test your ideas, or do not have anything unique about your product, then using off-the-shelf code is a quick, inexpensive approach to getting a product to market.

Key Factors that Influence the Cost of a Website:

  1. Features/Functionality: The more features and functionality you include in your site, the more expensive it will be to develop.
  2. Design: Custom logos/icons/images/graphics will quickly drive up the cost of a site, and are generally not necessary for initial planning and development.
  3. Size of Firm: Hiring a one-person designer/developer is generally cheaper than hiring a small company. Hiring a small company is generally cheaper than hiring an agency. Hiring a single person is very risky and generally limits the talent applied to your project.

Rough Breakdown on Website Development Cost:

For $1000 or less:

  • Try to do as much as you can by yourself - there are one-click installations of WordPress and Joomla on most hosting platforms.
    And the Support staff at hosting providers like BlueHost.com and LiquidWeb.com will help you through most of this stuff if you get stuck.
    Tons of online tutorials can guide you through the process if you're willing to take the time and learn it (it's not coding).
  • Buy a premium theme for your chosen platform and figure out how to install it or pay someone $20 to handle this task.
  • Install an auction plugin/extension and configure it to suit your needs.
  • Save your money for having someone clean up your frontpage and address any critical issues you can't resolve on your own.
  • For $1000 - 5,000:

    • Hire someone to design a WordPress or Joomla frontpage for you, install your auction platform, and make a few minor customizations to it to suit your needs
    • Focus your remaining budget on making the site look good, and marketing it to customers.

    For $5,000-50,000

    • In this range you're going to want to consider building your own plugin or component - you'll have total control over the features and functionality you build, and perhaps more importantly, your company will own proprietary Intellectual Property.
    • This is the process I recommend for anyone with a sufficient budget who wants to develop a platform they can expand and maintain at a reasonable cost. It allows us to create a platform suited to your unique business model, and bring your service to market.
    • I start these projects with full blueprints that demonstrate the functionality of the app, and then I work with my team of developers to build out the component, usually with Joomla or Drupal. I tend to prefer Joomla, since it provides a substantial framework and solid API for building most apps.
    • This is far from a VC-funded budget for building an enterprise level solution. You can easily spend $100,000s hiring developers on salary, but this is a much more cost-effective way to build your site.

    For $50,000+

    • Now you might start to consider using RubyonRails or Laravel (there are other's too, but these are currently very popular amongst popular startups).
    • You may have to scale down some of your features set, since you're gonna have to write much more of the code base yourself from scratch, and there is far less available code.
    • This approach is generally more suitable for projects with sufficient funding, proven concepts, and dedicated in-house developers.

Designing a Website: Getting Started with Concepts, Moodboards, and Scamps

Proficient website design combines a fluid user experience with color palettes and imagery selected and arranged to evoke specific emotions and visceral reactions that augment the user experience.  Therefore, it is essential to understand a client's brand and market  in order to design a website that appeals to the appropriate market demographics and is consistent with existing brand identity.  It is also equally important to understand what the client wants - which at times can run opposed to the initial intuitions of the designer.

In order to reduce the risk of heavily investing time and effort into a design part that does not suit the taste of the customer, designers often start with preliminary documentation: including Concept documents, Moodboards, and Scamps.

"So how do we get started?"

For any custom website design project, it is important to first review the client's business and identify clear online business objectives for their project, then you can start putting together your ideas for design - here are some exercises that can help get the ball rolling: 

Basic Conceptual Document

To get the design process started, start with a very basic one-page worksheet - a Word doc is fine - that asks the client to provide input on general themes related to their preferences in terms of colors, moods, feelings, and specific examples of websites they like.  Most clients will provide rather vague, seemingly useless feedback - but don't be dismayed, the examples they provide and colors they mention are enough of a starting point to make this a useful step.

Once your client completes your worksheet, schedule a followup meeting to review their notes, and use this time to review the examples they provided for sites they like, and ask questions that relate their other notes to their example sites so you can get a better sense of mood, colors, and layout preferences.

Mood Boards

A "Mood Board" is a visual document that shows images, colors palettes, text snippets, and pattern concepts that may be used as design elements within the website. Moodboards can be arranged to demonstrate template colors and design themes as well as show ideas for specific interface design elements such as menus and login boxes.

Example Moodboard:

Once you get some ideas going, your clients can on Pinterest.com to share their own design ideas.

Color Theory and Color Psychology demonstrate that certain color combinations are more 'harmonious' to viewers and that different colors can effect mood and behavior in different situations - for example, orange and blue buttons have been shown to increase conversion rates on websites where trust is an essential element to convincing the user to buy the project; while red buttons have been shown to increase conversions when users are motivated to feel a sense of urgency in their decision to buy: for example with a time-sensitive promotion or limited quantity product.

Split-testing of websites with identical layouts but different color combinations have shown that specific colors can lead to a dramatic increase in conversions - and website design that follows color theory concepts reinforce customer confidence and promote conversions.

Here's a helpful tool for picking color combinations: ColorSchemeDesigner.com

Scamps (aka. "Mockups")

"Scamps" are typically hand-drawn or manually created, crude mockups that demonstrate general design concepts, layouts, and ideas.  When designing a logo, scamps typically demonstrate several different concepts in different colors, fonts, and design variations. When designing a website, scamps are often used to layout the position of logos, menus, body text areas, calls to action, and supplemental modules.

Example Scamps for Logo Design:

These mockups can be created in Word, PowerPoint, Photoshop, or even can be hand-drawn on a piece of paper and captured with a smart phone camera - the main purpose is to provide the first rendition of getting an idea out of your head and into a format that can be shared with others.

Conclusion

Collect design input through a series of collaborative exercises to reduces the risk of creating website designs that do not fit the client's vision or market.  By using a few basic techniques, web designers can guide clients through the process of selecting appropriate color themes and designing a user interface that effectively engages their target clients with optimized 

Website Development: Why Shorter Development Iterations Will Save You Time and Money

Clients often come to us with incredibly innovative ideas that require advanced coding, custom user interfaces, UI problem solving, and extensive testing to fine tune and prepare for public launch.  These projects go through several stages of planning, designing, and blueprinting before actual coding even begins, and often the customer has a long list of 'must-have' features they want to include in the site.

However, several issues arise when defining the scope of a project, particularly when preparing an RFP (Request for Proposals) and comparing the subsequent bids:

  1. 1.Clients often create "Features Lists" that include very general descriptions of the feature they want included in their app. For example, "I want Facebook integration." This could mean anything from embedding a script that shows a user's facebook feed to allowing users to "Like" a page or even intend to mean users can use Facebook to login to the site. This leaves a wide range of interpretation in terms of what these features mean, how they will work within the site, and what resources are required to implement them.
  2. 2.Clients typically define a scope of work that goes far beyond the core functionality of their site, which extends the overall development period and requires planning for features that will likely change while the core functionality is developed. This also means that attention is diffused around many peripheral features rather than the core functionality of the project.

Both of these issues can lead to "Scope Creep" - the effect of a project's scope expanding without consideration for additional time and resources (costs), and in the worst of circumstances can cause severe delays, compatibility issues between conflicting technologies, and fallout between clients and developers.

When a prospective client approaches MediaLabPro with a new concept for a website or mobile app they want to develop, ideas for specific functionality generally fall into two categories:

  1. 1.Core Features: features and functionality that define the unique user experience provided by the app.
  2. 2.Add-ons: features that expand the app, but which are often features the client has identified within other websites and phone apps that they want to include in their app.

Core Functionality consists of the features and elements of the app that define the unique value proposition for the user - specifically, what the app does at its most basic capacity.

For example, you could sum up YouTube as a place where users can upload videos and other users can browse through videos and watch these videos.  Of course, YouTube has a TON of other features - video editor software, share and embed features, comments, subscriptions, custom channels, advertising, and so on, but the core utility of the site is the uploading, browsing, and viewing of videos.

So then Add-ons are features and elements of an app that expand the core functionality to do more than its primary purpose, such as those mentioned above.

One drawback to outsourcing software development is that there are periods of time when a customer cannot tangibly SEE the daily production of their website - as developers must write enough of the core framework for the code to be stable before anything with even limited functionality can be shown to a customer.  Most clients are not tech savvy enough to monitor a GIT account or even FTP into a server to see new files uploaded, so there is an inherent 'silent period' in which the plans for the project have been defined, and the developer has anything online for the customer to see.

In a perfect world, the developer goes into his hole and four weeks later emerges with a perfectly built website and it is exactly what the customer wanted.  Of course, in reality, the code usually has to be debugged and tweaked a little... and low and behold, after having designed their site over a month ago, the customer now has some different ideas about how they want their registration process to work (or some other feature).  In the worst case scenarios, the code that is written doesn't meet the client's expectations at all (though proper blueprinting should eliminate this possibility).

When these outcomes are applied to multiple features within a website, you can start to get a sense why experienced developers budget time and expenses for revisions and fine-tuning.

By understanding these patterns, we can reason that limiting the scope of each development phase will result in more accurate bids, shorter 'silent periods' when feedback and adjustments are suspended, and less wasted or unnecessary work.

Another effect of overloading features into early builds of a software, is that most users will focus on 1-2 functions of the software that suit their needs best and many peripheral features will go largely unused or entirely ignored.  It is far more cost-effective to simply ASK your user base what features they'd like to see added rather than go build 10 features to learn which 1-2 are actually being used.

CONCLUSION:

By reducing the scope of each development phase within a project to its core features and functionality, developers and clients can reduce miscommunication, scope creep, and wasted work throughout the development cycle therefore increasing the speed in which a working product can be released to the market.  By initially focusing on the core functionality of an app or website, website owners can then better allocate their budget in direct response to customer feedback.

LESSON:

We recommend that our clients first prepare a list of ALL the features they want to include in their site, and then work with them to break these features down into a multi-phased development roadmap, starting with creating comprehensive blueprints detailing the core functionality of their site or app.

Once we blueprint, develop, and debug the core functionality, then we recommend the client do initial BETA testing with their app and get feedback from their users before deciding which features to invest in for next phase of development.

This gives our clients time to evaluate their core platform and make more informed decisions on how to invest their development budget and ensures that our clients only pay for what they really want while allowing us to deliver solutions that meet and exceed our customers' expectations.

What Difference Does a Browser Make Anyway?

To the dismay of most tech-savvy professionals, many people in the business world are completely unaware of what browser they are using - or even that there are wide variety of browsers the one can use to surf the internet.

In fact, you can actually tell quite a bit about someone by what browser they are using: based on a person's browser of choice, you can make fairly accurate assumptions about their familiarity with Internet technology, preferred operating system, and preferred computer brands.
For example, the following generalizations can be made with some basis for reason:

BrowserProfile of User
Netscape Netscape was officially declared dead at the end of 2007. But is lives on as a Firefox-based browser used primarily by elderly folks who still use AOL to get online. You can expect any customers using 'Navigator' to take lots of care and patience as you explain the basics of the Internet to them while guiding them through their project.
Internet Explorer - "IE" Internet Explorer is today what AOL was in 1995 - the easiest way most people know how to get on the Internet. It comes with all versions of Windows and is the default browser... by default. Web users who surf with IE are generally unaware that they are using this specific browser, and it is common for them not to know which browser they use at all, "I just click the "E" button on my screen and I'm online." So for starters, you know this isn't an Apple user, and you can deduct that they know how to turn on their computer, but beyond that, you can assume that an IE user knows very little about any distinctions between browsers, and likewise, is generally not very knowledgeable about tech related issues. This client is also likely to require quite a bit of hand-holding in understanding the basic technologies behind website development.

Firefox Firefox is one of the three gold-standards of brower performance, with a robust framework that can handle lots of open tabs simultaneously and provides a wide array of plugins to expand browser performance. Firefox users are typically better adapted to using the Net and other web based technologies and are more willing to learn how to use new tools and technologies related to running their business or operating their websites. Clients who use Firefox generally pick up functionality and web marketing strategy concepts quickly and are able to internalize and adopt their business models to available technologies, making them much easier and responsive when managing their projects.
Chrome Chrome is another gold-standard browser, as a Google product, it is well integrated within the entire Googleverse - and provides many plugins to enhance usability, though arguably less customizable than Firefox. A commonly cited downside is that Chrome loads a new 'instance' of the program in your computer each time you open a new tab - so for users who like to have many tabs open at once, Chrome can bog down system performance - especially on slower computers. Still, clients using Chrome are generally web-savvy, heavy users of Google's other products, rapid adopters of technology, and often do not cross-over to Apple products.
Safari Safari was developed by Apple - so you can generally assume that anyone using it is also using a Mac, iPhone, or iPad. Users who KNOW they are using Safari are generally the 'tech-crowd' of Apple's fanbase, while users who DONT KNOW what browser they are using, comprise the legions of Apple users who can only use computers with one-button and a touch-screen - many can only use iPhone and iPads. If a Safari user does know their browser, then there's a good chance they will be somewhat knowledgeable about technology and you will be able to work with them to resolve the conflicts they experience as Mac users - if not, then they may be even more work to manage than IE users, given that Apple products are often preferred by people who are confused and challenged by PCs.
Opera Opera was originally a paid app with lots of innovative, high-performance features - clusters of techies in Eastern Europe pirated and adopted it before it was set 'free' - but by then Firefox and Chrome had already feasted on IE's thrown-away market share. This was compounded by the fact that Opera is not directly tied to any search engine (Chrome), hardware brand (Safari), or development community (Firefox). The result for Opera is that it still struggles to stay alive, and is occasionally included as a browser on mobile devices. Opera users who swear by it are typically rather high-tech loyalists who take some pride in taking the 'road less taken' - as clients they may have be quite knowledgeable about the technologies involved in creating their project, but watch out for personalities that try to dictate technology decisions based on eccentric preferences ('You MUST use PYTHON to build my entire site")
Maxthon Maxthon is a bit of a renegade project based on IE by a company in China - originally called "MyIE2" - it provided advanced features such as tabbed-browser windows, and faster performance. It is typically used by PC users who prefer it to IE, and is highly versatile and customizable. Clients who use Maxthon often have a specific reason they prefer that browser to Firefox and Chrome, and often spend a lot of time customizing their browsing experience - and their entire computer experience in general. Maxthon clients often have some basic to advanced understanding of programming and technology, and are often make for highly tech-savvy customers capable of picking up data entry and administrative configuration settings for their sites rather easily.
Any Other Browser Of course, there are many other browsers out there - and even new ones being built every year, however, anyone using a browser not listed in this table is likely very, very particular about their browsing experience. There may be some cases where computer devices come with other pre-loaded generic browser software, but other than that, clients specifically using alternative browser software may be quite challenging to manage. Asides from having to cater to site adjustments specifically for their off-brand browser, you can expect them to be highly sensitive to things like the loading time of each feature added to their site: which is not to be overlooked, but the process of testing and trading out multiple technologies to determine peak performance can be tedious and time consuming - be sure to budget accordingly.

The Value of Updating your Website

So, when we started MediaLabPro back in 2006, we first did what every website design or development company needs - we built our company website to showcase our work and give customers a way to find us on the Internet.

We created a custom design, put it up onto the Joomla CMS framework, and over time, we made minor design enhancements, added features, and kept it running...
... still, 7 years passed quickly, and before we knew it, one day when we looked at our once beautiful website, and realized it was time to bring our company's online presentation up to modern design standards

As I started drawing up the next vision of our website, I reflected over the past 7 years of work - and how much has evolved in terms of web design aesthetics and user interface tools. When we built our initial site, Javascript and HTML5 were mere embryos of what they have become, Flash was still a viable website development platform, and nobody even thought twice about what their site looked like on a mobile phone.

Additionally, in the past few years we've seen an increase in edge-to-edge designs, responsive designs, 'Flat' design and design elements like Bootstrap forms have become ubiquitous for new sites. So we felt is was long-since time for a change.

Given that it takes several weeks to plan out, design, and implement a new website - many businesses facing this issue choose instead to put it off for another year, "Hey, if it isn't broken, then don't need to spend money fixing it."

Right?

Well... unfortunately, not really.

Many business owners treat their website like a checkoff item on a 'must-do' list when setting up their business, but a large portion of these owners do not follow up on making the commitment to their web presence a key asset in their marketing plan.

If you are not actively getting new leads to your business from the Internet every week, then you are not using the Internet to market your business properly.

Just having a website is a good start - but if you're in any sort of competitive industry, the you fighting for business every time someone uses the web to find the services you offer. If a customer is evaluating your services against 10 other providers - you need your website to do ALL of the following to effectively compete for this business:

  • Appear in search engines results and social media searches.
  • Provide a professional, clean, contemporary design.
  • Present a clear value proposition for your service and clear call to action on how to engage your company.
  • Provide smooth user-flow to simplify the process of converting users to paying customers
  • Provide tracking and feedback mechanisms to allow you to continuously improve the performance of your site

Having a professionally designed, updated website ensures that the efforts you put into driving traffic TO your website will return a greater ROI for your marketing dollars.

Not surprisingly, since updating the look of MediaLabPro.com with our latest site redesign, we have realized a 40% increase in customer inquiries in the first week of launching the new site.

Professional Development and Customization for

WordPress, Joomla, Drupal, Magento & More