HRM, CRM & CMS

Development Proposal

“Time to digitize your Business!”

Table of Contents
Glossary (Terminology) ..................................................................................
Executive Summary........................................................................................
Web Application Development Process Steps ...........................................
1. Project requirement discussion..............................................
2. Scope of Work Document .........................................................
3. Wireframing of the app.............................................................
4. UI/UX design ...............................................................................
5. App development .......................................................................
6. Q/A testing...................................................................................
7. Launching the app......................................................................
8. Post-production support ..........................................................
Frequently Asked Questions
What are the main steps in developing a Web application?
Conclusion ............................................................................................
Estimated Project Schedule...............................................................................
Web Application Maintenance and Growth Package ................................
Contract .........................................................................................................
 Glossary (Terminology)

OS

The OS is the Operating System within which you create your app. (Do not confuse it with Open Source!)

iOS

iOS is the OS created by Apple that supports the iPhone, iPad, Apple Watch, etc. In order to create an
app, the developer will work with the Swift or Objective-C languages.

Android

Android is Google’s flagship OS. Building for Android means using Java, a more common language

Hybrid

Hybrid is the type of application that can run on both the Operating systems iOS and Android. It is
developed using react native language.

UI

UI (User Interface) is the design of the Web app with a focus on the experience of the user, keeping in
mind the overall interaction.

It’s arguably the most important part of your app since it determines how easily a user can make the
program do what he or she wants. Even a powerful idea with great technical execution has little
value with a poorly designed UI.

UX

UX, standing for User Experience, refers to how a user perceives, reacts, or feels when interacting with
your Web app.

UX testing is done to evaluate the ease of use, practicality, and efficiency of the product.
Mockups and Wireframes

A critical part of the design process is creating mockups, which are meant to show the end user what
the app will look like without having to actually build the app or its underlying functionality.

Software UI mockups can range from very simple, hand-drawn screen layouts to realistic bitmaps and
even semi-functional user interfaces. They are comparable to architects’ blueprints.

Wireframes are drafts used to present the proposed functions, structure, and content of an app. A
wireframe separates the graphic elements of the app from the functional elements in such a way that
developers can easily explain how users will interact with the app.

Backend

Backend development is typically talked about in terms of databases, which provide a way for
developers to link to cloud-based storage.

These backend databases are most commonly used for push notifications, data storage, file storage,
messaging queues, monitoring and configuration, and social integration.

Push Notification

A push notification is a short message that developers can send to app users even when said users don’t
have their Web applications open. The messages are displayed on the home screen of the device (even
when locked).
API

API stands for Application Programming Interface. Together with backend databases, APIs provide a set
of fixed rules and specifications that define interactions between software components.

An API can be created for libraries, operating systems, and applications. A good API makes it easier and
faster to develop an app by providing all of the “building blocks” for it.

APK

An APK is an Android Application Package. It is a file format that is used to deliver Web apps to
Android devices.

Agile Software Development

Agile development, as opposed to waterfall, focuses on building software iteratively, the project is
divided into small modules (the smaller, the better) and delivered in weekly or monthly sprints.

Sprints

The team will work in sprints, forecasting to complete a set of tasks during a fixed time period.
Sprints can be one, two, or four weeks long.

Revision

A revision is a request by the client to make changes in the ongoing task which could be a document,
wireframes, mockups, or the app alpha build.

QA

QA, short for quality assurance, is the process of systematic monitoring and evaluation, which is carried
out in order to make sure that the project is completed based on previously agreed upon specifications,
standards, and functionality requirements.

Sign-Off

Sign-Off marks the completion of the project/contract between client and provider by formally signing
the sign-off document.
 Project Executive Summary

Fuel stations are essential for our daily lives as they provide the fuel that
powers our vehicles. As such, they need to operate efficiently to meet the
demand of customers, as well as ensure their stock is managed effectively. An
inventory and transaction management system is vital to ensuring the smooth
running of a fuel station. This proposal outlines a system to help manage
inventory and transactions for a fuel station.

Objectives:

• The objectives of the inventory and transaction management system are

to:

• Ensure the efficient management of inventory

• Provide an accurate account of sales transactions

• Minimize errors in recording transactions

• Provide real-time information on fuel stock levels

• Help streamline fuel station operations

Features:

The proposed inventory and transaction management system will have the
following features:

Inventory tracking: The system will provide real-time information on fuel stock
levels. This information will be available to authorized personnel and will enable
the station to anticipate demand and order supplies in a timely manner.

Sales tracking: The system will record sales transactions, including the amount
of fuel sold, the price, the time of the transaction, and the method of payment.
This information will be used to reconcile sales, track revenue, and reconcile
fuel inventory.

Fuel dispensing: The system will be integrated with the fuel dispensing units to
track fuel dispensing and ensure the accuracy of fuel dispensing.

User management: The system will allow the fuel station manager to create
and manage user accounts. The system will provide different access levels for
different users, ensuring that sensitive information is only accessible to
authorized personnel.
 Project Executive Summary

Reporting: The system will provide reports on fuel stock levels, sales
transactions, and revenue. The reports will be customizable and will enable the
fuel station manager to analyze data and make informed decisions.

Implementation:

The proposed inventory and transaction management system will be

implemented using the following steps:

Define system requirements: The fuel station manager will define the system
requirements, including the features and functionality required.

Develop the system: The system will be developed by a team of software

developers using appropriate software development methodologies.

Test the system: The system will be tested to ensure it meets the requirements
defined in step 1. Testing will include functional and non-functional testing.

Train users: Users of the system will be trained on how to use the system
effectively.

Roll out the system: The system will be rolled out across the fuel station.

Conclusion:

An inventory and transaction management system is essential for the efficient

operation of a fuel station. The proposed system will help streamline fuel
station operations, minimize errors in recording transactions, and provide real-
time information on fuel stock levels. The system will be developed using
appropriate software development methodologies, tested, and rolled out
across the fuel station.
 Web Application Development Process Steps

1. Project requirement discussion

The initial stage of Web app development process involves discussing about the project. We will have a
typical phone call, casual, short, just to identify if we can assist you if we can take this project forward.

What do we expect from you, from our clients?

First, we want the basic details from your end, we will do this by sending you a questionnaire form. Like
what kind of application, you want to develop, what is your budget, what is your timeline, do you have
any other app similar to your app concept? At The Metro Web, we believe that “healthy
conversations lead to trustworthy relationships for future ventures.” The more we know about your
idea, the better we can assist you.
2. Scope of Work Document

Now after the test cases and cost estimation, for your customized Web application development, we
make it official by signing the Scope of Work document.

Why SOW for your app?

We ensure that your idea is safe with us. In fact, it avoids misunderstandings or miscommunication
between us.

What you will get in the project development agreement?

After completion of the project discussion and providing an estimation, the next step in Web app
development is to sign a Scope of Work document which is the key to associate with The
Metro Web. The agreement contains – Project deliverables, Milestones, Legal clauses, and
Reference/Annexures.

Being a professional in the app world, we provide Web application development services specified on
paper. Our real work starts after signing an agreement which consists of understanding project
requirements, defining communication methods, file sharing, and expected delivery phases in set
milestones. For development, we do a kick-off meeting at our company. This meeting defines the
application developers and other team members, who will work on your project.
3. Wireframing of the web app

This is one of the crucial Web application development steps after the project, requirements are
understood and communication methods (Slack, Skype, Teamwork) are set, the question of how much
time will it take to design an app arises. The designing part is the most intricate step of developing Web
apps. Before starting the development, it is essential to finalize wireframing steps in Web app
development.

What is the wireframe?

The wireframe can be understood as a pillar for application/website. It helps you to understand the flow
of the system and gives a rough idea of how the system would function. The wireframe helps in the
precise estimation of the development timeline. It also helps the designers get a gist of the system flow
and aid them in creating flawless and accurate designs.
Which tools our BA team uses for wireframing your app idea?

Our Business Analyst team analyzes your app concept to make a wireframe of required features using
Balsamiq 3.5.17 and Adobe XD wireframe design tool.

Why do we need a wireframe? What is the importance of a wireframe?

An app has many features, for instance, you want a chat feature in the app. But there are a variety of
different chat types viz one-to-one chat, group chat, timeline management. That particular requirement
can be clearly penned down in wireframes and gives an idea to the stakeholder how the chat flow would
work.

4. UI/UX design

Before starting to prepare initial app designs, we sent you a questionnaire that helps us in knowing your
preferences. It consists of questions like.

Questions we ask our clients

o Which color would you prefer for your app?

o Basic preferences for color and fonts

o Which apps do you like?

Tools our UI/UX designers use

According to your taste, we make sample screens using Web app design tools like

o Adobe XD

o Sketch and

o Adobe Photoshop
What do we deliver during this phase?

The sample contains an app icon, splash screen (first screen), log in, or sign-up form, the home page. We
prepare two UI/UX choices for you. After sending the samples, we wait for your feedback and make the
changes, if any, according to your preference.

After the final approval of the design, we make a systematic Web application development process
flow to start the process for making it a user-centric product by using Figma, Adobe XD, or Invision. We
prepare an up-front design of your complete app without writing a single line of code.

5. App development

After coming together with app designs, the Web app developers get down to bring everything into
action. The project manager defines tasks to the developers and develops app development step by
step process to achieve the set milestones.
Code Understanding

We value your time and money, thus, a discussion of every thought, suggestion, or decision is done with
you. The progress of the Web application development process steps is given to you by a “walk- through
of the developed app screens” via project management tools like Basecamp and Trello.

For Progressive Web Application we will use the following

technologies Front – End: Next.Js PHP, React Native,

JavaScript, HTML, and CSS

Back-end: PHP, RoR, GOLang, Node Js, Angular Js, React Js, .Net.

Database: Mongo DB
6. Q/A testing

When you decide to create a new app, it is inevitable to keep testing the app. It helps in keeping the
cost low and to build a qualitative app. The farther in you go into the Web app development cycle, the
costlier it becomes to fix the bug.

When developing Web apps whether it is a hybrid app or native Web apps, before the finalization of the
app reveals to the world, the process of app development includes the testing of the Web app by our
QA team who runs various tests to make sure that the app works flawlessly. Have a look at the
difference between functional and non-functional tests included in the process of Web app
development.

o Functional test: Through this type, the app is tested against the functional
requirements/specifications of the client. It provides the appropriate input and expects the correct
output, testing the user interface. In short, all the user requirements are specified by the business are
well tested.

o Non-functional test: It focuses on the good quality of app software especially the nonfunctional
aspects such as response time, security, scalability, usability, performance. It covers all the tests that are
not covered in functional testing.
 Let’s dive into the difference to get better clarity about the QA testing as an integral part of Web app
development process and helps to define the stages of app development.

Functional Testing Non-Functional Testing

o o
o o
o o
o o
o o
o o
o o
o o
The application is tested to check its usability, compatibility, interface checks, and performance. We
have around 50 iOS & Android devices to check, locate, and fix issues that arise due to UI. The devices
come in different dimensions, screen sizes, OS versions. Thus, this type of testing ensures that there are
no functionalities that are causing the problem to the application when it is live and used by the app
users.

For keeping track of your Web app testing phase, QA sends a release note with every build release. We
develop and test simultaneously to find bugs as early as possible. Parallel testing is done as soon as a
module s developed or milestone is completed. First, we perform the unit test, QA testing using a black-
box testing method that is commonly performed for functional and regression testing.

After completing testing and making your application 100% bug-free and smooth from our side, we send
it to you, and we call it UTA (User Acceptance Testing) testing.

7. Launching the web app

How to launch your web app?

Don’t worry. We assist our customers in uploading their applications without

charging any additional cost.

What do we need from your end?

We only need developer account credentials from the customers to upload it.
Is it easy to publish the application?

An app’s release in the app store includes:

o Your app’s title

o Description

o Category

o Keywords

o Launch icon

o Web App Screenshots

8. Post-production support

As the application gets in the hands of app users, feedback will pour in and for future versions of the
app, you will need to incorporate that as an app update. Every app will need new features and
technological updates; thus, this is the last Web app development process step. Typically, as soon as
the first version of the app is released, the development cycle begins anew.
We, at The Metro Web, provide you with an “after launch service program” which is
1 month support.

What you will get in this free support?

During or after the Web app development process, if we face any issue or bug, we will instantly fix the
issue. Once the duration of free support is finished, if a customer wants to extend the support period,
we prefer to sign an annual maintenance contract that can protect the app owners. If any new issue/bug
arrives then, it can be immediately fixed.

What are the main steps in developing a Web application?

the application development lifecycle. Let’s have a quick look at

it.

Research:

Wireframing:

UI/UX design:

Technical aspects:
technical feasibility. Your app’s requirement depends on its format as well as the
platform,

App development: The app’s coding, bug fixing, selection of technical stack libraries,
it
Testing: app’s usability, compatibility, security, interface

Deployment: Post-
production
support:
Conclusion

We hope that sharing this information about our app development process will give you a better idea
while selecting the best app development company for your project. Every human tends to do some
mistakes, and thus, we also are made up of the same origin. But our escalation ratio is very less, about 5-
6% of projects hardly go under escalation.

Estimated Project Schedule

This project is expected to be completed in roughly 16 Weeks subject to the approval and availability
of the client during all project phases. Development timeline will be starting after the design phase
approval.

PROJECT TIMELINE

S. No Milestone Duration (Weeks)

Project Scoping
1 0 Week
Scope of Work

App Design
2 1 Week
App Wireframes

App Development
3 2 Weeks
Functional (Alpha Build)

App Development
4 5 Weeks
Functional (Pre- Beta Build)

App Development
5 5 Weeks
Functional (Beta Build)

App Quality Assurance

6 2 Weeks
Tested (QA Build)

App Deployment
7 1 week
Launch on servers/stores

*This is a rough estimation of the time it takes to develop an app. The timeline might change after all the project
requirements have been gathered and agreed upon.
 Pricing and Payment Milestones
The Web Application will be divided in 3 Major Milestones.

Milestone 1: ------------------------------------------------------------ 4,000 GBP

Application Wireframes.

UI/UX Designs.

Frontend Development

Alpha Version.

Milestone 2: ------------------------------------------------------------ 2,000 GBP

API Developement.

Backendend Development

Pre-Beta Built

Initial QA

Beta Built

Milestone 3: ------------------------------------------------------------ 2,500 GBP

Code Evaluation

Final QA & Testing.

Web App Deployment (LIVE)

Total Project Cost: ----------------------------------------------------- 8,500 GBP

Web Application Maintenance and Growth Package. (Optional)
Rs4,000/Year

Why You Need Web App Maintenance and Growth Services?

As you enjoy a bigger user base with time, some factors like server migration, low latency etc, come
into play. These factors have a direct effect on the performance of your business app. It is only by
partnering with an experienced team that you can compete in challenging markets.

New Software Versions: Regular update of your software is essential to stay competitive in the
market.

New devices on the market: With new smartphones coming to the market, you need to ensure
that your app is available on these new devices

New App Market Rules: Changes in the app market policies too needs attention or your app
may be banned if it doesn’t comply with these rules.

Technical Issues: Regular changes and updates to the software may cause technical issues.
Regular checkup of the app for performance and security is important.

Our Maintenance and Growth package includes the following services:

1. End User Experience Monitoring

2. Server Monitoring
—

organization’s

3. App Crash Monitoring

provides details related to the crash’s cause, repercussions, and solution. Developers and

4. App Analytics Monitoring

ers don’t seem to use.

You’ll also gain insights into whether you’re achieving your goals for your Web app,
whether it’s revenue, awareness, or other KPIs, and then take the data you have

5. App feedback monitoring

6. Source code repository & versioning

7. Other important regular services

like Application Enhancements:
o

Software Upgrades:
o

with each OS upgrade, we help you upgrade your app so that you don’t lag
Bug Tracking and Solutions:
o

Security Patch Updates:

o

Code Reviews:
o

Testing:
o
Hope to have you on board with us soon!

Kind Regards,