PROFILE

Hello, I'm Mike.


I am a solutions designer.

As a UX/UI designer and web developer, I find joy in creating and innovating solutions that deliver world-class user experience.

With a strong sense of empathy, sharp creative instincts and solid cross-functional background, I design solutions that are not just usable and aesthetic but also help users feel delighted and accomplished after a day's work.

MY DESIGN PRINCIPLES

 

Everyone has a story.

We should never assume we know better than the next person. Every person we meet has seen, heard, experienced things we might never have. Through thoughtful observation and attentive listening, we learn from one another and our designs are better from it.
 

Creativity is a process.

We should not be caught up with making a masterpiece. Each creation is a work in progress and it involves lots of testing, feedback and iterations. Being open to change allows us to see creativity not as means to make things perfect but rather to make things better.
 

Design takes courage.

The fear of making mistakes can cripple us. Avoiding to disappoint others can turn us into perfectionists. We should not be afraid to take risks or we risk not growing. Sometimes, it is from our mistakes that our best selves and best works are born.
 

Don’t forget to have fun.

Always add that little extra gaiety to your work. The joy you bring to your work will reflect in every design that you make.

SKILLS

Design Tools

Sketch, InVision, Principle, MS Visio, Axure, Balsamiq

Methods

Interactive Prototypes, Rapid Wireframes, Hi-Fidelity Designs, Detailed Workflows, User Flows, Competitive Analysis, Stakeholder Interviews, Layout Information Architecture, User Centered Design

Coding Stack

HTML5, CSS3, JavaScript, AJAX, Bootstrap, ASP.Net, C#, MS SQL, Web Services

PROJECT

On-Boarding System for New Hires

MY ROLES

User Research, UX Designer, UI Designer

SUMMARY

I lead the design efforts to re-design the system that automates the entire business process workflow for on-boarding new employees and contractors.

 

 

 
 

PROBLEM STATEMENT

The system runs on outdated technology and is reported to have a lot of limitations and usability issues.

Management aims to migrate the system to a new platform and improve its user experience, strategy and design.

Old On-Boarding System
 

PROJECT GOALS

Re-design the user interface to give it a neat, clean and modern look

 
Improve usability for easier and more delightful on-boarding experience

 
Provide helpful tools to enhance user system understanding that leads to user confidence

 
Renew expiring contracts on time to prevent delays on resource availability

 
Use latest technology to provide best functionalities

 
 

APPROACH


 
Get complete understanding of the system process from the stakeholders and valuable insights on the user experience from new and experienced users
 

RESEARCH METHODS

 
 
 
 
Stakeholders Interviews
User Interviews
Task Analysis
 
 
 
 
 
Focus Group
Product Roadmap
Usability Testing
 
 

USER MINDSETS

Based on extensive user interviews, we could identify two main user mindsets

The Confused

"I don't even know where to start."

The confused needs guidance every step of the way. The fields can be ambiguous, the forms intimidating and the process complex.

They are able to complete the process with the help of more experienced colleagues, until they need help again for the next on-boarding case.

The Pragmatic

"It is something I can live with."

The pragmatic main concern is that they complete the on-boarding process correctly so that that their new hire can start on time. They see the process as a task they need to finish so that they can jump back to their work. They find no delight in using the system.

PROTOTYPING

 
These exercises helped formed a strong foundation to build the initial prototype.
 
 

FEATURES PRIORITIZATION

 

With the help of user feedback, collaboration with the technical lead and further guidance from the stakeholders, I enhanced the prototype and focus on the features that will best contribute to the project's goals.
 

Dashboard


Minimized menu navigation gives more space for data. Data rows are grouped in meaningful categories (as opposed to the usual linear presentation) for a quick view of overall details.

A clear and hard to miss call-to-action button for the most used function is also strategically added.
 

Case Progress


Users are presented with the complete workflow process so case history and next steps can easily be tracked. Links to assigned teams for each step are also shown so users can easily reach out to them if needed.
 

Contracts Renewals


A separate dashboard and notification for expiring contracts is added so users will see them in plain sight. Functions for quick renewals are also provided for faster processing.
 

Multi-step Form


The too long/complicated, multi-column form is divided into a multi-step form to affect a quick and easy feel to the process. This strategy also instills a sense of rapid progression and accomplishment as the user successfully completes each step.
 

Smart Help Guides and Defaults


Relevant help guides are added to selected fields that can be ambiguous to users. Useful default values help minimize typing and reduce errors to increase productivity. The number of fields is also reduced by removing unnecessary, redundant or can be combined data.
 

Inline Validation


Live inline validation is provided to allow users to quickly locate and fix the error while the context are fresh in the user's mind - and not at the end of the form when users are about to submit the case. Adaptive, as oppose to generic error messages, also help reduce user's error recovery time.
 

Positive Inline Validation


An encouraging visual feedback is also provided to assure users that their input is valid. This also adds a sense of delight and progression to the whole typing experience.
 

Data Summary


A final data validation and an option to make last minute changes before the case submission increases user confidence of a successful process completion.

LEARNINGS

A functionally working system does not necessarily equate to user success

The first developed system successfully performed the functions it was designed for. But if we count in the delays in processing due to slow, incorrect and frustrating user experience, this also have an overall effect in the productivity and confidence of the users.

A right balance between the functional requirements and user experience strategy should always be considered in any system implementation. It helps to remember that once the development is completed, it is the start of the day-to-day experience of the users with the system.
 


 

Other Selected Projects...


ENTERPRISE PRODUCT MASTER

The Story

The system is designed to maintain the company's repository of more than 2,000 company's products and components.
Order management users however were not comfortable using the new system because they were too used to creating new versions of the products in Excel application.
 

The Challenge

Users are not using the new product
 

The Solution

I watched how users perform their task and figured that although copying and pasting rows of product data in Excel is very convenient, manually inserting the new data e.g. product versions can be cumbersome and error-prone. This challenged me to design the system to be more efficient than using Excel.

I created a smart copy method  which allows users not just to copy and paste data but also automatically insert the new data, allowing users to complete their task in just 3 clicks - select, copy and submit data.
 
 
 
 

The Results

The new design eliminated manual errors in data preparation and remarkably improved efficiency in maintaining the company’s products and components.
 


ORDER PROCESSING A TO Z

The Story

The work order form requires too many details which proved burdensome to the Sales Operations team members to fill.
 

The Challenge

Users are not engaged with the product
 

The Solution

Through user interviews, I learned that users are overwhelmed seeing a big order form and they feel it is a huge effort to complete this task.

With this understanding, I broke down the form into small and simple steps. Each step is designed to give users a sense of flow and completion, allowing users to feel connected with the product.
 
 
 
 

The Results

Users responded positively on the new design as it simplified an otherwise complex workflows and activities, greatly improving the time it takes to complete the order.
 

CAREER

2007 - Present, UX/UI Designer / Senior Web Developer

TIBCO Software Inc, Palo Alto CA
Orchestrated all aspects of the UX/UI design of the company's internal web applications and collaborated with technical teams for implementing effective and engaging solutions






2002 - 2007, IT Consultant

ABS-CBN Broadcasting Corporation, Manila PH
Technical lead for converting functional and technical specifications into usable solutions






1995 - 2001

BS Computer Science | University of the Philippines
Thesis: Government Business Services Online
Awarded, Meritorious Achievement in Writing an Outstanding Thesis