Featured

Hello world!

I am a UX Designer and facilitator with 12 years of experience in Interaction design and visual design. I help companies align brand, customer experience with their business goals. 

Currently working at Delyva Sdn Bhd as Product Lead. Im focusing on developing DelyvaX, a software as a service for courier, fleet and on-demand services to manage their orders, fleets and customers.

My strength in design ranging from UX Design, UI Design, Product Development, Graphic Design, Identity Development, Web and Mobile. I can code with CSS, HTML and JavaScript! Web Rocks!

My favorite tools are Adobe XD, Photoshop, Illustrator, Whimsical, Brackets, Fork (Git), Airtable and Miro!

Keep it touch!

Delyva Courier Bag – Delivering the experience

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

A3 Size Courier Bag
The best seller! A5 Size Courier Bag

Delyva Brand Guidelines 2020

Design Team at Delyva releases the latest Brand Guidelines. The new brand reflects the company image on focusing on the B2B segment while retaining the current B2C customer. View the Brand Guide.

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

Delyva.com website redesign

I was given a task to redesign delyva.com. This is an interesting project. Sales and marketing teams were involved in this project.

The old website design. Design with startup vibes and feel.

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.

Brainstorming deck. Brand Positioning, User persona and communication strategy.
Initial idea or moodboard for the new website. Colors, font, copywriting and images used reflected from what we discussed in the brainstorming session.

At the end of the Design Sprint, this is the final homepage we proposed. Visit the website

The Homepage / Landing Page
The Pricing Page

Delyva.com booking and topup feature improvement

This time I have been assigned to improve current Delyva.com booking feature. We did one-week Design Sprint and another week of development. So two weeks from design to public release.

Start with paper prototyping and testing using Wizard the Oz method. Finally, we asked three random users to test the product at the end of the sprint.

Heatmap from the old version form using Hotjar.com

After the paper sketch, we transferred the paper prototype to greyscale prototype using Adobe XD.

Booking features grayscale screen and flow
Topup features grayscale screen and flow
The new booking form
The new topup flow

Users like it a lot. And the one-page booking form also one of the reason users choose Delyva.com over other competitors.

IDEO.org Introduction to Human Centered Design Course

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.

IDEO’s HCD phases:

  1. Inspiration
  2. Ideation
  3. Implementation
Team members from Malaysia, Singapore and Indonesia
The post it wall for ideation phase
How Might We question from the design challenge
Storyboard from prototyping phase
Rapid Sketching on paper for Prototype Phase

Mastering Vue.js with Vue Mastery

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.

Book Reading – Dan Ariely’s Dollars and Sense

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.

Small Change: Money Mishaps and How to Avoid Them eBook: Dan Ariely, Jeff  Kreisler: Amazon.co.uk: Kindle Store | Small changes, Inspirational books,  Quote posters