The common question I get — "So, what do you wanna do?". I'm someone who just want to design awesome stuff and be proud of it (simple as that!) My passion lies with designing and building user interfaces that are functional, simple and elegant. I believe design starts with understanding the problem, asking the right questions, and solving it.

Occasionally I teach myself HTML/CSS and some Javascript. In the past, I've delved in cartoon animation and served as a graphic design intern. When I'm not designing, I unwind by gaming or doodling (did I mentioned games are part of my source of inspiration?). I love collecting books on game artworks. Oh I bake and swim too!

Point of Sale (2016)

ROLE

Lead Designer

PROJECT TYPE

Web Application

OVERVIEW

Point of Sale (POS) is a simple web-based system offered as a microservice alongside a subscription billing platform. It enables retail merchants to perform over-the-counter transactions through a tablet, laptop or a desktop PC. It supports barcode scanning, cash drawer and a receipt printer. The aim of this project was to provide the minimal key features of what a POS system could do - which includes sales report, shift tracking, custom payment methods, item management, variable item pricing and more.

PROCESS

A team of 6 was set up for this project: 1 Product Manager, 1 Scrum Master + Developer, 2 Developers, 2 QA Testers and yours truly, the Designer. In this project I was put in charged for both the product design and a small part of front-end development. Being a ‘freshie’ in Javascript, it was a challenging experience; juggling between design tasks (product research, user flows, wireframe) and coding (UI front-end coding, feature builds) while running within a 2 weeks sprint for about 3-4 months.

Competitors such as Vend and Squareup were my main inspirations and references on POS systems.
Also from my frequent visits to local cafes, I got to know about Storehub, a local POS system that’s been widely used by cafes around here. In addition, our Product Manager had a background experienceworking with POS systems, so we both worked together on gathering feature requirements on first building a minimum viable product (MVP) for our POS microservice. Frequent discussions were had among us to discuss about the features and technical possibilities.

My workload and time was tight! So I would usually start with a simple rough sketch on the flows (e.g. sales transaction) for myself and the team to visualise how certain features work - on paper or whiteboard. Then next if the team requires, I’d create wireframes to help visualise how the end UI could look like, and occassionally I’d attach them with ID labels for the Testers to run their Selenium tests. Prototypes were created directly by coding with most UI elements directly from Bootstrap (I left the CSS customisations as the last priority). The team prioritised feature developments in order to get things working first - hence I allocated more time on learning Javascript and Angular, also understanding how API works (front-end dev was my new KPI that time). Fellow team mates were a great help!

Bee.bo (2015)

ROLE

Lead Designer

PROJECT TYPE

Mobile Native Application (iOS)

OVERVIEW

Bee.bo is an e-commerce marketplace mobile app connecting users with local merchants by offering competitive deals and offers on activities, travel, goods and services in Malaysia. Users may register as a Bee.bo member, browse and purchase deals in the form of vouchers - and redeem by scanning the voucher’s QR code at the merchant’s store location. In the early stage of Bee.bo’s business concept, “Bee.bo Points” serves as an in-app virtual currency to purchase deals; whereby the points are purchasable with credit card or bank account.

PROCESS

In the beginning I was given a very brief overview on what Bee.bo’s concept is by the Product Owner. The rest were up for us (a back-end developer and yours truly) to come up with the content and user flows. From ground up I’d start by compiling key features or content I could think of. References I found were similar competitors such as Manis and Groupon. Then I drafted an early sitemap of the app for us to get a high-level view of its features and flows. Quick validation on how the app works and technical possibilities can thus be carried out with the PO and developer before I jump to in-depth design tasks.

PROBLEM

Eventually the scope of this project progressively became bigger. The PO later added a requirement on a “Referral Program” where users could invite their friends through Facebook or email to signup and get rewarded with cash. In regard to the action of redeeming the voucher, a specific requirement was to have the interaction of sliding left to right to prompt the “Use Voucher” call to action button - which personally I find it unnecessary, but it could be a nice way of preventing users from accidentally tapping to redeem (and tapping back), whereas an extra gesture of sliding could provide a more intentional decision instead.

Kam Lun Tai (2016)

ROLE

Lead Designer

PROJECT TYPE

e-Commerce Website

OVERVIEW

Kam Lun Tai is a famous local food manufacturer that specialises in mooncakes, as well as other traditional Chinese food products. This project is to redesign its existing product website to an e-commerce website where customers are able to purchase mooncakes online.

PROCESS

This project's requirements and some wireframes came directly from the client; including specific colour pallettes that signifies elegance, and oriental graphic patterns as backgrounds. It was a straight-forward process (in a short timeframe), there were some hiccups of sourcing for its products' high resolution images; and other supporting images, so some improvisations and sourcing for stock images had to be done.

Gate Access (2015)

ROLE

Lead Designer

PROJECT TYPE

Windows Application

OVERVIEW

Gate Access is a Windows application that manages 2 gate access systems - Falco or Inner Range’s gate controller configurations as well as monitoring a log of merchant’s customer access. The user base of this service are mostly gyms and fitness centres. This is part of a microservice that is offered alongside a subscription billing platform. My objective in this project is to redesign the existing application UI from a default Windows application UI to my company’s brand identity.

Note: Actual company logo here is replaced with a mock logo instead for legal obligations. Colour palletes remains the same.

PROCESS

Having no idea how the gate access system works, my first step was to find out everything I could about this existing application at that time - thanks to the help from a QA Tester (who tested the existing app frequently) and the Support team (who troubleshoots the existing app frequently), I could get an overview of the application interface, what does what, how does the client usually use it, insights and comments from the Support guys what are the common issues the clients faced with the existing app.

After a crash course on this app and some screenshots, I started analysing what could be improved - Are the access point to all the key configurations obvious? What are the most important configurations to set up this application during first time installations? Any redundant fields? Does the logs message makes sense? Etc. Once I had some rough wireframes and discussions with the Developers, I started to dive into the aesthetics. While on that, I tried not to make a drastic change to the UI - so current clients who were familiar with the existing app will not be too alienated with a facelift.

PROBLEM

Any changes I planned to make to the configurations I had to first validate with the Developers - but I kept most of the fields intact, mainly shifted and consolidated certain settings together into one section to minimise the clicks. Throughout the process I also found that certain fields are required to be displayed in a certain way and the same goes to action buttons too (e.g. Clicking “Test Connection” visually does nothing but apparently the Support guys had a need for that button to test the client’s connection remotely or something like that).

I’d admit at times I tend to overdo changes to the app to be as user-friendly as possible where a non-technical client who runs a first time installation would be self-guided to set everything up by themselves seamlessly - which is not entirely necessary and true as the main objective of this project is mainly to just design the app interface according to the company’s brand identity.

Hence certain feature improvements couldn’t be done due to a limited time frame - Plus the main Developer was fairly new working with cloud-based server, so feature enhancements had to be minimal.

Corpick (2013)

ROLE

Co-Designer

PROJECT TYPE

Prototype for Mobile Native Application (iOS)

OVERVIEW

Corpick is an e-commerce website which sells creative designer items. Its initial idea revolves on the gifting concept; where customers are able to purchase an item, select a packaging design, customise a physical or virtual greeting card, and deliver it to a friend as a special gift. This project focuses on its native mobile app prototype for the iOS.

PROCESS

I was a co-designer of this project along with another designer, but I took lead for this mobile app prototype while my colleague continued focus on the website. The aim for this native mobile app was to port its website features over, which includes the e-commerce browsing/purchasing features, card customisation, user profile and wishlist management.

PROBLEM

Some hurdles I faced during this project was figuring some of its unmapped feature flows — Card Customisation (design a card seamlessly during item checkout), and Gift Collection (adding received Corpick gifts to profile) to name a few. It was a simultaneous process working out the user flow for both website and the mobile app as these two were in development at the same time (the project was planned as a full-featured release project instead of building a MVP phase-by-phase release).

Another issue I faced constantly was the expectations of the stakeholders to see high-fidelity visuals upfront and they tend to nitpick on certain UI elements (font types, buttons, paginations) instead of focusing on solving the problems first (business direction, requirements, user flows). I'd say it was an unfortunate situation where UI was misunderstood as UX. However, by working closely with the Developers we tried our best to map out the flows and I managed to deliver an interactive prototype to demonstrate some end-to-end process.

Project Title

Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!