A B2C white-label app for vehicle inspection and valuation
Reemaq is an Australian company providing digital solutions in the automotive industry. The company is focused to help companies such as eBay, Avis, Manheim, and others to inspect their vehicles, manage sales processes, digitize online auctions, get fleet insights, and more. Established in 2012, Reemaq now manages 100k+ vehicles yearly and has clients in the UK, Spain, France, Denmark, Germany, Ireland, and Australia.
In 2019 Reemaq was in a need of a B2C mobile product to help businesses gather data on vehicle inspections and valuations. They wanted it to be a white-label app enabling automotive companies to create configurable, extendable inspection processes and perform other services as per their customers' requests.
The challenge was to make an app easy-to-use for those who might not know how vehicles function and how to properly request their inspection.
Solution
Our designers made the vehicle inspection process guided in the app.
Scope of work
We built an MVP delivered to both iOS and Android platforms. The inspection process structure and other services in the app were agreed to be managed through the web-based Inspection Portal configured for every client individually by REEMAQ.
Team
Project Manager
Xamarin Developer & Team Lead
Xamarin Developer
UI/UX Designer
QA Engineer
Duration
December 2019 - ongoing
Xamarin.Android
Xamarin.iOS
XamarinUITest
.NET
MVVM Cross
Scandit SDK
NUnit
The Process
We established three standup calls per week with REEMAQ people for getting updates from all team members, design discussions and demos.Â
In this way, all change requests and improvements from the clients have been Inspection history list implemented in time, and we were always in sync on the issue of the app-API interaction approach since the API has been developed by the REEMAQ team.
We’ve divided a car into major segments to make malfunction detection more convenient. Within each segment, there’s a full list of vehicle parts and detailed info on them, which helps the reports be as detailed as possible.
The app data is then sent to the server for further processing by the special technical matrix to create a damage report and a repair cost estimation. The user can review and print out the report right from the app. We’ve also implemented electronic signature functionality, which gives the document a legal status.
In 2018, over 150 specialists in 15 locations in Australia alone were using the Reemaq-Inspect apps to make 316 vehicle inspections per day on average.
The app allows users to take and edit photos, this feature caused a memory overload on certain Android devices. We've solved that problem.
One of the important features we added after the initial release was the car/bike salvage booking process. We’ve added the ability for users to specify the damage done to their vehicles.
With the rising success of the app, Reemaq Software noticed that in different countries people use different devices to work with TechInspect. For instance, in Thailand users preferred iPads, and in Great Britain, they’d go for smartphones. We’ve made improvements, so screens of various sizes and proportions could accommodate the app comfortably.
Our web application company designed the app in a way that would allow Reemaq Software to manually set up features available for specific company users.
Development Details
Functionality
The REEMAQ-INSPECT MVP contains the following features:
The inspection service (with more services to be added later)
Odometer readings tracking
App settings
Configurability
For the inspection services, all steps and data were designed to be configurable by REEMAQ via the API:
- a step to take photos of the vehicle from different views
- a step to track mileage value and odometer photos
- a step to add info on tyres and their condition
- a step to add damage details for each vehicle side when needed
- a step with checkout depending on the damage costs provided from the automotive company
- a custom inspection step containing any number of fields of different types (a short or long text entry, a single-choice or multi-choice selection, and others).
Image processing
One of the requirements for the app was to show detailed vehicle images and let the user capture the damage by tapping the damaged section.
To address it, we use vector images instead of bitmaps and thus also decrease their size noticeably. Then, we developed an algorithm analyzing the info in the images. With it, the user can specify the selected detail and different theme colors and styles may be used to show the accordant status of each vehicle’s sections.
White-labeling
The white-labeling requirement made a huge impact on the app architecture and EGO came up with a few technical decisions on this matter:
A theme mechanism. With it, the necessary colors and interface elements can be retrieved directly from the API to build an app made in the client's style.
A configuration file. Containing icons, images, texts, and even code parts, it helps automate the process of app assembling (and reassembling) for different labels and companies.
Component typization and structure flexibility. It enables the app to easily reflect any changes on the server part and get its functionality extended with any number of additional steps or questions in the inspection flow. In the future, it will also help add new services to the app as well.
What's interesting
All the data entered and photos uploaded by the user are then sent to the automotive company's server via API. To make this process as smooth and faultless as possible, we've implemented a background retry service. It validates issues, reacts accordingly, and sends notifications. In this way, the inspection data gets eventually sent to the server in any case.
Initially, we were hesitating whether we should go with Xamarin.Forms or Xamarin Native. We made a research that eventually showed Xamarin.Forms fits the scope better, especially considering the fact that the business logic and the UI are expected to be the same for both mobile platforms.
When the client approached us, they had their own wireframes designed for the tablets. Our designers simplified the layouts and adapted the design for mobile phones. Speaking of UX/UI, our team also optimized the content representation on every screen, restructured the vehicle inspection process, reworked the damage panel, and simplified the damage input operations.
So our designers also paid a lot of attention to empty screens, error and tip copy, and animations to ensure top-tier app responsiveness.
REEMAQ-INSPECT is now available for beta-testing on both Android and iOS platforms with mocked data which shows all the features and perspectives of the application for potential automotive companies in the UK and Australia.
Tech stack and tools:
Xamarin.Forms
MVVM Cross
NUnit
REST API
Bitbucket
GitLab
GitLab CI/CD
Backend
Language
PHP
JavaScript
Python
Terraform
Framework
Slim (PHP)
ExpressJS (JavaScript)
Django (Python)
Libraries
Stripe
Google SDK
Django Rest Framework
Facebook SDK
Firebase
Propel
Unit tests
Django tests
Coverage
Services
Google Cloud + Kubernetes
Sentry
Graylog
Technologies
RabbitMQ
Docker
Databases
Redis
MySQL (Read + write replicas)
Frontend
Language
JavaScript
Framework
ReactJS + TypeScript
NextJS
Libraries
Redux
WebPack
i18n
Sentry
Stripe
Unit tests
Jest
Mobile
Language
Typescript
Dart
Framework
React Native
Flutter
Libraries
Mobx
Redux
Error monitoring
Sentry
Sentry
