Quality MVP Development Services: How We Helped Popr.ai design, build, and launch its MVP with Node.js

For entrepreneurs, MVP software development is a more budget-friendly way to test a product, attract early adopters, and validate its market potential.

Sharing is caring!

by Matias Emiliano Alvarez Duran

01/19/2023

Early adopters are risk-takers in any industry: they test products they know aren’t perfect but may revolutionize the market. For your product to take off, you need a minimum viable product (MVP) that can impress those early adopters and get them raving about it to everyone they know.

GIF tool Popr.ai wanted to design and build an MVP after validating some initial prototypes with potential users. But its founder, Jeff Hatten, didn't have the technical background or the resources to do it alone. So, he turned to NaNLABS to help get his product ready for the market, attract early adopters, and validate its market potential. Here’s how we did it.

Ready to build your own custom software with a team that cares about you and your processes? We’re not code monkeys, we care about you.

Meet Popr.ai, a tool for creating slide-based GIFs at scale

Popr.ai is an easy-to-use software as a service (SaaS) web app that helps users create slide-based GIFs. Each GIF can be personalized with messaging unique to both the sender and the recipient. 

Popr.ai is particularly helpful for

  • Sales teams engaging with prospects and new leads

  • Success teams staying on the radar of customers

  • Recruiting organizations looking to wow top talent

  • Anyone wanting to provide a great first impression to new connections on LinkedIn

"
“I’m probably on 20 or 50 different vendor email lists, and I realized there is a complete lack of personalization in communication,” said Jeff Hatten, founder of Popr.ai. “That’s the problem we’re trying to solve. Popr.ai isn’t just for selling—it’s for personalizing correspondence.” With his app, Jeff wants to help users tell a story, share a message, attract attention, and trigger engagement in a crowded market.

Popr.ai enables users to create personalized GIFs.

The brief: Design the minimum viable product (MVP)

Jeff wanted to transform Popr.ai’s proof of concept into an MVP and add new functionality to:

  • Provide a user-friendly platform experience

  • Scale as the user base grows

  • Keep everything backed up by a reliable technology stack

  • Reduce user waiting time when generating GIFs

  • Automate systems and reduce manual processes

Enter NaNLABS, MVP app development experts

Since he didn’t have a tech background, Jeff was looking to partner with an MVP app development company, but the expensive options within the US didn’t appeal—some companies even wanted a million dollars for the project.

But outside the US, the agencies Jeff found didn’t meet his expectations when it came to engineer talent. Compared to NaNLABS, he said, “the level of competency and their interest in my product vision was night and day.” 

"
When Jeff found NaNLABS, he knew it was the right fit for Popr.ai. “They took the time and effort to scope the project and understand my needs, which is why I chose them,” he said. "NaNLABS struck a balance between challenging me and ensuring that the solution we were arriving at was something they could deliver—not being the ‘yes-man’ and not the ‘no-man’ either.”

As Jeff found out, you don’t just outsource your project to NaNLABS and never hear from us again. We become an integral part of your team to evaluate your project, make improvements, manage the custom software development process, and reduce your time to market.

The challenge: Manual processes, limited resources

The initial product idea and proof of concept that Popr.ai was testing relied on manual processes and was fairly basic. In the early days, this worked just fine, but it wouldn’t be scalable for any influx of users. Plus, a personalized GIF took up to 15 minutes to generate, which was making it tough for Popr.ai to really win users over.

As his clientele grew, and his business goals expanded, Jeff needed automated enterprise level software to streamline his workflows. There were a few other key technical challenges that defined his partnership with NaNLABS:

  1. Direct copy and paste functionality within Google Chrome

  2. Easy extraction of a contact’s information from LinkedIn

  3. Generating hundreds of high-quality animated GIFs on demand

  4. Launch a successful MVP product in a 90 days timeline 

On top of that, Jeff was going from solo entrepreneur pitching to our sales team, to effectively working with an in-house development department. From setting clear timelines, budgets, and expectations on resources and deliverables, our teams needed to coordinate closely.

The solution: A user-focussed software for easy adoption

To help Jeff build his custom MVP, we set up a team of 3 full-stack developers, an UI/UX designer, and a project manager. Our tech stack comprised:

  • ReactJS for front-end coding

  • NestJS for back-end development

  • MongoDB for the database 

  • AWS Lambda functions for generating high-quality GIFs 

  • S3 buckets to store the generated GIFs

Once the team and tech stack were in place, it was time to get started. Here’s what we did to overcome Popr.ai’s unique development challenges.

1. Seamless handover to the NaNLABS development team

To make sure Popr.ai’s handover to the development team at NaNLABS was smooth; we created a proposal document to outline important information like:

  • The client's name and background information

  • The type of service we would provide, including the specific technologies we’d use

  • The timeline for the project, roadmap, and the due date

  • The team members (and their expertise) who will be working on the project

  • The documentation process and the client's roles and responsibilities

"
It was important to us that all communication with our client was clear, but this document was just the start. “From the beginning, NaNLABS communicated with us along the way wherever adjustments were needed or needed to figure out a different way to do it,” said Jeff, “and that made any challenges just tiny bumps in the road.”

2. Using Google Chrome extension to extract information from LinkedIn

Personalizing GIFs is only as good as the data it has to work with. Jeff wanted his users to be able to personalize GIFs with the recipient’s information without having to enter the data manually. It was also important to him that the GIF could match the receiver’s own company branding, rather than just the sender’s (or Popr.ai’s). 

We found that Popr.ai couldn't extract LinkedIn users' information to personalize GIFs because the social media platform's security features prevented it—and LinkedIn offers no API for sharing user data in this way.

So, NaNLABS found a way to pull data like a person’s name, profile picture, and place of employment from their LinkedIn profile using a Google Chrome extension. Once the extension was ready, users could easily extract data from LinkedIn with just one click. The extension also connects to the Brandfetch API, easily replicating the recipient's company logo and brand colors.

3. Reusing code among different modules with NPM workspaces

“One of the things I envisioned was that it would be super easy for the user to copy a GIF from the Popr.ai dashboard and paste it to your email or LinkedIn messages,” said Jeff.  But he soon found that Google Chrome doesn't allow users to copy and paste an animated GIF. Instead, GIFs are pasted as thumbnails or just one frame from the GIF—making it a regular image. 

Since we had already created the Google Chrome extension, this helped us overcome the issue. We copied the IMG TAG (HTML) format and pasted it into every site that reads HTML, such as Gmail and G Docs. This helped improve the user experience and make Popr.ai available across browsers.

We wanted to keep the same look and feel in both the web app and Chrome extension. So we reused the code and created a library in Node Package Manager (NPM) workspaces that could be used in both projects. That meant we didn’t need to duplicate code to create the visual components. 

Popr.ai allows users to personalize GIFs unique to the recipient.

4. Using Remotion to generate GIFs on-demand

During the proof of concept phase, Jeff had to create GIFs manually using tools like Adobe. Each GIF had to be created manually, so it would have been difficult (if not impossible!) to scale as the number of users increased.

Drawing on our experience with Node.js development services, NaNLABS introduced Remotion, a framework that creates videos programmatically using React.js. Each GIF is created using a library called emotion—generated in AWS lambda functions, and stored in an S3 bucket. 

Using Remotion reduced Popr.ai’s GIF generation time to between 6-15 seconds (depending on the duration of the GIF) and eliminated any need for manual intervention.

5. Implementing Agile to launch the MVP product within the timeline

The whole purpose of having an MVP is to test your product with stakeholders, see how it works, and make changes accordingly. For that reason, we needed to make sure Popr.ai’s MVP was ready for market quickly without compromising quality.

At NaNLABS, we live and breathe Agile principles because they help us work more efficiently. To get Popr.ai off the ground fast, we implemented the following Agile practices:

  • One-week sprints to refine the product development process

  • Daily team meetings to ensure that the product design was on track

  • A continuous delivery process to ensure that the product was always available and up-to-date

Working in sprints allowed us to deliver working software from the get-go. Popr.ai could give us feedback on product design definitions, early versions of the product, test integrations as we went. This allowed us to refine the new product quickly, fix bugs, and keep the team focused on priority tasks while creating something that was both functional and user-friendly. 

The results: Early adopters and validation

Since the delivery of the MVP, Popr.ai has been able to start scaling up its user base without any hiccups. It has now launched the beta version of the app and is in the maintenance and support phase.

Using software development services, Popr.ai:

  • Attracted a waitlist of beta users for testing its successful MVP

  • Reduced GIF generation time from 15 minutes to under 15 seconds per GIF without manual intervention

  • Developed a custom Google Chrome extension for easier data extraction from LinkedIn profiles

  • Integrated with the Brandfetch API to include the recipient’s company logo and primary brand color in every personalized GIF

  • Achieved early validation of its MVP among beta users

Popr.ai is in the process of gathering customer feedback from real users and creating a backlog of improvements and new features to develop during a second iteration.

Do you need MVP development services?

Every SaaS business needs an MVP to launch quickly, get feedback from early adopters, and iterate quickly to improve. The Agile software development model is ideal when building an MVP because Agile developers can work quickly to deliver high-quality software in a short space of time.

Consider hiring an MVP development company if:

  • You lack the technical know-how to design and develop your product

  • You need a reliable tech stack but don’t know where to start 

  • You want to save time and resources through automated processes

  • You’re looking to launch quickly with a limited budget

  • You’re not familiar with Agile principles or need support bringing them to your team

At NaNLABS, we develop custom software solutions for fast-growing startups and SMEs. Our team will work closely with you to turn your product vision into reality, giving your software the scalability and robustness it needs to succeed. Let’s work together!

Ready to build your own custom software with a team that cares about you and your processes? We’re not code monkeys, we care about you.

Frequently asked questions about MVP development services

What is MVP development?

MVP development is the process of designing, building, and testing a product or business idea with key features in the shortest time. It’s used to satisfy early adopters and validate the business concept. This is done with minimal cost and risk, enabling businesses to gather user feedback and make improvements quickly.

Why is MVP development important?

MVP development is important for validating user's interest in your product and helps you:

  • Save time and resources as you can test your ideas without making a huge investment

  • Identify product-market fit and understand user needs quickly

  • Gather feedback from users and make improvements

  • Reduce the cost of development by releasing features in phases.

  • Acquire a potential user base and attract early adopters

  • Gather valuable data which can be used to refine your product

How long does MVP development take?

The MVP development process can take anywhere from a few weeks to several months, depending on the complexity of your project, feature set, team size, and budget constraints. Some sources state the average duration is between 3 to 6 months for SaaS applications. However, at NaNLABS, we recommend limiting the design and production of any MVP to 90 days—otherwise you could end up designing something more advanced than a minimum viable product before you’ve had a chance to test the market.

What is the difference between MVP and a prototype?

The difference between a minimum viable product (MVP) and a prototype is that an MVP is a production working application that contains the core features necessary to launch the product to the market quickly. A prototype is a simulation that demonstrates a software's functionality. Prototypes are deployed into the production environment to create MVPs which are then released to the public. 

Is MVP development more economical than other development types?

MVP development is more economical than other types of development because it only includes the key features necessary to launch a product, reducing the costs associated with building the entire feature set and allowing for faster time to market. Additionally, the feedback from early adopters can help you focus on cost-efficient solutions to improve your product or service.

What do MVP developers do?

MVP developers design, build, test, and deploy the initial version of the product to allow early adopters to evaluate it before committing resources to further development. MVP developers are responsible for ensuring that all the features necessary for an acceptable user experience are included at launch and that any issues discovered during testing are rectified.

More articles to read

Previous blog post

Front-end

11/18/2013

Avoiding huge controllers in AngularJS

Read the complete article

Next blog post

Methodologies

01/15/2023

Node.js as Backend: What it is, When to Use it, & Frameworks to Try

Read the complete article