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:
- Courier operation system web application
- Fleet mobile app
- Consumer web application
- Consumer mobile app
- 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.
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.
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.
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.
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.
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.