DelyvaX – Next generation courier management system

After two years pushing Matdespatch.com’s same-day delivery to the market, the team decided to pivot Matdespatch to become Courier Services Aggregator. The Aggregator rebranded as Delyva.com. After 2 years with Matdespatch and 2 years with Delyva, the team pivoting again to try a new business. Base what the team has learned from the past 4 years experience in the courier business. This time the team decided why not we sell our system as Saas. From that point, DelyvaX was born.

I’ve been tasked to lead the product development team. The first thing we did getting back to the paper, brainstorming the idea of what DelyvaX should look like as Saas. The ideation phase! The only whiteboard, post-it notes and papers were involved in this process.

DelyvaX design deliverables consist of:

  1. Courier operation system web application
  2. Fleet mobile app
  3. Consumer web application
  4. Consumer mobile app
  5. DelyvaX marketing website

Then transferred the idea into a low fidelity prototype using whimsical.com. I love whimsical because it is the quickest and fastest to transfer idea/sketch into a low fidelity prototype. The first system we designed was the courier company operation management system. View the whimsical prototype.

Using whimsical.com for low fidelity prototype
some of the screens designed using whimsical.com

After some UX testings and iterations on the whimsical prototype, it is time to decide what platform and technologies should we use. We decided to use React with Ant Design as UI Framework for all our web application. Native Android app with Material Design UI Framework for Driver mobile app and React Native for a Consumer mobile app.

Then we moved on to the next step the UI Design part which is developing high fidelity prototype using Adobe XD. Aha, Adobe XD! The fastest prototyping design tool available on the market. Personally, I love Figma but considering that we will be going to design hundreds of screens for one system only and all of the team will refer to the design including designer, management team and developers, performance really matters.

The Style Guide of DelyvaX Courier Web App using Adobe XD base on Ant Design
Another screens from Adobe XD
Prototyping feature in Adobe XD really good and fast!
Again Adobe XD is really fast!

Then we move on to the development phase! With Adobe XD prototype feature, our developers are able to plan the system logic, database, API and front end architecture. For frontend team Adobe XD specification feature really helps them extract the CSS specifications from the design.

Adobe specification at works. Copy and Paste the CSS rules provided.

Another good thing Adobe XD is it’s free and available across platform, available on Windows and OSX. View the Style Guide for DelyvaX Web App.

The Driver Mobile App

While the development team developing the courier I and my design team members started to design DelyvaX’s Driver Mobile App. The use of the app is for riders to manage their assigned task and orders. We choose Google’s Material UI as a design framework to start with.

High Fidelity Prototyping using Adobe XD
Designing 173 Screens with prototype flow
Orders management modules

View the app on Play Store.

The Consumer Mobile App

The last thing we designed for DelyvaX environment was the Consumer App. A super app which Consumer be able to order multiple services under DelyvaX eco-system.

180 screens with 11 Modules
One of the delivery booking flow we proposed

View the app on Play Store.

DelyvaX Website and Landing Page

This is the first thing we launched even before the system is ready. To gather interest and view feedbacks. View the website.

DelyvaX Website