FlowMSP, UX UI design case study
FlowMSP, UX UI design case study

Android, Backend, iOS app development, UX/UI May, 2022

Flow MSP - Water


Services provided

Business analysis
UX/UI design
Android app development
IOS app development
Web development
Quality assurance
Project management

About the project

About the project

FlowMSP is a company that provides an industry-leading pre-incident planning software platform for the fire service and has successfully cooperated with Volpis for years.
Having worked on the app for the fire services, Jason, the founder, noticed that water services are tightly connected to the fire services.
Moreover, the market seemed unprocessed: the majority of water service providers used no common database; most of the work, like maintenance, and calculations, was done on paper and was prone to human error. The market was waiting for the initiative. And FlowMSP accepted the challenge of conquering it.

About the project

Challenges

Solutions

The business challenge was to understand the market needs and test the market with limited time and budget.

Volpis offered FlowMSP to develop an MVP version of the app to validate their vision and ideas on the market.

Every water service department has its way of managing the services they are providing. The industry lacks a unified approach, terminology, and workflows.

FlowMSP product team and Volpis’ Business Analyst prepared requirements based on the “golden middle” and repeating patterns, preceded by the potential customer interviews.

The product’s primary need was a need to manage tens of thousands of assets (hydrants, different types of mains, curb stop valves, shut-off points) on the map.

We built a map view using clusterization and filters based on the microsystems and interdependencies of water objects.

As a water network is a set of relations, the map objects could not exist standalone on the map. Our task was to display these relations without overwhelming the map.

We added active and inactive states for some map objects so that they could reflect active or inactive relations between map objects.

timeline time timeline time timeline time

Project Timeline

Implementation Roadmap

Project Timeline
Discovery pha Discovery pha Discovery pha

STAGES

01/ Discovery Phase

RoomMe project, Discovery Phase
RoomMe project, Discovery Phase
information information information

information architecture

The structure of the app

information architecture

01/ Discovery Phase


Wireframes

UI/UX Design UI/UX Design UI/UX Design

STAGES

02/ Product Design

02/ Product Design
02/ Product Design
Pink

#b04284

Orange

#efb34a

Green

#42b054

Blue

#2c62cb

White

#ffffff

Black

#222234

Aa
Nunito Sans Regular

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

02/ Product design


Final Design

Map view

Map view

Hydrant info & Maintenance

Hydrant info & Maintenance

UI DESIGN UI DE UI DESIGN UI DE UI DESIGN UI DE
bg-main
development development development

STAGES

03/ Development

03/ Development
03/ Development

03/ DEVELOPMENT

Technologies

We use the latest technologies to deliver user-friendly, scalable, and secure solutions as per your business requirements.


IOS
  • Swift Swift 5
  • SQLite SQLite
  • MVVM architecture MVVM architecture

Android
  • Kotlin Kotlin
  • MVVM architecture MVVM architecture
  • SQLite SQLite

Backend
  • Node.js Node.js
  • TypeScript TypeScript
  • node-js MongoDB
  • Redis Redis

Integrations
  • Google Maps Google Maps
  • AWS Services AWS Services
  • Firebase services Firebase services
bg-right
bg-left

Lets try the apps! Download now!

AWARDS & HONORS

Upwork Logo

Top rated company since 2015

Clutch top companies recognition emblem

Top mobile app development 2018

Clutch top companies recognition emblem

Top B2B company 2019

Say hello

Contact us to build the right product with the right team

    Message sent! Thank you!

    Send another message