We redesigning our courier bag to engage the customer at the emotional level by using design. We placed an avatar with a smile and a big copy that says “It’s for you!” and its wrap with calm blue wrap. Who doesn’t like it? We print 20,000 pieces and the courier bag sold out within 6 months! Get the courier bag on Shopee
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.
I was given a task to redesign delyva.com. This is an interesting project. Sales and marketing teams were involved in this project.
We did the ideation phase with strategising brand positioning and value proposition of Delyva.com. This time the team decided to change Delyva.com market segment from B2C to B2B targeting medium to large-sized businesses to use Delyva.com. Then we did competitors analysis.
We decided to do one-week Design Sprint for this project. Involving myself, one designer, a salesperson and head of marketing.
At the end of the Design Sprint, this is the final homepage we proposed. Visit the website
During the MCO I had the opportunity to signup for 8 weeks IDEO.org Introduction to Human-Centred Design Course. It was very good and fun. I joined one of the ASEAN group consists of team members from Singapore and Indonesia. We did design challenge on how to improve immigrant online vocational education.
Another MCO in Klang Valley and I decided to learn coding Vue.js with Vue Mastery. The course structure is awesome and the videos and screencasts really help me understand Vue development, with Vue CLI, Vue Router, Vuex (State management) and API with AXIOS.
I really like how Dan Ariely explaining irrational behaviour in his TED talks and youtube videos. But reading his main big book “Predictably Irrational” is quite hard because of the heavy content and because of me, not having enough time to read the tick book. Then I found this book and it is structured for easy-going ready like me.
The main discussion of the book is about how irrational human can be when dealing with money and finance. Really this book was an eye-opener for me and it teach me a lot about financial planning and decision on strategy-wise.
After reading the book I implemented it on my budgeting and my spending thoughts and process and it really works! I’m able to save, which is something very hard for me to do in the past.