BLOG

THE INNOVATORS ARENA

NextOnTop Blog

How do you use PWA to boost your business?

As the technology industry continues to invest ever more in innovative web solutions, PWAs are becoming increasingly prevalent. Today, Chrome and Opera fully support PWAs, while Firefox, Microsoft Edge and iOS are making great strides in providing greater support to PWA.

This increasing support for PWAs is powered by demands from leading brands seeking to leverage their capabilities to the full. Recently, Twitter has invested heavily in turning its main site into a responsive PWA to create a faster user experience with an enhanced interface, joining the likes of both Facebook and Pinterest who use PWAs.

Advantages of PWA

  • Reliable: Loads instantly and never shows a website to be down, even under unpredictable network conditions.
  • Fast: Response easily to user interactions, with silky smooth animations and without janky scrolling
  • Engaging: Feels like a normal app, with intuitive user experience.

How are Brands using PWAs to connect with users?

The ease of access, cross-browser compatibility and faster page load times enable businesses to create a higher-level user experience that will impress and get customers hooked.

1. Native-like appeal

PWAs have a flexible and consistent interface across all apps. It loads like a normal website but has many advanced features of the native mobile app, including the ability to attach one touch to computer home screens, work offline, and allow for push notifications. These also offer website advantages, such as discoverability of search engines and the ability to be accessible from all modern web browsers. Furthermore, PWAs can also appear alongside native mobile apps in the App Store and Google Play.


2. Rising consumer Expectations

Customers have low exposure of products with limited digital experience. With plenty of options at their fingertips, when they have an underwhelming experience, customers can quickly move on to another brand. When they launched their PWAs Pinterest and Starbucks both saw a noticeable increase in interaction metrics.

3. Reduced resources and expense through streamlined coding

PWAs need only one code base to provide website and mobile app-like experience across devices and browsers, which implies that it requires only one team, one software platform, one test approach, and one digital product roadmap to plan , design, create, and manage both a website and a mobile app-like experience. PWAs not only minimize product design , development, and maintenance costs, they also save money for companies by allowing new products and bug fixes to be implemented more quickly.

4. Adaptive

Innovative brands understand that technology is evolving at an exponential pace, and they need to adopt more forward-looking innovations to prevent rapid strategic, design , manufacture, and digital innovation re-construction cycles. Progressive Web Apps are essentially scalable and continually evolving to suit the latest changes to features. If you rewrite a legacy website or native mobile app as a PWA today, it will work as expected for years to come. PWAs are planned for transformation, ensuring that businesses do not invest in one-off websites and mobile applications that ultimately require redesigns to meet changing consumer demands and technologies.

Some of the Big Brands use PWA right

 Forbes - 43% increase in session and 100% increase in engagement
 Flipkart - 40% higher re-engagement rate and 70% higher conversion rate 
 Twitter - 20% decline in bounce rate and 65% increase in page per session


Few other Big Brands like Alibaba, Tinder, MakemyTrip, Bookmyshow are using PWA to increase their business 


If you’re looking for development help, we’d be happy to have a word with you!

Naveen
Product Manager
NextOnTop Blog

Best NodeJS Frameworks for developers

The use of web applications has increased. Developers are looking for a platform that is both advanced and provides flexibility to develop a variety of web applications. NodeJS is a good option to go with

NodeJs Framework is open-source and also a cross-platform for JavaScript runtime. These characteristics are inspiring a lot of developers to choose this framework.

1. ExpressJS


Express. Js is the number one option for many developers. It is one of the most well-known Node. Js frameworks. Express. Js has a reputation for speed, flexibility and minimalism. It is accompanied by a set of functions that is adjustable, fast, and dynamic. It is suitable for both Web and Mobile application development.


2. SailsJS

Sails. Js is a popular MVC micro-framework, offering many similar features to Express. Js. Most developers claim however that Sails. Js has more potential. Sails. Js compatibility makes this framework an ideal candidate for many browser-based applications. Sails. Js has never been this easier to develop real-time chat applications, multiplayer games, and dashboards.

3. NestJS

NestJs is a Node. Js system that uses cumulative JavaScript to primarily target the creation of progressive server-side applications. NestJs uses TypeScript as a primary programming language. TypeScript is a special JavaScript superset which offers a special advantage over other frameworks.

4. HapiJS

It is a more commercially oriented system. It can help build REST (Representational State Transfer) APIs with its open-source platform like other mobile apps. Hapi.js has the key advantage of allowing users to create potential static websites using MySQL and MongoDB.

5. Meteor.Js

Meteor. Js is one of the cornerstones of NodeJs Frameworks. Many say that without Meteor. Js the NodeJs frameworks list won't be complete. Meteor. Js is a full-stack Node.js framework that lets users build applications in real-time. Meteor. Js is used to create JavaScript applications for both mobile and web applications.

If you’re looking for development help,
we’d be happy to have a word with you!

Naveen
Project Manager
NextOnTop Blog

Drafting a Good Project Brief

You have an idea that you want to develop and you’re convinced that hiring an outsourced team is the best way to move forward. You spent hours researching about the best agencies to work with and shortlist a bunch of them. Now you need to finalize the one that will turn your idea into a reality. The next thing you need to do is create a solid project brief and share it with all the shortlisted agencies, to kick off discussions.

In short, a project brief is a document summary of your idea. It contains the ‘hows’ of your project, and could also include the ‘whys’. The best way to imaging a project brief, is a document that is read by a complete stranger and she understanding, in entirety, what is it that you’re looking to build. There are certain other things that you need to add, for example, things like timelines and budget constraints to complete it. Software agencies will use your project brief as a basis of scoping out the work and estimating timelines, manpower/skills required, costs associated with the project amongst other things. Hence, writing a comprehensive project brief can save you a lot of time and make the process generally smoother.

 

Components of a Project Brief

Start a project brief with a basic introduction of the idea along with the end goals. You can also include the type of audience your application will target, marketing strategies you have in mind and whatever you feel would help the agencies deliver.

A good project brief must include the following components: 

  • Scope of work
  • The scope of work contains what you’re looking to build. Depending on how deeply you’ve thought through the project, your scope of work could be defined with the exact functionality and user flow. For example, if you already have an application developed and are looking to add a few features on top of it – your scope of work would be extremely well defined. 

    Or you could have a more loosely defined features if you’re still exploring and are looking for inputs from the software agency. For example, you’re looking to build a mobile application that promotes loyalty amongst restaurant patrons.

  • Budget
  • While it’s difficult for clients to ascertain a certain number to the project, it always helps an agency when an upper cap if defined. Defining a budget within the project brief also helps agencies create a customized solution, that’ll get the work done and fit within your budget.

  • Timelines
  • This section communicates how fast you’re looking to hit the market and the kind of urgency the agency will have to work with. Setting a soft deadline, ‘we’re looking to launch the first version of the product within six months’, creates a positive pressure and can help agencies figure how to best allocate resources.


The scope of a project, timelines and budget are highly interdependent. The more defined the scope of the project is, the easier it is to estimate timelines and budget. If you’re looking to expedite development, costs might go up. Complex projects generally need to keep the timelines and budget flexible, otherwise the quality might be compromised.

Depending on which stage your project is and the level of flexibility you’re open to, the project brief might vary from a single paragraph to a detailed multi-page document. 

Exploratory Project Briefs

If your project is still in the ideation phase, and you’re exploring the technologies, features, growth tactics etc – you’ll most probably be working with what we call an ‘Exploratory Brief’. These briefs are rather loosely defined without most of (or any) specifics.

An example:

Summary: We’re looking to build a mobile application that’ll help foster loyalty amongst diners. Think of it as a loyalty card, but brand independent and on mobile.

Application Flow

Users (diners) should be able to:

  • Click pictures when they are at a partner restaurant.
  • Share it on social media platforms.
  • Earn points on each share.
  • Redeem points in partner restaurants.

Partner restaurants should be able to:

  • View and respond to users who have shared images
  • Provide discounts on offers based on points collected

Devices:

  • Devices will be decided as per the markets targeted.

This project brief barely touches upon what the app should be able to do. There’s no mention of the specifics, the platforms it will be developed for, technologies to be used etc.

It’s essential to attach a budget to exploratory projects. As the scope is loosely defined, the agencies could go on and add a lot of features, fancy technologies, high end systems that would really shoot up the prices. Keeping a budget defined helps them define and work within that budget.

Estimation Project Briefs

These project briefs have a clearly defined scope of work. They are used to get an idea of the cost and timelines from different agencies.

Example:

Summary: We’re looking to build a mobile application that’ll help foster loyalty amongst diners. Think of it as a loyalty card, but brand independent and on mobile.

User Definition:

There are two types of users on the application:

  • End Users (Diners)
  • Partner Users (Restaurants)
  • Application Flow (End Users)

    End users will be able to:

    • Sign Up

      • Primary sign up method for users will be using their mobile numbers.
      • They will also be able to sign up using Facebook Login
      • They will also be able to sign up using Twitter Login
      • In case of social login, users will be prompted to add their mobile numbers.
    • Creating Profile

      • Users will be create their profiles.
      • A public profile will include profile picture, location, favourite restaurants.
      • Incase of social signup, details to be pulled in from social profiles.
      • Add / edit mobile number, private. Not visible publicly.
    • Devices:

      • End user application will be an iOS application, built natively.
      • Partner application will be a web and iOS application (native) with features described in the ‘Application Flow’.

 

Every single aspect of the project is carefully thought out and included. The agency’s job is now to merely estimate timelines and cost of the project. The scope of project is fixed whereas the timelines and budget are kept open.

A project brief is considered successful if it can clearly communicate the requirements of the project to everyone involved in it, and can help you choose the right development partners. 

If you’re looking for development help, we’d be happy to have a word with you!

Naveen
Business Analyst