How We Calculate the Cost of Building Your Project at Apptension

In order to calculate any website’s cost, software developers need to translate the idea into technology. And I don’t mean a rough idea behind your project, I mean a detailed list of user stories. If you already have your website’s user stories listed, just include them in your brief. Otherwise, you can team up with your potential tech partner and use their expertise during kick-off workshops in order to come up with such a list.

In this post I’ll walk you through the process of calculating the cost of web development we use at Apptension. What follows is a glimpse into what we take into account when it comes to design, frontend and backend development, QA, and DevOps.

1. Sprint Zero

The idea behind the kick-off workshops we usually conduct with our clients is to use Google’s Design Sprint’s principles to find out how your ideas can be translated into a viable product. After the workshops, you and the team should be able to come up with user stories and make assumptions about your project you can then test.

Depending on the project, workshops can last from one to five days. During this time you, your tech partner and other stakeholders (if required) will try to understand the project, discuss different assumptions and make hypotheses, sketch storyboards, prototype and discuss the outcome.

Usually, our team attending the workshops consists of a technical lead, a PM, a QA specialist and a UI/UX designer. You would be charged hourly for each team member’s work.

2. Design

2.1. Prototyping and testing

Based on user stories, designers will first prototype the experience. At this stage they will produce wireframes, user flow diagrams and interactive mockups.

User flow diagrams help to ensure that defined use-cases match business objectives and project goals. Wireframes and clickable mockups created in e.g. InVision or Axure serve as prototypes, used by design team to share and test ideas with technical experts.

As a result, the design team produces a layout of a website or an app that fits project requirement and use cases.

2.2. Visual design

The next step is visual design. Here’s when designers turn accepted wireframes into actual screen views with assets ready to be implemented by developers.

Based on sketches and wireframes, the design team creates animations, illustrations, graphics and icons that match the defined specs, screen sizes, theme and style of your website or an app.

What impacts the design cost

Prototyping deliverables:

  • wireframes
  • user flow diagrams
  • interactive mockups
Design deliverables:

  • screen views
  • animations

3. Frontend development

3.1. Variety of devices and browsers

One of the factors developers will base their estimates on is the number and type of devices your project will have to support, including:

  • Mobile and desktop

In our mobile-first era, even if you’re building a website, you need to take mobile devices into account. For simpler websites Responsive Web Design will suffice. The RWD is an approach which uses components that change their size and grid in order to fit different screens without compromising the content’s readability.

But if you aim for a more complex web app targeted at mobile devices, the solution may be to create a Progressive Web App. PWAs are lightweight, although feature-rich web apps, which feel like native apps, without the need of downloading and installing it on user’s mobile device.

For best mobile experience, we can suggest creating a native mobile app. Native apps have static content installed on a device, and can access device’s advanced features. With React Native we can develop an app that runs of both iOS and Android, which spares you time and money needed to build two separate apps for both systems.

  • Legacy browsers

Ideally, every user should have an updated version of a browser they use, be it on desktop or mobile. Unfortunately, frontend developers have to deal with all kind of browsers and their versions, striving to offer the same experience on any of them.

Knowing your target audience, discuss with your tech partner which browsers you want to support, so frontend developers can focus on them, while implementing your website.

3.2. Website’s complexity

Complexity of the interface is a huge factor. The UI may consist of rich animations using Three.js/WebGL, a number of images and videos, forms to fill in, downloadable assets. They will usually impose the use of 3rd party integrations, JavaScript libraries, style sheets and content delivery network.

3.3. 3rd party integrations

While developing a web application, there might be functionalities that will require 3rd party integrations to be built, like:

  • Email integrations: Mailchimp
  • Social media or email sign ups: Facebook, Twitter, Gmail
  • Maps: Google Maps
  • Payments: PayPal, Stripe, WePay

Plus, there are sometimes cases when integrations are not as straightforward and require frontend developers to make adjustments in the code or create bridges between external services’ code and your website’s.

3.4. Tech used in a project

Software development companies usually have a chosen tech stack, they are experienced in. If you know a tech stack for your project already, try to find a company that excels at it. If not, let the vendor suggest the stack they know and are confident that it’s a good fit for your project.

When it comes to frontend development, our tech stack consists of:

  • Languages: JavaScript
  • Frameworks: React, Angular, Node.js
  • Libraries: Redux, D3.js, three.js, PixiJS, Babel

The cost of any paid libraries, tools, fonts or APIs required to deliver your project are usually included in your project’s cost estimate.

3.5. Website’s performance

Websites consist of different components that may impair performance. Rich animations, videos, or visuals rendered in real-time may require more background calculations, slowing the website down.

To avoid underperformance, we may use Server-Side Rendering or Client-Side Rendering to load components quickly:

  • Server-Side Rendering: in Single Page Applications (SPAs) it’s possible to use languages like React to take content normally rendered on the client side, render it on the server and then send it back to the user, cutting down loading time and improving the experience.
  • Client-Side Rendering: a solution based on rendering the content in the browser using JavaScript. Although it’s a quick way to load the content, it will require a good internet connection to match the SSR experience.

Depending on the number of possible performance issues to optimize for, it will take frontend developers more time to develop you project, which in turn will higher the cost.

What impacts the cost of frontend development

  • Supported devices and browsers
  • Complexity of the UI
  • Interactions with the UI
  • 3rd party integrations
  • Tech used in the project
  • Website’s performance

4. Backend development

4.1. Choosing a tech stack

This way they get to know better programming languages, frameworks and tools they use, so they get more experienced in them. Languages we use at Apptension are Python and PHP. We create APIs using Django REST Framework. The latter has proven to work and applies to rapid application development.

Backend developers will also investigate if there are any available applications that may help reduce the time and cost of delivering your project. This includes tools or services like Amazon Web Services or Google Cloud solutions. Choosing them will eventually speed up the development, resulting in lower overall cost of your project.

4.2. Security

Web security is rightly the big issue today. With a number of data being stored by websites, it’s crucial to implement the best standards of securing it. Compromising your users’ trust may, eventually, sink your business, as this trust is really hard to rebuild once lost.

Depending on the data you need to secure and the chosen methods to do so, it will cost you more to implement a website that meets modern security standards.

Common security steps while building a website include:

  • SSL (Secure Socket Layers) certificate: allows secure connections between server and a browser.
  • Auth0: authentication and authorization as a service.

The SSL certificate cost may vary depending on the options you choose and your hosting provider, and you pay for it independently. The Auth0 pricing depends on monthly active users visiting your website (starting from $13/month for 1000 users) and you will also have to pay it separately.

4.3. Database integrations

Depending on the data types you will have to use, and the number of data sources, developers will have to integrate them with your website in order to provide users with a unified view.

For different kinds of data, different databases have to be chosen, too. For example, at Apptension we often use Redis (in-memory key-value structure store) and PostgreSQL (an object-relational database management system).

When it comes to website development cost estimate, database integrations will be billed by hourly rate of developers assigned to that task. Additionally, you may have to budget for any database-as-a-service solutions (e.g. AWS cost per the number of data).

4.4. Setting architecture

Backend architecture defines how servers, databases and routings are organized to streamline requests and responses to the client side.

To set up an architecture for your project, backend developers have to identify possible bottlenecks. These bottlenecks can happen if the load needed to return a page growths with a number of concurrent users on the website, which is often the case with websites supporting big marketing campaigns or events, or ecommerce websites during big sales. To optimize the backend performance for your project, our developers may e.g. optimize SQL queries or transfer “heavy” queries to the background.

Performance optimization reduces the website’s or the app’s maintenance cost in the future. As we usually advice choosing SaaS solutions for handling requests, reducing the bottlenecks cuts the subscription price you will need to cover.

What impacts the cost of backend development

  • Choosing a tech stack
  • Security
  • Database integrations
  • Setting architecture

5. DevOps tasks

DevOps, which stands for software development (Dev) and information technology operations (Ops), is a methodology which aims to shorten and automate some parts of software development lifecycle.

As a role, it includes system administrator’s tasks to shorten the time needed to set up production environment and ensure reliable releases of the product.

At Apptension, we’ve come up with our own continuous delivery (CI/CD) system in order to improve how projects are being set up and deployed, drastically cutting the time needed to do so. In turn, shorter time needed for this kind of operations reduces the price included in the ballpark estimate, without compromising the quality and safety of your project.

6. Quality Assurance

To ensure that the code meets the quality standards, one or more QA specialist will be included in the project. Their role is to test the website or the app with different use cases in mind. Depending of how many QA specialist join the project, their hourly rates and estimated time are included in the cost estimate.

Putting it all together

Knowing what will have to be delivered in terms of design and development, we can calculate the cost of your project.

First, designers and developers estimate how many days it would take them to deliver each user story. Similarly, we calculate how many employees should take part in each story to complete it.

Based on the time and number of employees needed we calculate an estimated duration of the project.

Next, we add the work time of quality assurance specialists and project managers. We also add a tech lead to the project to oversee the technical aspects of the project, manage developers and ensure the project’s overall quality. Depending on the project, work time of these team members may equal 50% or 100% of the time needed for the development.

We include risks and uncertainties too, hence the contingency fee that will make up for overtime or the cost of 3rd party services (if they weren’t included upfront).

Summing it all together gives us more precise cost calculation of your project.

Ready to estimate your project with us? Let’s build an amazing project together.

We want to partner with you to build what’s best on the web and beyond. Start a project with us.

About the author

Paweł Hałabuda

Paweł Hałabuda

Content Marketing Specialist
Content Marketing Specialist at Apptension and teamdeck. Occasional journalist, avid reader and biker.

Related Articles