Case Study

How to make a web app in 2,5 months: case study of HR tool “Upside”

Table of content

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.

How long does it take to create a web app

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: 

  1. Company admin tool.
  2. Employee dashboard.
  3. Upside admin.

The core values of the platform were easy to upload and use for employees, easy to control, and get a summary of expenses for admins. To that end, we needed to complete the following tasks: 

  • 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.

Paper wireframes for no-code web app

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.

Figma wireframes for web app

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).

How to create a web app tips and advice

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.

How to create prototype and wireframe for app

App development requirements for Upside consisted of three units:

  1. Project description - problem statement, business assumptions, user assumptions, business outcomes, user outcomes;
  2. Research materials - competitor & user research, business goals and assumptions, user personas, user interviews, glossary and all the other important information about the product; 
  3. Software requirements - high-level features, models, user stories, app analytics, security/privacy guidelines, design guidelines, project documentation, backlog.

No-code web app requirements

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.

 tips how to design app

First of all, we set up a color palette, typography, created minimalistic UI elements and illustrations.

web app design sample

We have divided the user flow into three parts: authorization, member, and admin screens. In total, we have designed about 40 application screens and their mobile version. As for prototyping, we used Figma to create and collaborate on web app design.

web app design sample

Weeks 7-12. Web app development in no-code platform Bubble

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 Bubble 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. 

how to develop and app tips

No-code was a wiser choice for a new idea like Upside. Bubble web app development made it possible to implement all the necessary features.

A web app no-code development using Bubble.io

Results 

That's what we have done for Upside with Bubble 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).

User management in web app. Sample

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. 

Program management in web app

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.

Dashboards and Reports in web app. Sample

Marketplace

Upside Admins can Add/Edit Marketplace items. Users can view and filter the Marketplace deals, suggest ideas, or put partner deals there. 

Marketplace in no-code app. Sample

Subscription

The owner can create, cancel a subscription with Stripe. We also implemented a 30-day trial period.

Subscription in no-code app. Sample

App analytics

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 the No Code No Problem team 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 Uptech 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. You can read full Scott’s feedback on Trustpilot.

Demo

Our founder, Andriy Bas, shared details on how to make a web app in the video below.

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.

Have an idea?
Let’s build your app 10x faster!