ShipMe app

Mobile and web apps that help users send, track and deliver parcels.
Technologies: Swift, Kotlin, Laravel, Angular
Mobile app development
Mobile app design
Web development
Web design
Two screens from the ShipMe application. The first screen displays the "My Shipments" view, while the second screen shows the process of creating a new shipment.

Project Idea

ShipMe is a middle-east all-size shipping service operating as a delivery auction in Saudi Arabia, one of the major markets in online retailing. The idea of the project was to let customers post requests for shipments of different categories, whereas transporters would bid on each request.

The reverse auction bidding methodology allows customers to benefit by getting the lowest price available and provides carriers with a larger client base.

Client’s goal

Our client’s goal was to build a shipping service app that would connect customers and carriers (both individual and corporate shippers). The app had to make the delivery process simple and transparent, as well as convenient for four roles, including corporate managers.

Milestones

User Flow

The primary feature of the ShipMe shipping service app is its ability to connect customers with various types of shippers. To provide a clear understanding of the user experience, we began by outlining the user flow for different roles. This enabled us to gain a comprehensive view of the interfaces and processes involved in each step of the journey.

Roles

The profiles were built for four roles: customers requesting a delivery, individual shippers, corporate shippers, and corporate managers.

Customer

A customer only needs to leave the name and surname and verify the phone number.
That’s all a customer has to do to start placing requests on a platform. After choosing the best offer, a customer can track a parcel and communicate with individual or corporate shippers in the chat.

All are performed within a single app used by shippers as well.
An easy registration process offers to choose between two roles at the start.

Individual shipper

Individual shippers upload documents: ID and driver’s license. They can choose a car type from the list and upload a vehicle’s photos. They can also write a short description in the profile to attract users’ attention.

They don’t depend on a company and create individual profiles. Shippers can view the list of available requests and can bid on them by offering the best prices. After the client chooses the best offer, the shipper can pick up and deliver a parcel.

Corporate shipper

Corporate shippers register profiles by filling out details of the company they work for. As well as an individual shipper, a corporate carrier can attach extra info about the type of vehicle.

The difference between them is that corporate shippers cannot take orders if they are not assigned to them by a manager. Corporate shippers are only involved in the process of delivery and have access to the map showing the end point of the route.

Corporate administrator

Unlike shippers and customers, an administrator uses a separate web dashboard. A manager can make offers and respond to applications. Corporate admins assign deliveries to the shippers and edit company details such as company name, contact phone, company address, and license number.

Managers can also add new drivers, edit their information, apply filters in vertical navigation, and communicate with the customers if any issues occur.

A screen displaying pending orders. On the left side, there's a menu with the following options: "Pending", "Responded", "Assigned", "Completed", "Drivers", "Account Settings", and "Logout". The screen shows orders, each with their inventory numbers, bids, and a "Place Bid" button.

Parcel delivery progress

Branding

Logo

The logo in branding colors depicts the first letter of the shipping service app’s name with a broken line following its curves and making it look like a road.

UI Kit

We make sure to follow the guidelines of the platforms we build for and prepare UI kits in case a client plans to expand the app in the future.

Development stages

E-commerce is one of the major factors driving the market growth in Saudi Arabia. Therefore, the country is among the leading Middle-East markets in online retailing. Taking these premises into account, we had to make an app whose functionality would withstand tight competition.

Stage 1:

Collaborated and Planned

Collaborated and Planned

The development team worked closely with the ShipMe company to establish app requirements and features, tailoring them to the Saudi Arabian market.

Stage 2:

Designed
the App

Designed the App

Designers created wireframes with the core functions and user-friendly interfaces, incorporating feedback to ensure usability for the web admin panel and a mobile app.

Stage 3:

Implemented and Integrated

Implemented and Integrated

Developers used various technologies to build and integrate the backend and web and mobile apps, ensuring a seamless user experience.

Stage 4:

Tested
and Iterated

Tested and Iterated

The team conducted rigorous testing and made necessary improvements based on feedback from the ShipMe company.

Stage 5:

Deployed
and Maintained

Deployed and Maintained

After meeting quality standards, the app was deployed to the app stores, and ongoing maintenance and updates were provided as needed.

Mobile app

Development

We used native languages to build a shipping service app for ShipMe: Swift for iOS version and Kotlin for Android. Both versions utilize a range of technologies to create a practical and user-friendly solution.

Kotlin and Swift programming languages logos

To better understand user interactions and address potential issues, we integrated Firebase Analytics and Crashlytics into the app. Also, we implemented Google Play Wallet to facilitate secure and convenient payment processing.

Integration of Google Maps allowed for accurate location tracking, optimized routing, and easy-to-follow navigation, further enhancing the delivery process.

Additionally, both versions of the app incorporated Reactive Extensions (Rx) for effective data handling and improved response times, which contributed to more efficient delivery process. These combined technologies offer an enhanced user experience and streamline the overall parcel delivery workflow.

Key features

Language choice

The app is available in two languages: English and Arabic.
about
about

Dashboard for customers

After the registration, a user sees a dashboard. It allows customers to filter shipments by status, customize a profile, or create a new shipment.
about
about

Detailed information about the parcels

The user has access to complete information about the shipment. If needed, a customer can open a chat to get in touch with the shipper.
about
about

Adding a new shipment

The process of adding a new shipment is standardized to make it simple for both parties involved. The required fields provide shippers with all the important information.
about
about

Shipper’s screens

In case of choosing a shipper’s role during registration, a user gets access to tracking orders functionality.

Web app

It’s a dashboard for corporate shippers. There they can accept requests, manage couriers, track deliveries, and communicate with customers.

Development

The web management dashboard was built with Angular. Its powerful data-binding capabilities allow for real-time updates and automatic synchronization between the dashboard's view and underlying data models. This makes it easier for shipping managers to stay up-to-date with the latest information on requests, courier assignments, and delivery statuses.

Moreover, Angular's modular architecture supports the separation of concerns and promotes better code organization, making the app more maintainable and scalable. This is particularly valuable as the shipping platform expands and evolves over time.

We selected Angular for the shipping managers' web app due to its robust capabilities, maintainability, scalability, and efficient development process, ensuring a top-notch experience for corporate shippers while managing their delivery operations.

A logo of Angular framework

Key features

Simple steps

A fixed sidebar is intuitive and splits manager’s responsibilities into four sections replicating a parcel delivery process: pending, responded, assigned, and completed. There are also spaced menu tabs for managing drivers, account settings, and logout.
Proofread: Admin panel’s menu positions: "Pending", "Responded", "Assigned", "Completed", "Drivers", "Account Settings", and "Logout".

Pending orders

Managers can choose the orders and place bids by filling out a short form with all necessary info: they set an expected delivery date, price for delivery, and can leave a short message for the customer.
The frame demonstrates a process for placing a bid, where a user can choose expected delivery date, set price, add a short message, and submit the bid.

Managing bids

After the bid is placed, it still can be changed or canceled in case a shipper and a customer haven’t reached an agreement.
The frame demonstrates the process of canceling a bid. It confirms whether the user is sure they want to cancel the bid. It includes "Close" and "Cancel Bid" buttons.

Managing drivers

Admin panel allows managers to track drivers, assign orders to them, and check their availability. All available drivers in the list have a green coloured icon, all unavailable ones are marked with red color. This allows a manager to make quick decisions regarding customers’ orders.

A page of the admin panel for managing drivers shows a list of drivers with their names, car types, phone numbers, and availability statuses.

Checking calendars

To check the days available for delivery, the manager can open the calendar of a specific carrier. All free dates will be marked in green. In the top menu, the admin can tick off the days of the week on which the delivery is scheduled.
A driver's availability calendar with selected days. Days when the driver is available for delivery are marked green. There is a "Save Changes" button.

Backend

As well as for other projects, we used our favorite Laravel framework for developing the ShipMe server side. Laravel is a robust and efficient PHP framework, providing a streamlined and structured backbone for the development process. The choice of Laravel for this application offers several advantages:

Scalability

Laravel is a versatile framework that allows us to easily scale the apps up or down to meet the varying needs of customers, individual shippers, corporate shippers, and corporate managers.

Security

The framework offers built-in security features, which can help protect user data and transactions, ensuring the safe handling of sensitive information such as registration details, bidding, and communication.

Eloquent ORM

Laravel simplifies database interactions, streamlining data management, leading to a more efficient handling of users, orders, and bids within the shipping service app.

MVC Architecture

The framework promotes a well-organized and maintainable codebase for the app, making it easier to implement and manage the complex functionality required for a shipping service app.

Routing and Middleware

Another benefit is its robust routing system and middleware implementation that can effectively handle various request paths associated with the diverse features and roles.

Results

Project Team

Time to develop

$80,000–$150,000
Approximate cost
Ready to develop your next application? Trust us to deliver a robust app tailored to your needs.
THANKS
FOR WATCHING
Ronas.IT
Design & Dev Team
2023
We use cookies to enable necessary site functionality, to provide the best possible user experience, and to tailor future communications. By using this website, you agree to the use of cookies as outlined in Ronas IT’s online Privacy Policy