How Much Does a Progressive Web App Cost on Magento?

Progressive web apps are taking the world of mobile web development and applications by storm. Being fast and intuitive to use, PWAs are already rivaling native apps and are even forecasted to become their replacement.

Wishing to keep pace with the times, numerous business owners, including those in the spheres of B2C and B2B eCommerce, are investing in the development of PWAs. But how much does a progressive web app cost? Is it more expensive to develop a native one instead?In this article, we’d like to break down the Magento PWA pricing for you, explaining the steps that the process is made up of as well as the costs that each of them implies.

How Long Does It Take to Develop a PWA?

Before we jump to the numbers and the overall cost to build a web application on Magento, let’s try to figure out how much time is needed to build a progressive web application on Magento.

The most honest answer would be that it fully depends on the scale of the project and on how complex the future eCommerce website is going to be.

As a starting point, 8 to 10 months is a rough estimate that we can go by. Importantly, it should be made clear that these deadlines only apply if we assume that:

• the Magento PWA is built on the basis of an already fully-developed Magento 2 website with all the databases present and systemized (i.e., we aren’t taking into consideration the scenario when prior to PWA development there’s a need for firstly migrating the site from Magento 1 or another platform to Magento 2, we suppose that this is already done);
• the PWA will have a custom design, so the vital UX/UI stage will also be present during the PWA creation process (in other words, we won’t be tweaking a ready-made theme and will put together our own unique prototypes);
• the PWA will have standard functionality and a standard set of pages (these, for instance, include the homepage, category page, product page, checkout, “My Account” section, as well as several custom CMS pages).

Obviously, in case any of the three points mentioned above aren’t the case with your hypothetical PWA, the time frames for crafting this advanced eCommerce solution can extend greatly.

Why the PWA Development Process Isn’t Simple

1. There’s more than one approach to building a PWA

It is also worth mentioning that creating a progressive web application isn’t a piece of cake. The thing is that a PWA can be built in several ways:

• The first suggests coding the entire app on plain ReactJS (or using some other progressive frameworks, for instance, Vue.js or Angular.js) from the ground up.
• The second requires customizing out-of-the-box components of ready-made “packages” (such as creating a PWA with Magento’s PWA Studio, the official toolkit, or some other third-party themes, like the Vue Storefront or Scandi PWA).
• The third supposes combining the two above-described options.

Regardless of the path that the development team chooses for their PWA works (be it just ReactJS or the PWA Studio, a hybrid combo of them both, or even opts for other non-React frameworks and themes), there’s a lot of customization ahead in any case.

The reason for that is that as of today there’s no complete ready-to-run PWA template for the Magento commerce platform that can simply be used right out. This complicates the process of progressive web app construction using the headless commerce approach and automatically means many required development hours to make Magento headless.

2. The standards for the PWA’s UX/UI are high

Another challenge arises due to the complexity and high demands that regard the UX/UI of progressive web applications. PWAs have to have a sophisticated design, implementing only the simplest and most effective solutions so as to provide your specific audience with impeccable navigation and enhanced user experience. This is exactly why it’s best to work on your own designs and layouts rather than to play around with someone else’s templates. Here are a couple of PWA examples in eCommerce and Magento PWA examples that you can take a look at.

Explanations are always better if supported visually. So, to give you a better understanding of the UX/UI expectations for a PWA, we’d like to overview the homepage as seen on the current mobile version of the Rebecca Atwood website. We’ll present you with our own design variant that we would use for its PWA, giving comments every step of the way. We’ve broken down the page into parts and provided an explanation for each UX/UI decision we’ve made when working on the prototype.

• As you can see, we’ve first made the header area narrower to save space.
• In the block that follows, we’ve decided to add a call to action button that’ll make it more obvious for the user that the wallpaper element is clickable. To compare, when there’s more than one tagged product on a banner (multiple numbered dots that signal that the item is on sale), such a button may not be required, yet in this case, it makes sense.

• Next, because product categories are more important than the “About Us” information (“We believe in the art of making” block), we’ve swapped them around.
• Again, on the current design, the categories are placed one below the other on the homepage. This is not a rational choice, so we’ve made them smaller yet more visible. Note that a piece of the third category is seen on the right to make it more obvious that there is a slider.

• Although the “Featured Favorites” section with the top-selling products is presented as a slider on the original design, the arrows that indicate the slider function are barely visible. Our slider option is more intuitive.
• Following that, is the section showing where the brand was featured. The original design lists large logos and thus uses space very unreasonably (in more than one entire page scroll). We placed them all into one petite block instead.

• The next section that describes “Our Process” has inevident steps (1. “Experimenting”, 2. “Creation”, 3. “Sampling”) that are for some reason displayed under the main text of the first step. This can be confusing, so we decided to put them in tabs towards the top of the block, they are available via a swiper.
• Finally, separating the footer elements vividly makes it simpler for users to tap on the links, so, in our layout, we’ve split the links to make the footer more mobile-friendly.

As you might have already guessed, the points above that explain why PWA development isn’t easy and greatly influence the overall Magento web application development cost. There are many outstanding examples of PWAs, so it makes sense to strive for the best practices when it comes to your own progressive web app. If you came up with reforming your current mobile version, are stuck on the process, and need a hand in creating an app-look for your progressive app, our Magento PWA app designers are ready to assist. We'll create a solution that helps your business stand out among competitors and win the markets.

Managing Magento PWA Cost: The Milestones That Await Ahead

To be clear, there are usually 4 major steps during PWA development:

1. the planning stage,
2. UX/UI,
3. app development,
4. app release and post-release tweaks.

Below we’ll take a closer look at each of the stages, as well as give an estimate on the required man-hours. We’ll go over the corresponding costs in the section that follows.

Step 1: Planning

As we begin mapping out the future PWA, we start with analyzing competitor sites and building the buyer persona and customer portrait. This is needed to clearly understand who the clients are, their age and location, which objectives and intentions they have as they browse the site, among other key things.

Of course, there’s a pretty big chance that you’ve already conducted such research at some point previously, f.e. when you were migrating your eCommerce store to Magento 2. In this case, if you are positive that all the obtained data that was gathered is still relevant and there's no room for improvement here, you can save some time on this during the planning phase.

If you don’t have such data, then based on what was brought to light, we create the customer journey map that’ll visually line out the major touchpoints for providing a top-notch user experience. This strategic step will in much define what the future design will be like and the aims that’ll be pursued by the development team.

This is also the time when we “blueprint” the technical work to be completed and estimate the time frames to help manage the hours optimally.

Estimate hours for the planning stage (Grand total):

40-60 hoursNote:this estimate can be higher or lower depending on the complexity of the site.

Step 2: UX/UI

When everyone’s on the same page, it’s time to start carrying out the plan. The designers are the ones who get going first. They’re responsible for clearly presenting the vision of what the PWA site will be like, making the best-fit color and style choices, and putting together the prototypes of the to-be website.

What should certainly be noted here is that the work that regards UX (user experience) always goes before that related to UI (user interface). The thing is that the UX concept needs to be complete. It must include a well-thought-through strategy, based on analytical decisions and best practices. Therefore, before jumping right over to the user interface solutions, designers have to carefully do their research and cherry-pick only the top UX solutions that’ll be suitable and convenient for the site users, that’ll be capable of reaching and resonating with a broad audience. At the end of the day, such a sequence (UX prior to UI) brings more fruitful results and allows us to avoid situations when parts of the design have to be created anew after some time.

To be fair, in cases when there’s very limited time for PWA creation, and the development works need to be begun urgently, the mentioned above sequence is modified a bit. The designers first take care of UX for the three primary page types (i.e., the homepage, the category page, and the product page) and pass on the “torch” to the developers. In their turn, the developers begin their side of the work while the designers finish up with the UI part and the rest of the design.

Now let’s go over some page-specific matters to give you a better understanding of what to expect from the PWA prototypes.

a) Homepage

As a rule, the vast majority of the homepages are made up of pretty much the same elements. Most homepage designs, therefore, include the minimum set:

• header area with a top call to action stripe, site menu with key navigation points, and logo,
• navigation,
• search, 
• banner area (sometimes with a slider),
• product categories section,
• top-picks or best sellers,
• about us & SEO text area,
• customer reviews block,
• subscription block,
• socials section,
• footer area.

Average homepage design hours: 100 - 140 hours in total (40 - 55 hours for UX and 60 - 85 hours for UI)

b) Category Page

On a similar note, category pages that display products of a certain category don’t visually differ much from one eCommerce store to another either. Expect such page designs to include:

• general category,
• subcategory,
• a header area,
• breadcrumbs stripe,
• grid/list layout picker,
• various page filters and different filter states (with radio buttons, picklists, checklists, ranges, tags, etc), 
• sorting elements,
• product preview (with images, labels, product name, price, and minimal details),
• banners (for special deals, new arrivals, coupons, etc),
• auto upload (“Load more” as the user scrolls the page),
• a footer area.

Average category page design hours: 55 - 85 hours in total (30 - 45 hours for UX and 25 - 40 hours for UI)

c) Product Page

What’s for the product page, there are many possible design options. This is, perhaps, the most versatile eCommerce page type. It can range from something very simple with only a minimal element set to a complex page with lots of unique sections and even product builders for customization purposes.

So the final result of what a product page can look like really varies from one website to another. The time needed for creating the design (and especially for making it happen during the further development stage that’ll follow) will, thus, vary as well.

Mentioning those elements that’ll make it to the product page prototype for sure are:

• header area,
• breadcrumbs line,
• product gallery (sometimes with product zooms, videos, or 3D presentation),
• product overview (name, price, short details, rating, “Add to cart” button, etc),
• description and product details,
• shipping options, coupon blocks, etc,
• customer reviews,
• personalized product picks & cross-selling sections (such as “You may also like” or “Complete the look”),
• possibly a social media widget block,
• footer.

Average design hours for a simple product page: 75 - 120 hours in total (40 - 55 hours for UX and 35 - 65 hours for UI)

• Note: to compare, if the PWA will have product pages with any constructor, builder, or product customization features, then you can count on something around 130 - 180 hours in total (80 - 100 hours for UX and 50 - 80 hours for UI).

d) Cart Page

One more area that should be given the needed consideration is the shopping cart. This is where clients can see the items that they’ve selected for purchase. As a rule, the cart (or bag) has to be easily visible and accessible on the screen, plus the separate section itself must be very easy to navigate. As such, it generally includes:

• the section label in the header and on the screen in general (often the shopping bag or shopping cart icons are used with a corresponding digit, symbolizing how many things were placed in the cart),
• a clear listing of the added products,
• the preview of every product (with key data on it, mainly its price),
• simple visualization solutions for removing items,
• a grand total that summarizes the price for all the chosen items,
• a coupon/discount/promo code element,
• possible payment methods, shipping and/or return policy information,
• intuitive steps for proceeding to the checkout.

Average cart page design hours: 45 - 70 hours in total (20 - 30 hours for UX and 25 - 40 hours for UI)

e) Checkout

Consequently, the next eCommerce store page type that deserves a lot of thinking is the checkout. The major rule here is minimizing the steps and the number of obligatory fields as possible. The simpler, faster to fill out, and better organized this stage is, the likelier the customer is to finalize their purchase. Typically, a good checkout is made up of:

• just one step (sometimes several),
• fast login (especially, for returning clients),
• a to-the-point order summary with a price breakdown (product price, taxes, shipping, etc),
• clear client details fields,
• delivery method details,
• autofill or autocomplete solutions (to save time),
• payment option selection,
• elements showing that the checkout is secure (to remove all client doubts that entering their personal and payment details is safe).

Average one-step product checkout design hours that’ll result in around 100 screens: 60 - 95 hours in total (35 - 55 hours for UX and 25 - 40 hours for UI)

f) My Account

This part of the site is devoted to keeping the user’s personal details. This is the client’s personal space within the store’s environment that’s usually made up of:

• the sign-up form with fields for creating an account for first-timers (it’s usually limited to several fields or the choice to sign up via social media or Google),
• fast sign-in option (quick login for those who have already registered),
• the tab used for keeping personal information (name, address, card details, sizes, etc),
• the wishlist (with saved items that a person left for later),
• coupons area,
• order history.

Average my account area design hours: 35 - 60 hours in total (usually, design hours here don’t imply any UX, just UI)

g) CMS Pages Design

Of course, websites generally have other page types apart from those that we’ve already described. The more unique the pages are required, the longer this UX/UI block will take. At the least, expect prototypes for the:

• Contact Us page,
• Customer Service pages,
• FAQ pages,
• 404 Error page,
• Success order page,
• and some additional info pages.

Average CMS design hours: 40 - 65 hours in total (this implies 40 - 65 hours for UI since usually the UX part is skipped for these pages but in some cases may require an additional 20 - 40 hours for UX)

UX/UI Summary Total:

Based on the above, we can give some rough estimates on how much time is required for preparing all the UX\UI prototypes. Once again, the more custom solutions are needed for the PWA, the longer this process takes and directly determines the overall cost to build a web application on Magento.

It must be noted here that these estimates can be “underestimated”. We have to keep in mind that the mobile and desktop designs are created separately, thus, these frames are very agile. But on average, the design works for the site depend on the complexity of the site itself.

Estimate UX/UI hours (Grand total):

410 - 635 hoursNote: this is only an estimate, the actual numbers can vary based on the individual peculiarities of the project. For instance, the time can be greatly increased if the site has additional features such as free products, reward systems, subscriptions, and so on. That is, you can make a simple store in 410 hours and then add on additional elements after an extra assessment.

Step 3: PWA Development

When all the designs are ready, the app development stage begins. This is the one that’ll take the most time.

As mentioned earlier, creating a headless Magento progressive web application requires custom coding in any scenario. The reason for that is because there is no fully complete off-the-shelf solution available yet that you can adjust to the needs of your particular PWA and business logic.

On a positive note, if the development team has previously built PWAs, they can reuse many parts of their own custom-created code for your project. This can substantially speed up the process of building your progressive web application.

Now let’s go over the main stages during the development process.

a) Preparatory Work

Once the developers have received the prototypes, their work begins with some preparation. To make it simpler to understand what such work implies specifically, usually, at this point, developers:

• familiarize themselves with all the prototypes,
• investigate the to-be functionality that’ll be used in the PWA,
• determine which features require custom coding,
• set up the PWA Studio or work on the back frame of the future ReactJS application (depends on the path that developers decide to take in terms of PWA development: customizing a ready-made theme or coding from scratch),
• identify which Magento GraphQL parts are missing and what will need to be created in this respect.

Average preparatory work hours: 20 - 55 hours in total

b) Developing Flow-through Elements

It is more than fair to say that the sequence of further development work is practically always unique. In essence, it depends on the choices that the team makes. In any case, it is considered good practice to start by developing those elements that repeat and are identical on almost all pages of the website. The more such elements there are on the prototype, the longer this part will take. Giving examples of what some of these are:

• the header area,
• the footer area,
• the authorization area that includes login/logout and sign-in (if it’s within a pop-up, for instance).

Average hours for developing repetitive elements: 100 - 180 hours in total

c) Navigation and Search

Before stepping on to creating separate page types, the developers have to take care of those parts of the site that directly deal with the customer journey and how people will look for things when using the app (instead of the content management side). This regards:

• site navigation,
• menus,
• complex Magento search functionality.

Average hours for navigation & search development: 60 - 120 hours in total

d) Homepage

The next block of development work deals with creating the homepage in accordance with the given designs. The usual order of steps here includes setups in the backend for every component (i.e. for the sliders, widgets, etc) and then taking care of them in the frontend. This is done for every element one at a time. Once again, the more elements there are on the page design and the more complex they are, the more time-consuming this process is.

• banner area (sometimes with a slider),
• product categories section,
• top-picks or best sellers,
• about us & SEO text area,
• customer reviews block,
• subscription block,
• socials section.

Average homepage development hours: 125 - 210 hours in total

e) Category Page

The following step regards the category pages. As shortly aforementioned, this page type is among the most important ones in the eCommerce PWA. Here, the developers mostly work on:

• the product listing,
• product display,
• and filter area.

Average catalog page development hours: 85 - 185 hours in total

f) Product Page

As you might have already guessed, the product page isn’t only the most complex type in terms of design, it’s also the trickiest page in terms of development. Apart from all the elements that are used on the prototype, developers also have to work on:

• product page elements,
• product compare features,
• the wishlist,
• alert stock (based on existing Magento functionality).

Average development hours for a simple product page: 110 - 210 hours in total

g) Cart Page

Afterward, developers move on to the cart page. The cart can be taken care of prior to the category page if this element will be needed for the catalog and will be used within the product listing. Here’s what’s created alongside:

• add to cart functionality,
• mini cart,
• cart area.

Average cart page development hours: 70 - 140 hours in total

h) Checkout

Once that’s done, it’s time to move on to the product checkout. This part of the website can be organized differently, from just one page to a multi-step procedure. At its minimum, most development time here is spent on:

• the obligatory checkout fields,
• the address fields,
• secure payment methods. 

Average one-step product checkout development hours: 90 - 180 hours in total

i) My Account

The client area that keeps their personal data is another block that deserves separate attention. If the wishlist section and sign-in forms were taken care of previously, then this step goes down to:

• addresses and personal data,
• order history,
• coupons area,
• any other blocks present on the design.

Average my account development hours: 70 - 140 hours in total

j) CMS Pages

Without a doubt, creating static pages requires development time as well. Therefore, how long this step will take is based on how many unique pages and prototypes were provided. Generally, developers work on the following pages at this point:

• Contact Us page,
• Customer Service pages,
• FAQ pages,
• 404 Error page,
• Success order page,
• and some additional info pages.

Average CMS development hours: 60 - 120 hours in total

k) SEO Optimization & Analytics

Since the progressive web application has to be capable of coping with the search engine optimization requirements and standards, some development time should be left aside for SEO. This is related to:

• SEO optimization works,
• SEO Analytics setups,
• custom coding for proper metadata output.

Average development hours for SEO: 70 - 140 hours in total

Development Summary Total:

Based on what was described in the third step of PWA creation, development hours are the ones that take up the vast majority of the project’s time frames and occupy a large portion of the overall Magento mobile app price. Below we’ve crunched up the total number of hours for development.

Estimate development hours (Grand total):

860 - 1680 hoursNote: keep in mind that the provided hours are only an estimate, each project will have its own individual total. If extra features will be needed for the store (like subscriptions, reward programs, freebies, etc), the overall time can go up for developing this functionality. That said, a simple store can be put together in around 575 hours while the rest of the enhanced features may be additionally calculated during a separate assessment.

Step 4: App Launch & Post-Release Brush-ups

The fourth final step deals with making sure that the application is up and running properly. It implies fixing bugs that generally occur after release and optimizing the app’s performance. As a rule, this stage can take up about 20% of the total development hours.

Once everything is perfect, the project is finalized. Yet in case the customer wishes to make upgrades or add extra functionality, there’s always room for negotiation.

Estimate hours for the app launch & post-release works (Grand total):

140 - 320 hoursNote: once again, this estimate can go up or down, according to the specifics of the project.

So How Much Does a Magento Progressive Web App Cost?

Summing up the above, Magento PWA pricing is a very individual question. Many things need to be taken into consideration from the state of the original website to how unique the solutions for the app are required.

Furthermore, the price for PWA development on Magento will range based on the agency you chose to work with. The rates will differ based on how experienced the team is and even on their geographic location. That said, you can count on hourly rates varying from 25 to 70 USD.

To be more specific about the cost, we’ve put together a table that collects all the information on the hours required for the steps and stages that were previously described in the article. We’ve also calculated the prices, taking the mean rate into account (i.e. 40 USD per hour for design work and 50 USD per hour for development work). You can familiarize yourself with the results in the tables below.

Magento PWA Development Cost: The Numbers

Step 1: Planning

Step 2: UX/UI

Step 3: PWA Development & Step 4: App Launch & Post-Release Works

GRAND TOTAL

Magento PWA Costs: Summary

Recapping the aforestated, getting a progressive web application for your Magento eCommerce store can take a minimum of several months. The time frames will also greatly depend on the size of the team and their expertise, yet, the rough but realistic estimate here is around 8 - 10 months and up.

What is more, you should count on a minimum of 68 - 128k USD in terms of your budget. Again, these numbers are approximate and will vary from one case to another.

We hope that you’ve found this guide on Magento PWA pricing handy. And if you’re thinking of getting a PWA for your eCommerce store and need a team of pros, feel free to reach out to us for high-quality Magento PWA development services, we’d be glad to discuss the details!