Get Your App Together Workshop

Lucky to had a chance to attend a UX Design workshop by Hector Ouilhet. He is a UX Designer for Google, has a knack for technology design and he has worked on awesome projects such as Android, Sky Map and spends his time pondering how tech + art + design = happiness.

He talks about how can we as people teach technology to figure things out on their own;? From understanding our intentions to learning from each interaction, He talks about how we need to change our expectations (among other things) between people and tech to evolve our interactions with it.

The workshop teaches us to understand about creating an app prototype with simple everyday tools. Whilst focussing on the users needs and expectations we learned all about gathering real user feedback before you even think to write one line of code.

Sharing some of the happenings in the workshop.

Interaction with Hector before the workshop begins.

Russell Matsuo made the introduction and share a lot of his expertise and experience. He is an Interaction Designer at Google.

The task for the workshop is to create an app for Coffee Lovers. And huge part of the process is to practice the “Sprint” process of Jake Knapp. He is the principal author – led design “sprints” for Gmail, Chrome, and Google Search.

The “Sprint” process.

The tools.

Mapping the idea by interviewing people. Getting to know their personal background and their relationship with coffee.

Sketching all the information we gathered.

Brainstorming, deciding and making a story board.

Discussion and testing.

Restructuring the idea.

Re-test and Prototype.

Every process has its time and after finalizing the idea, we shared with everyone what we came up with. During the discussion, you will be surprise of how many questions will arise from real users that you never thought of when you are putting all your ideas.

The workshop time is limited but the core of it will give you the following:

  • Instead of jumping right into solutions, take your time to map out the problem and agree on an initial target. Start slow so you can go fast.
  • Group brainstorming is broken, but there is a better way. Work independently to make detailed options for possible solutions, then discuss, vote and optimize.
  • Avoid groupthink, endless debates and decision deferral by using voting and a Decider to make crisp decisions that reflect the team’s priorities.
  • Avoid developing ‘concepts’ – instead adopt a ‘prototype mindset’ and ‘fake it before you make it’ with quick and easy prototypes
  • Get your rough and ready prototypes into customers hands and observe their honest reactions in order to learn, adapt and optimize.

And the bonus take away?

You will get to know a lot of people with the same passion as what you have. There are always something you can learn from the people you meet every single day.

PCSO Lotto Mobile Application

This is a personal case study that I’m working on for PCSO Lotto Mobile Application.

The Philippine Charity Sweepstakes Office (PCSO) is a government owned and controlled corporation of the Philippines under direct supervision of the Office of the President. It is mandated to do fund raising and providing for funds for health programs, medical assistance and services, and charities of national character. The raised collections goes to the President’s Presidential Social Fund.

Sources of Revenue
Sweepstakes Draw
National Lotteries (Lotto)
Small Town Lotteries
Horse Racing

Idea behind the project:
I usually browse mobile application everyday and select one app that I can test to see how their ux and ui was designed. While watching The Ellen DeGeneres Show, the guest was telling a story about his grandpa’s addiction with Powerball (an American lottery game) which gave me the idea to look for lotto mobile applications. A lot of mobile applications are already available for Powerball and I thought, why not try Philippine Lotto instead?

Research and Discovery:
Only 1 app is available for iOS and 2-3 for android.

Both application’s main feature is just to show the summary result of the previous draws. As a user, I wanted to see more and I want an app which is a one stop shop for lottery.

Concept Development

There are 2 categories of games which are:

Paramutal Games

  • Lotto 6/42
  • Mega Lotto 6/45
  • Grand Lotto 6/55
  • Ultra Lotto 6/58
  • 4 Digit Game

Fixed Price Games

  • EZ 2



  • Sign up / Sign in
  • Account Profile
    • Profile Update
    • Ticket Records
    • Wallet
    • Winning Combinations
  • Draw History
  • Buy Tickets
  • Rewards
  • Game Rules
  • Settings
  • Push notification


Modelling Process (Swim Lane Diagram):

During the process of creating the flow, I realize that some features are not present, I went back to the sketches and added the additional process.

work in progress…

Visa Digital Payment Solutions Hackathon

Fri, Nov 25, 2016, 12:00 PM – Sat, Nov 26, 2016, 6:00 PM Dubai, UAE

The Challenge:
The goal is to create a digital payment solution that will have the most impact on the future of Dubai in 32hrs. Visa opened their API’s to leverage at least one Visa Payment Method API to create a digital payment application and Mobile Connect API’s for secure and safe authentication solution.

As UX/UI designer, I got to team up with front-end, back-end developer and quality assurance engineer.

The process:

After all the introductions from the organizer and sponsors, the clock started to tick for the race. First idea that came to my mind was a sensor base payment solution. No need to bring cash or show any card to pay for any transaction in any partnering store. Basically it something like,

Walk to the storeTake an itemLeave the store

The amount will automatically be deducted from the customer’s credit card account using our app which is installed in end-user’s mobile and with the help of sensor technology.

The idea was innovative but we needed to pause and have a second thought because going back to the criteria, the scoring will be based to the following:

  • The idea should be presented in a working demo. No slide-decks or power points will be allowed.
  • 2 minutes presentation and 1 minute Q&A from the judges.
  • Winning teams will be subject to a code-review for validation.
  • Execution, Impact, Creativity, Design and API use will be part of the score point.

The problem we had with the first idea is to how we will manage to execute a working demo with limited amount of time and so we needed to think of something else which is attainable for the specific time.

The second idea that we thought of is a sharing payment solution which we believe is not yet available in Dubai. I will discuss the whole flow in a while.

First, we mapped how the whole app will and should work.
visa flow mapping

After we plotted the application journey thru the sketches, in parallel was for us to think of a name and for me to prepare a logo while the back end guys do the work for the API’s.

Around 11PM, we had these:

Pay4 has the option to:

  • Pay Now, the user directly pays to the merchant.
  • Split Payment, have you ever experience going on a date with your friends and needed to share payments in cash? Either, giving a change or having a large bill is a bit of a problem for your share right? This is where split payment comes in. The user/s can just make their shared payment thru the app.
  • Forward Payment, this option gives the user an option to request for assistance of anyone of user/s family, friends or colleague for the payment transaction being made in case the user is having insufficient fund with his/her account.

Mock up flow:
In the process, please assume that the user already have the Pay4 app. We didn’t show the entire process of downloading or signing up to the app as it will take more time with the presentation. We focuses with the most important thing which is the service itself. Ionic framework was used to create the app but I will just show the application flow of the app which my expertise puts in since the working demo files are not with me.

visa merchant flow

visa paynow flow

visa forward flow

visa split flow

Behind the scene:
The welcome sign.

The sponsors.

The venue.

The essentials.

The freebies.

The shirt?

The prizes + a paid trip to 2017 Mobile World Congress in Barcelona.

Introduction from the sponsors.

Home for almost 32hrs.

Mapping the idea.

This dude will go a long way. His dedication is impressive. Youngest of all and he never closes his eyes even for a sec.

The comfort zone.

Food to keep us energized.

Trying to motivate myself.

He keeps me awake by his masterly brewery skill.

Midnight snack.


The judges.

Finally pitching.

Out of 27 participants, only 19 teams had managed to present their idea and we are the first team to present our solution. Luckily, we didn’t win. The sad part was, most of the winning team was just throwing out the idea with some kind of slide presentation which actually not allowed as we knew. And the first place award was taken by one guy who just pitches the first idea that we had. No working demo. Nothing. He just tossed the process to the judges and viola! F*ck. Still, the whole experience was just worth the time. You will learn a lot of things like team work and dedication. For me, that is more valuable than cash.

BYAHE: A Typographic Exploration

An alternative lettering workshop inspired by the traditional Philippine jeepney signs. A collaborative project of Ape Creative and FN Designs Gallery. Alserkal Avenue, Dubai UAE

“Byahe”, a Filipino word for “travel” or “trip”.

Get to know the history.
The art of signage has a long colourful tradition. Long before the advent of digital technology, Sign painters and their craft have dominated the streets with their communiqué, their handmade type used to capture the public’s eye and imagination with a barrage of choices – what to do, where to eat, which brand to buy, where to go – destinations, possibilities, all outlined beautifully in painstakingly space-out letters. -ape



Getting ready.

Paint materials.

The group.

Sketching the journey of where I came from and where I’am today.

Tracing out.

Break time. Lime tree special.


Final draft.


The second impression.

The first coat.


On display as an installation piece.

Panoramic view.

Some paintings at the gallery.

Work in progress…


The value of a well-designed object is when it has such a rich set of affordances that the people who use it can do things with it that the designer never imagined.
Don Norman, 1994

Good Examples

Persona Empathy Mapping Workshop

Case Study

by Nikki Knox (UX Magazine)How to Use Persona Empathy Mapping.

In a recent aviation project we pushed common challenges to the extreme (though not to the point of unbelievable or ridiculous) so that workshop participants could momentarily place themselves into a visceral experience and imagine how somebody else might think and feel in a specific context. We asked workshop participants to complete a worksheet that reflects what Dan (our persona, a pilot for a private commercial jet airline) might feel, think, and do in certain situations.

We asked participants to complete a worksheet reflecting what our persona might feel, think, and do
tweet this

Extreme Situation Example: Dan gets to the plane and de-ices it in anticipation of takeoff. He pulls up to the hangar and finds that one of the additional passengers who was supposed to come along suddenly got sick and is currently in the bathroom throwing up.

Empathy Map Format Reference

Empathy map
Photo credit: “Adapting empathy maps for UX design.” Paul Boag (boagworld).



Think and Feel:

  • Will we be able to take off on time?
  • Will everything will work out smoothly?
  • Will the sick passenger can manage to travel?


  • Will the flight be delayed?
  • What causes the sick passenger to throw up?
  • What will be the first aid for the passenger?
  • Will he will be able to get to the flight?


  • First procedure for such cases.
  • Report the case to the control department.
  • Give notification to other passengers if the flight will be delayed.

Say and Do:

  • Still need to prioritize the benefit of other passengers.
  • Get a final status check for the sick passenger.
  • Once everything is clear, do the final check to be ready for take off.


  • The disruption with the flight.
  • Welfare of the sick passenger.
  • Emotional feelings of the other passengers.


  • That will be able to take off on time.
  • To be able to reach the destination smoothly.
  • To be able to give the best service as always with the passengers.
  • To ensure that every passenger gets the proper service needed.