Case Study: Mobile Meter Reading App
The mobile meter reading app used to capture read data and photos to send back to the Veolia metering system.
This app was designed and developed for the SourceOne Inc (part of the Veolia group).
The idea of this blog post is to describe the goals of the project, and how we achieved them using Flutter, in a few weeks.
Even so, the app was designed for the internal use and usually, in such cases, nobody cares about the design, we believe all mobile apps are developed for people and for us there is no difference if the app is internal or publicly available for millions. Aesthetic and clean design is just a must-have requirement by default for all mobile apps we develop.
Requirements and Design
The first step is always the same, for all projects. We need to understand the business needs, requirements for the project, and how the end-users will use it.
The mobile meter reading app is used every day, the whole day. So the main goal for the design: We need to make the app simple and clean, minimum of the "design". The app must be optimized from the functional perspective to help people do their job.
The next challenge was to support all various devices our client uses. Android/iOS, phones, and tablets, and, more to say, we wanted to support tablets' landscape mode to give the end-users additional benefits of using the app and speed up meter data readings.
It is a challenge for native mobile development because, on practice, it will lead to the development of 4 apps inside. But not with Flutter.
Flutter allows you to have just one codebase for both Android and iOS and quite easy support of the specific changes (adjustments for the app' layout) for the tablets in landscape mode.
For the tablet landscape mode, we split the screen and let the end-user use it more effectively.
And for the selected period you can effectively working with a list of meters.
So the end-user can quickly go through the list of meters, enter the data, save and continue to the next one without switching the context.
For those who prefer using dark mode, we supported it as well! (How many utility apps support dark mode? We do! Because for many users, it is just easier for their eyes).
We were not asked to support it. Our clients should not ask for such things, it is our duty to guide them and suggest the best options.
All keyboards are adopted to the edit field types.
The mobile app supports embedded search to speed up meters navigation. The end-user also can use the app to quickly scan the barcode of the meter to find it by the internal ID.
The user can take photos or attach them from the gallery. All such operations are covered by the corresponding permissions checks. If any permission is not allowed, the user will be notified.
All design elements were developed according to the created Design System, so all paddings, sizes, margins are the same, across the app, and consistent between the same elements.
Also, the developed app supports biometric authentication as well as pin-unlock for the old androids devices without fingerprint support. The motivation is the same, we need to speedup what we can, in this case, we simplified the second login process and reduced the time required to sign in into the app to see the data.
Mobile analytics
Yet another must-have thing that our clients shouldn't ask for, that just an industry standard to have the mobile analytics set up in the mobile app.
Flutter is already integrated with Firebase, so it speeds up everything dramatically.
Hundreds of events across the app.
We also set up an app distribution channel via Firebase, set up Crashlytics integration to catch all production issues and crashes. Also, one of the great things, we added tracking of the API calls time, from the mobile client perspective to let our clients keep an eye on those analytic numbers.
As a result, the end-users who actually use the app everyday send us the following feedback.
Tell <...> and whomever else worked on this app I can hug them all.
#sourceone #veolia #development #flutter #casestudy
iOS Version
Android Version.