Wireframe & Prototype

---

Wireframing

I use different tools to create wireframes. Hand sketches, powerpoint, Axure, Flash (used to), and sometime HTML. As long as it is good enough to convey the idea within the development team. I usually do not spend too much time on wireframing, I use it to define scope and the general layouts only, and then I will jump into creating the interactive prototype quickly.

Example of handsketch wireframes:

Prototyping

I create interactive prototype at early stage of development. Axure is my first choice to go for creating interactive prototype, but sometime i would also use HTML, CSS, Javascript (and sometime a bit of PHP) if i want to have a proof of concept for the framework.

Using Axure for both wireframing and prototyping: These are done with illustrator and Marvel: Marvel allows user to add interactivities to static images:

The prototypes I created serve several purposes:

Checking out the prototype on different devices: Close

UX Design

---

UX design is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. Below I will showcase the projects that I have worked on, with the goals of UX design in mind.

---

Shopping Chatting 2-in-1

This app is based on the concept of merging two of the most frequently used applications - shopping and chatting into one unified experience.

Early sketches of the concept: Featureing shopping and chatting at the same time, and split payment:

• Project: BuyAi
• Service: Early Concept and Flow Design

---

Horse racing app enhancement

Redesign the previous version to support more sophisticated betting needs. The new version supports multi-race bet types, all up betting, a newly introduced bet type. Also, we have given the app a face lift with the concept of flat design and material design.

Display of horse detail, information grouping and sequence: Composite win (New bet types):

• Project: Racing Touch
• Service: Concept and Review

---

Responsive Layout Design

3 years after the first redesign of the company's webstore, we see the needs to redesign it again with the considerations of mobile usages and touch interface. Twitter's Bootstrap as the frontend framework to make the design responsive to different screen sizes, the simple and flat UI style also made the site more pleasant to use.

A framework that makes the layout responses to different screen size and orientation:

• Project: MTGMintCard Ltd
• Service: Frontend Design and Coding

---

Deck Building and Analytic Tool

With the considerations of customer search behaviors, game play needs, mobile usages and SEO, we have custom made new features to meet the business's needs. The new webstore is equiped with search and filter tools tailored for trading card players, and game specific tools (i.e. Buylist, Deck builder) are built to facilitate the hobby.

Trading cards player are able to construct their own decks online with this tool: Analytical data are generated for the player's information:

• Project: MTGMintCard Ltd
• Service: Concept, Frontend Design and Coding

---

Gamification of point collecting

Customers were able to collect "eggs" by purchasing, the "eggs" can then be used to hatch to "dragons", which has the rarity charactistics. Customers can use the "dragons" collected to redeem physical prize at stores.

• Project: ClubMMC Mobile App
• Service: Frontend Design and Coding

Close

Usability Engineering

---

To discover design problems at the early stage of development and reduce the cost of fixing, we use usability testes to test out the prototypes of the websites. For each of my usability test session, it usually include the following parts:

Pre Test Arrangement

Before I start the test, I will make sure that all the equipments and documentation that will be used in the test are ready. For example, since I would video record the action and also the face of the test participant, I have to make sure that the software are ready and there are sufficient disk space for the recording. I also need to make sure that the item being tested (i.e. the site) is in a state that is suitable for testing, for example, delete the History and Cookies of the browser. Documents such as the "Nondisclosures and Recording Permissions" should be printed.

A laptop with built-in webcam and screen recording software is good enough for testing:

Introduction to the Session

I would welcome the test participant, and then will have a short discussion on some generic topics about the test:

Background Interview

We will have a discussion about the participants own experience, in order to have a deeper understanding about the subject. This might help us understand more about the participant's behavior on the item being tested later on.

The Task

A list of tasks will be given to the test participant. The participant will be encouraged to think aloud when he perform the test. We will use a screen recording software to capture all the action performed during the test, as well as the facial expression and speech of the participant.

Sample task list, this is for the use of facilitator only and not shown to the test participant. Screen and action recording: How the user feels about the design is often shown on their facial expression:

Post Test Debriefing

After the task has been completed, I would ask broad questions to collect preference and other qualitative data, and follow up on any particular problems that came up for the participant. Initiative will be given if there is any, thanks and say good bye to the participant.

Sample questionaire: Close

Card Sorting

---

Card Sorting

Card Sorting is one of the design methodologies for information architecture design.

Real users were invited to perform a card sorting exerise to figure out the grouping of information:

Module Sorting

Beside grouping of information, with the similar technique, we can get useful information from real user on how to arrange UI elements on a contrainted screen estate.

Close

Caricature

---

Caricature is my second career. I draw at large conventions and annual dinners occasionally. I am one of the artists at Caricature Hong Kong, please contact them if you are interested in hiring artist for events. Or contact me for gift and individual commissioned works.

Close

D.I.Y. Video Capture Equipment

---

There were software that capture the action of user when they are conducting usability tests, however it is limited to only the actions registered by the software, the un-registered gestures such as unsuccessful tap/swipe on touch interface, are actually providing more important information to the designer.

One method to capture the action is to place the camera right in front of the user, but it requires the device to be placed at a fixed location which is not natural, and the placement of the camera is obstructive.

A not so ideal way for video capturing for mobile devide:

I have decided to make a video capture device for mobile, and I have make use of Lego Technics parts for its custom-ability and expandibility. Below is the step-by-steps:

Remove the pivoting base by force: Remove the faceplate in order to get access to the screws: Take apart the webcam: Use a plier to cut away the protruded part at the bottom: Putting back together the parts and faceplace, there is a hole at the bottom, but no worry: Super glue a Technic piece at the bottom of the cam: Glue another technic piece to a phone holder, use other Technic piece to build the arm: A close up of the camera:

The main benefit of this design is that it can be modified to attached to any other devices, say if i need to video capture for iPad, I can glue a piece of Technic piece to the iPad case and then reuse the same camera with it.

Close

Customer Onboarding System for Business Banking Staff

---

https://www.biz-application.hangseng.com/portalserver/en-hk/business-account

Business bank account opening is a complicated and serious process, it involves multiple teams and connected systems to work together. In order to streamline and speed up the process, the bank demands a newly engineered and integrated solution that focuses on efficiency and effective communications.

Responsibilities:

• Successfully applied design system at early stage of the project, design task was easy afterwards and extendable in future.
• Usability tested with future users (Staffs at Buiness Center) of the system, and applied design changes based on findings.
• Work with the remote development team over video conferencing tool.

Close

Hang Seng Digital Business Banking

---

https://ebusiness.hangseng.com/1/2/

To keep up with today's banking needs, the online platform needed a complete revamp. The scale of the project, the co-existing of the old and new systems, and the technical limitations post great challenges to the project.

Responsibilities:

• Lead a team of UX designers and frontend developers to redesign the ebanking portal.
• Designed and developed multiple tools and work flows (e.g. Design Framework, Wireframe, Library, Design Sprints) to facilitate the design process.
• Design and perform user researches.
• Liaise with channel owner, product owners and technical departments.

Close

User Research with Lego Serious Play

---

https://www.lego.com/en-us/seriousplay

In order to understand the new banking needs, we brought in customers to particpate in our userresearch using the Lego Serious Play method.

Responsibilities:

• Research planning.
• Co-design the research with the facilitator.
• Result analysis and reporting.

Close

HKJC Customer Self Service Portal

---

https://wcip01.hkjc.com/loginformCSSP.aspx?language=zh-hk

Many HKJC services had to be done in person at branches or through the integrated call center, and the organisation would like to allow customers to access the services digitally through a centralized online platform.

Responsibilities:

• Draft early UI for concept development.
• Review and comment on UI designs according to business requirements and usability.
• Liaise with business user, designer and developer to deliver the product on schedule.

Close

HKJC Racing Touch

---

http://racingtouch.hkjc.com/en/2015.aspx

Racing Touch is a graphically-rich mobile horse racing and betting application, allowing racing fans to study information for each race.

Responsibilities:

• Review the UI designs and make sure that they fulfill our business requirements and has no usability issues.
• Communicate with different stakeholders within the organization to understand their needs and make sure the new design meets their expectations.

Close

MTGMintCard Web Store

---

http://www.mtgmintcard.com

3 years after the first redesign of our webstore, we see the needs to redesign it again with the considerations of customer search behaviors, game play needs, mobile usages and SEO. The new webstore is equiped with search and filter tools tailored for trading card players. Game specific tools (i.e. Buylist, Deck builder) are built to facilitate the hobby. We have adapted Twitter's Bootstrap as the frontend framework to make the design responsive to different screen sizes.

Responsibilities:

• Performs requirement gathering and specification.
• Frontend design and development - Page Flow, User Interface Designm, prototyping and coding.
• User interviews and Usability testing.

Close

HKJC Betting Site - eWin

---

http://bet.hkjc.com

As the major legal betting channel of Hong Kong, eWin has a large user base and high traffic. The 10-years-old design consists of many usability problems and seriously outdated in style. In order to catch up with today's standard on customer experience, a complete redesign was needed.

Responsibilities:

• Worked with external design agency and in-house programmers to redesign the onine transaction site.

Close

ROI Calculator

---

http://addingoil.com/roi/roi.html

This is a personal project. I have created a simple application to calculate the return on investment (ROI). It can be used to calculate any one of the 3 variables in the ROI formula.

The application is mobile responsive and designed to be used primarily on mobile phone. It is a SPA (Single Page Application) and AngulaJS was used. W3.css was used for styling.

Responsibilities:

• Concept Development
• UX Design
• Coding
• Deployment

Close

ActiveU

---

ActiveU is simple and basic fitness tracker. You can use it for a variety of exercise styles, including surfing, swimming, running, and whatever else, really. You also get calendar features, the ability to create custom exercise routines.

The application also features social functionlities, user can view their peers' activities as motivation.

Responsibilities:

• Logo design and development.
• Color palatte for branding, visual designs for the components and pages.
• Page flow design.

Close

Purple Wallet

---

Purple Wallet is a personal financial tool that help user manage their money. The application features payments, activities monitoring, and investments.

The app is connected to user's bank accounts to initiate transactions. Various financial related reports are available.

Responsibilities:

• User Interface Design
• Color palatte for branding.
• visual Designs for the components and pages.

Close

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!

• Client: Start Bootstrap
• Date: April 2014
• Service: Web Development

Close