CASE STUDY
How to make a web app in 2,5 months: case study of HR tool “Upside”
Table of content
Project Challenges
Our solution
Results
Feedback
Demo
Summary
Do you have an idea to create an application but are concerned about implementing it? You are right - 90% of startups fail. An intelligent way to avoid mistakes is to test your idea in reality - quickly, with minimal cost and real users.
Our new case, Upside, proves that you can implement your idea and get the first users in 2-3 months. By getting the best out of no-code web app development, you can create applications at least ten times faster without comprehensive tech or product management skills.
How to make a web app in 2,5 months: case study of HR tool “Upside”
Table of content
Project Challenges
Our solution
- Weeks 1-3. Figma wireframes. App development requirements
- Weeks 4-6. App design in Figma
- Weeks 7-12. Web app development in no-code platform FlutterFlow
Results
Feedback
Demo
Summary
Do you have an idea to create an application but are concerned about implementing it? You are right - 90% of startups fail. An intelligent way to avoid mistakes is to test your idea in reality - quickly, with minimal cost and real users.
Our new case, Upside, proves that you can implement your idea and get the first users in 2-3 months. By getting the best out of no-code web app development, you can create applications at least ten times faster without comprehensive tech or product management skills.
In November 2021, we began web app development for Upside, a SaaS platform that allows setting up, monitoring, and managing employee benefits programs. The founder had a great vision for his product and needed help to bring his idea to life fast. He came up with the idea of creating a flexible product/service offering non-traditional compensation benefits to teams while maintaining 100% control, transparency, and oversight on spending.
Our goal was to make a web app using a no-code web app development approach, and we did it in 2,5 months, turning the idea into a full-fledged product. This article shares details on how to make a web app, create Figma wireframes and app development requirements, and how long it takes to develop an app - timeline, workflow, tools, tips, and tricks.
Our goal was to make a web app using a no-code web app development approach, and we did it in 2,5 months, turning the idea into a full-fledged product. This article shares details on how to make a web app, create Figma wireframes and app development requirements, and how long it takes to develop an app - timeline, workflow, tools, tips, and tricks.
Project Challenges
The project idea was to create a simple platform that allows companies to offer employees flexible spending accounts while maintaining complete oversight and control. Upside platform needed to have the following parts:
Our solution
Weeks 1-3. Figma wireframes. App development requirements
First of all, we carried out a thorough preparatory work - clarified the vision, conducted strong user and competitor research. Then we went through several versions of Figma wireframes and prototypes.
A wireframe is a schematic visualization that helps you think and communicate about the structure of the app you are building. It illustrates an interface that focuses on functionalities available intended behaviors and does not include any styling, color, or graphics.
A prototype is a model of your application that shows the screens and their relationships. It helps to understand how people will use the product.
The first versions of Upside wireframes were just papers visualizing our brain storms’ results.
The project idea was to create a simple platform that allows companies to offer employees flexible spending accounts while maintaining complete oversight and control. Upside platform needed to have the following parts:
- Company admin tool.
- Employee dashboard.
- Upside admin.
- Conduct user and competitor research;
- Prepare clear Figma wireframes and app development requirements;
- Create a vibrant and simple UI for the app flow;
- Develop, test, and release a web application.
Our solution
Weeks 1-3. Figma wireframes. App development requirements
First of all, we carried out a thorough preparatory work - clarified the vision, conducted strong user and competitor research. Then we went through several versions of Figma wireframes and prototypes.
A wireframe is a schematic visualization that helps you think and communicate about the structure of the app you are building. It illustrates an interface that focuses on functionalities available intended behaviors and does not include any styling, color, or graphics.
A prototype is a model of your application that shows the screens and their relationships. It helps to understand how people will use the product.
The first versions of Upside wireframes were just papers visualizing our brain storms’ results.
We used Figma, an online editor for interface design and prototyping, to collaborate fast and conveniently for the final versions of the Figma wireframes. The primary functions of the service are available for free.
One of the main goals of this stage of web app development was to find out the key functionality required for a minimum viable product (MVP).
For example, we postponed to version 2 the ability to create and manage user groups, which allowed us to significantly simplify the logic and release the app faster.
After Figma wireframes, we wrote an app development requirements.
Software requirements specification (SRS) - a document that describes what the web app will do and the functionality Upside needs to fulfill all stakeholders (C-Level, HR team, Accounting Team, Office Manager, Employees, Freelancers, Contributors) needs.
After Figma wireframes, we wrote an app development requirements.
Software requirements specification (SRS) - a document that describes what the web app will do and the functionality Upside needs to fulfill all stakeholders (C-Level, HR team, Accounting Team, Office Manager, Employees, Freelancers, Contributors) needs.
App development requirements for Upside consisted of three units:
- Project description - problem statement, business assumptions, user assumptions, business outcomes, user outcomes;
- Research materials - competitor & user research, business goals and assumptions, user personas, user interviews, glossary and all the other important information about the product;
- Software requirements - high-level features, models, user stories, app analytics, security/privacy guidelines, design guidelines, project documentation, backlog.
Weeks 4-6. App design in Figma
With over ten years of web app development experience, we know that a good UX significantly increases conversions.
App design encompasses the user interface (UI) and user experience (UX), which blend seamlessly for a smooth user experience.
UI design focuses on the overall style of the app (including the colors, fonts, and general look and feel),
UX design relates to navigation, functionality, and usability.
With over ten years of web app development experience, we know that a good UX significantly increases conversions.
App design encompasses the user interface (UI) and user experience (UX), which blend seamlessly for a smooth user experience.
UI design focuses on the overall style of the app (including the colors, fonts, and general look and feel),
UX design relates to navigation, functionality, and usability.
First of all, we set up a color palette, typography, created minimalistic UI elements and illustrations.
Weeks 7-12. Web app development in no-code platform FlutterFlow
The main challenge was implementing all the functionality in 2-3 months to get MVP, traction, and the first feedback from real users. That's why we chose FlutterFlow web app development.
No-code or zero-code platform is a tool for creating applications through graphical user interfaces and configuration without traditional writing code.
The main challenge was implementing all the functionality in 2-3 months to get MVP, traction, and the first feedback from real users. That's why we chose FlutterFlow web app development.
No-code or zero-code platform is a tool for creating applications through graphical user interfaces and configuration without traditional writing code.
No-code was a wiser choice for a new idea like Upside. FlutterFlow web app development made it possible to implement all the necessary features.
Results
That's what we have done for Upside with FlutterFlow web app development.
Users and companies
All users can sign-up with the email/password or with your Google account, log in/log out, reset password.
Admins can manage the company profile, subscription, invite employees by email, manage users (view all users, edit, deactivate, delete them).
That's what we have done for Upside with FlutterFlow web app development.
Users and companies
All users can sign-up with the email/password or with your Google account, log in/log out, reset password.
Admins can manage the company profile, subscription, invite employees by email, manage users (view all users, edit, deactivate, delete them).
Programs and balances
Admins can create, edit, delete the benefits program (name, budget, frequency, members, categories, and limits). Users can view their available balance (sum of all unused balance from all my active programs) and active programs. When a user takes part in the program, a "Program Balance" is created. Users can see the dashboard (by period, category, missing items), create, edit, delete a reimbursement, request a category/a perk from the company. Team members can submit a suggestion or a request to their company admins for new programs/perks.
Admins can create, edit, delete the benefits program (name, budget, frequency, members, categories, and limits). Users can view their available balance (sum of all unused balance from all my active programs) and active programs. When a user takes part in the program, a "Program Balance" is created. Users can see the dashboard (by period, category, missing items), create, edit, delete a reimbursement, request a category/a perk from the company. Team members can submit a suggestion or a request to their company admins for new programs/perks.
Dashboards and Reports
Admins can view the reports of the usage for their account:
1. Dashboard with general usage (number of active people) and usage by benefits program;
2. Report by an employee;
3. Transactions (reimbursement requests).
Admins can view reports by an employee (by month, period), export the reports in CSV-style sheet, filter by group, user, category, date range.
Admins can view the reports of the usage for their account:
1. Dashboard with general usage (number of active people) and usage by benefits program;
2. Report by an employee;
3. Transactions (reimbursement requests).
Admins can view reports by an employee (by month, period), export the reports in CSV-style sheet, filter by group, user, category, date range.
Marketplace
Upside Admins can Add/Edit Marketplace items. Users can view and filter the Marketplace deals, suggest ideas, or put partner deals there.
Upside Admins can Add/Edit Marketplace items. Users can view and filter the Marketplace deals, suggest ideas, or put partner deals there.
Subscription
The owner can create, cancel a subscription with Stripe. We also implemented a 30-day trial period.
The owner can create, cancel a subscription with Stripe. We also implemented a 30-day trial period.
App analytics
We also set up Amplitude analytics to track important use statistics. And the app uses Crisp for customer support chat.
We also set up Amplitude analytics to track important use statistics. And the app uses Crisp for customer support chat.
Feedback
Here is a review of the founder about the work of our team:
Hire the NCNP team with confidence!
tldr: you're in very good hands with Andriy and his team - move forward and hire them with confidence.
Long version:
I hired Alexandr in November 2021 to help me build an early prototype of a new SaaS platform I'm working on in the HR-tech space.
I was very impressed how quickly they grasped the concept of my idea and immediately began sketching the wireframes. By the end of the first week the concept was nearly fully defined and they began designing the UX.
Their business model is simple and effective - Pay-as-you-go, one-monthly price that covers the entire build (ie: concepting, design, wireframing, development) - their team can also draw on the expertise and resources of their larger sister agency Fintech No Code whenever necessary.
Communication is always immediate (we worked over Slack) and they hit their deadlines. I was never in the dark on the progress being made. If anything, I felt like I was slowing them down, not the other way around.
They delivered my working MVP in under two months, just as promised and continued to make bug fixes, slight improvements, etc after delivery.
Pros:
Communication
Value for money
Expertise
Speed
Reliability
Cons:
None I can think of - very impressed with their work overall.
I look forward to hiring them again in a couple months to start building V2.0
We thank Scott for his brilliant idea and excellent communication that made it possible for us to make it happen.
Here is a review of the founder about the work of our team:
Hire the NCNP team with confidence!
tldr: you're in very good hands with Andriy and his team - move forward and hire them with confidence.
Long version:
I hired Alexandr in November 2021 to help me build an early prototype of a new SaaS platform I'm working on in the HR-tech space.
I was very impressed how quickly they grasped the concept of my idea and immediately began sketching the wireframes. By the end of the first week the concept was nearly fully defined and they began designing the UX.
Their business model is simple and effective - Pay-as-you-go, one-monthly price that covers the entire build (ie: concepting, design, wireframing, development) - their team can also draw on the expertise and resources of their larger sister agency Fintech No Code whenever necessary.
Communication is always immediate (we worked over Slack) and they hit their deadlines. I was never in the dark on the progress being made. If anything, I felt like I was slowing them down, not the other way around.
They delivered my working MVP in under two months, just as promised and continued to make bug fixes, slight improvements, etc after delivery.
Pros:
Communication
Value for money
Expertise
Speed
Reliability
Cons:
None I can think of - very impressed with their work overall.
I look forward to hiring them again in a couple months to start building V2.0
We thank Scott for his brilliant idea and excellent communication that made it possible for us to make it happen.
Summary
Upside is a creative and flexible new way to attract and retain talent in the remote/hybrid workforce era. We engage you to try it right now on https://app.ontheupside.io (use the code NCNP to sign-up).
No-code is a wise choice for a myriad of ideas - from marketplaces and social apps to internal HR or analytical tools. If you want to make the application fast and test your concept on a real user, use our experience on how to make a web app or contact us for more details.
Upside is a creative and flexible new way to attract and retain talent in the remote/hybrid workforce era. We engage you to try it right now on https://app.ontheupside.io (use the code NCNP to sign-up).
No-code is a wise choice for a myriad of ideas - from marketplaces and social apps to internal HR or analytical tools. If you want to make the application fast and test your concept on a real user, use our experience on how to make a web app or contact us for more details.
Have an idea?
Let’s build your app 10x faster!
