The Move App

A transportation app that connects delivery providers and consumers.

Description

The move app is a A transportation app that connects delivery providers and consumers.

Tech stack

Backend:NodeJS, ExpressJS, NextJS, RESTful

Frontend:React, Redux, AntD

iOS:Swift, XCode, UIKit, RxSwift, MVVM, SQLite, CoreData, In-App Purchase, Local Notifications, REST API

Our role

UI/UX Design, Backend, Mobile Development, Web Frontend

The Challenge

1. We needed to create a UI that was equally accessible in the office, in the car, and outdoors. We also had to make the UI contrast enough to make it readable in sunlight and at night.

We took our client’s brand book as the basis for our app basis, which gave us a clearly defined color palette. Combining colors from the brand book, we created a palette of primary, secondary, and auxiliary colors.

While designing the app, we used only native elements for Android platform, which made it possible for the product to be minimalist and convenient without increasing the cost of development.

2. Next, we needed to decide how to organize information so that transportation providers could quickly process dozens of orders.

As a result, we designed the main screen with three sections – Search, Quotes, and Deliveries. Users can switch among them by swiping. On the main screen, we also implemented quick access to delivery card filters and the notifications section.


Features

-Maps.

To make the user experience more convenient for shippers, we added a map with routes that shows the pickup and delivery points. We used the Google Directions API to build routes and implement custom pins to make the map design correspond to the rest of the app.

-Payments and card scanning feature.

To help users quickly enter credit card details, we've implemented the card recognition feature. It lets users scan the credit card surface and automatically add the card number to the system. We used the Smart Code Engine SDK to add such functionality to the app.

-Chats.

What if a shipper wants to contact with their transportation provider immediately or a transporter has some questions for a shipper? We decided that it would definitely be worth having chat functionality in the app, and we used the open source socket.io library to implement it.

Building the app architecture

To keep the business logic separate from the view logic and to implement the MVVM (Model-View-ViewModel) pattern, we used data binding, which is an official Google library. Data binding provides better code readability and reduces the amount of boilerplate code.

But working with the data binding library does have one drawback: you may be tempted to move more and more logic to the view. But the view should consist only of logic that is responsible for updating the UI – nothing more.

Although the data binding library speeds up development, sometimes it causes us to spend additional time handling errors. Often, expressions from the layout are marked as errors, and the automatically generated BR class for binding resources or the whole binding package disappears. To solve this problem, we had to rebuild and clean the project from time to time.

Results

1.Business customers get an opportunity

to:

-View up-to-date shipment information anytime

-Download the needed transport documentation

-Have a holistic view of all shipments

-Easily and quickly fill in all order info

2.In turn, the client’s logistics agents:

-Get free from routine task

-Can focus on providing timely and high quality customer service

-Work more effectively, which leads to cutting operating