How NaNLABS Leveraged MVP Development to Build a Web App for Communication Skills

In this article, you’ll find out what NaNLABS did (in just two months of work) for a client that needed a progressive web app (PWA) that could use speech recognition and analysis to create personalized learning plans for its users.

Table of contents 

• The client: who they are and what they do

• A challenge for software developers

• Building a software development team

• The MVP development process

• The results: Deliverables and learnings

• Should you get an augmented Agile team to develop your MVP? 

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.

Get in touch. We don't byte

The client: Who they are and what they do

Our client’s mission is to help people build interpersonal skills through habitual conversation practice. When they came to NaNLABS, they needed to build an app that could help people land jobs in the tech sphere using a clever speech recognition tool. 

The tool helped users practice soft skills like having difficult conversations, leading meetings, and delivering presentations.Users log in to the app, choose a topic, and get access to a series of sessions where they can record themselves carrying out various tasks.

This app is particularly helpful for

• Techies who are starting out their careers

• People who want micro-certifications

• Managers who want to strengthen their soft skills

• Corporate learning for teams and individuals

A challenge for software developers

After different stages of consideration, the client chose NaNLABS to work on their MVP development. They needed a company that could help them with product guidance and design. They also wanted to build their MVP to test it with their target audience, run pilot programs, and use it to attract investors. 

The brief: What the client needed from NaNLABS

Technically speaking, they needed someone who could make a progressive web app (PWA) with a clear and easy-to-use experience that 

• Felt like a native mobile app

• Had a system that could provide a complete speech analysis (content, tone, rhythm of the speaker's voice, feelings)

• Played back the audio recordings of users' voices

• Structured the training and audio experiences in a hierarchical order that was clear to the user, and a team manager

• Saved users' progress on their learning milestones and achievements

• Put people in real-world scenarios using their native AI system, digital system processing (DSP) developed in Python & C

• Gamified the way people learn

This request needed full-stack product development. The platform also needed to 

• Validate users, provide job training, job scenarios, leverage the DSP engine, and progress data models

• Read and write user data

• Store audio files, process them with the DSP engine,  and store metadata in JSON format 

• Set up the infrastructure to automate DSP processing

• Transfer analyzed data to to certain Google Cloud APIs for additional analysis

The challenges facing the client

Our client had a lot of work laid out already. They had a clear vision and a sound idea of how they wanted the user interface user interface (UI) and user experience (UX) to look, but they were facing three main challenges:

1. Hiring a software development company that could help them bring that vision to life

2. Finding ways to process the audio and make it digestible for the Machine Learning algorithms to work

3. Build an end-to-end solution that integrates all the different software pieces.

Building a software development team

This project was challenging for the NaNLABS team since it was heavy on UI/UX and it implied building software that required real-time audio processing plus integration with Machine Learning models and APIs. That’s why we hand-picked all the people on the team to ensure client satisfaction on this minimum viable product development project. 

Putting the dream team together

This project needed specific skills like coding in ReactJS, developing microservices using NestJS framework, and using GraphQL through Apollo Client and Server. We also needed people who had previous experience or understanding of machine learning algorithms, and someone who was our UI/UX design expert. So, we put together a team of

• Two Full-stack Developers

• A UI/UX Designer

• A Project Manager

• A Principal Software Developer.

The MVP development process

The product development process usually looks something like this:

1. Conduct market research. Define whether there are any potential customers who are willing to use your product. Does this product answer a market need? Is it a product-market fit?

2. Define your value proposition and addition. Why is this product important? What value does it add to the market? 

3. Design end-user flow. How is the product idea coming to life? How are end-users going to use your app? What’s the roadmap in their user journey?

4. Define the MVP core features. What are the crucial functionalities that your MVP needs to have that you should work on during the development stage? 

5. Launch the MVP. Define a target test group and get real users to test the product out.

6. Gather user feedback and make improvements. Measure early adopter satisfaction, analyze feedback and create a development roadmap.

In this case, the client had already completed the first three steps. NaNLABS was tasked with  designing, defining, and launching the app according to the client’s guidelines. 

Software architecture design

Even though NaNLABS was working on an MVP, it needed solid foundations to be future-proof. The client wanted to run pilots with large enterprises and they were expecting the user base to grow exponentially. The software architecture had the following characteristics: 

• NestJS framework to build microservices and orchestrate the different pieces involved in the solution

• A GraphQL API to expose data to client applications, providing query flexibility and payload efficiency in addition to a well-structured endpoint

• A Firebase authentication service enabling multi-platform sign-in and request validation 

• An existing DSP Python API that did the initial audio analysis

• A set of Google Cloud Platform (GCP) managed services, including

  • Google Storage to save large audio files

  • Google Text-to-Speech API to perform audio transcriptions

  • Google Natural Language API to perform semantic analysis and extract main domain-specific concepts

• A PostgreSQL database for meta-data and user data.

• Docker containers that allowed multiple environment setups in a simple way.

Some of the challenges the NaNLABS team faced during the project were:

• Finding the right back-end architecture to manage and synchronize the different software modules and services

• Building responsive data visualization charts that easily communicate sentiment/emotions, cadence, and rhythm in the voice of the user

• Reaching a healthy balance between what the client wanted and what we could achieve in the limited timeframe that we had

• Delivering an accurate MVP in terms of product design based on the client’s expectations.

Agile methodologies

The NaNLABS team worked with the Scrum methodology to implement

• One-week sprints to foster incremental product development

• Weekly refinement and retrospectives

• Planning meetings

• Daily team meetings

• Weekly meetings with stakeholders to present a deliverable (demo or progress made during the week)

• Continuous integration and continuous delivery from day one

• Use of development, stage, and production environments.

Working with Agile methodologies is a huge part of what makes the NaNLABS team so efficient. It helps us be better at prioritization and allocating resources. Without Agile software development, we couldn’t have built a successful MVP within two months.

UI redesign using Figma

The client had already shared a prototype of the design, but it needed some work to be fully functional. The NaNLABS design team did an initial UI/UX review of the client’s design prototype.

Then, we used Figma, a collaborative web-based design tool that allows UI/UX designers to create vector graphics and prototypes, to come up with a new UI/UX design based on the ones they shared.

As part of the MVP Development project, NaNLABS made changes and iterated on the UI/UX design to adjust style and usability to deliver a ready-to-code design version.

Natural Language Processing (NLP)

NLP uses artificial intelligence to close the gap between humans and computers. It works as a kind of translator so the two can communicate with each other.

For this client, we used Google’s NLP service together with Digital Signal Processing (DSP) to ensure the app could transcribe the human words captured in the audio note, and truly understand the emotion behind it. 

NLP understands signals and meanings as humans do; DSP is the previous step that understands the raw signal without the meaning. The DSP uses the raw audio as input, analyzes the audio (pitch, tone, rhythm), and provides results in the form of numbers. The text-to-speech API transforms the audio into text. And then, the NLP uses the text to perform a semantic analysis and give words meaning, and outputs a list of the words that make it have that meaning.

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.

Get in touch. We don't byte

The results: Deliverables and learnings

We’ve walked you through two months of work. Now let’s share what the client got as a final product. 

Working in Agile sprints, NaNLABS shortened the time to market with an MVP in the form of a fully functional PWA that used NLP and DSP to analyze human voice notes. The app was able to process the words, sentiments, and rhythm of each voice note to build a personalized learning plan for the user. 

In the end, the client was able to launch the pilot programs on time, get user feedback and start generating traction.

What we learned

The project wasn’t just successful for the client. It was also a growing experience for the NaNLABS team. We learned to:

• Overcome challenges using modern tools like GraphQL to handle large audio files 

• Take on challenging projects that are good for team morale and overall learning experience

• Value transparency with the client.

Feedback

The client loved that NaNLABS were able to take their requests onboard, spot errors, and proactively come up with solutions, while keeping them in the loop. 

At NaNLABS, we won’t just take a ticket and fix it, we’ll put some thought into it and we'll find the best solution. If that solution opposes what the client wants, we’ll explain our reasoning and make sure everyone is on the same page before we proceed.

The client also seemed genuinely grateful and excited about the potential of the final product. As partners, we all believed that this product was going to change people's lives for the better. 

In fact, they chose to work with us again after the first delivery. The second time we allocated one of our developers to improve some of the existing code and work on new features. You can read their full review at Clutch.co, written by their co-founder. 

So, should you get an augmented Agile team to develop your MVP? 

If you’re an entrepreneur and you need to build an MVP fast to run pilot programs or present it to investors but don’t have all the skills to do it, yes, you should hire someone to do it for you. 

Getting an augmented team to work on your MVP development in a short period of time will help you accelerate the founding process for your startup, leaving you time to focus on the business part of your product launch. 

If you choose NaNLABS to develop the MVP for you, we’ll make sure to put you and your requirements first and we’ll ensure client satisfaction. At NaNLABS we’ve developed high-quality MVPs for clients like Propersum, Fifth Wall, and Testloop, and we’re ready to do the same for you. 

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.

Get in touch. We don't byte