Design Portfolio Zeco_Tai

A passionate team player with experience working across various industries, including Travel, Cosmetics, Banking, Products/Services, Real Estate.

UX & UI Designer / Interaction Designer

Hello, Im Zeco Tai

2018 July — 2019 Sep Accenture UI UX Designer Working and communicating with multifunctional, Agile teams, Identify UX problem

2016 Sep — 2018 Mar Locate 852 Company Ltd. UI UX Designer Design responsive UI for Web Applications. Present design solution to internal team and stakeholders

2016 Jan — 2016 Oct PeoplePerHour UI UX Designer (Freelance)

ZECO TAI Zeco Tai

About me

Sports

Travel

Selected Clients: Ever-Gainful Company Limited | Sports Lab | Noel Chu

lightsout23

Education

Hangouts

• 2020 (MDes) Interaction Design at The Hong Kong Polytechnic University • 2018 BA (Hons) in Interactive Media at The Hong Kong Polytechnic University

Major clients I work with

01

Virtual Banking Mobile App

02

E-commerce Responsive Website

03

Data Visualization Dashboard

04

Loyalty Program Mobile App

MOBIE APP DESIGN

How might we create a better virtual banking app for millennials?

CORE CHALLENGE In recent years, The business has recognized the need to pursue digital innovation and transformation to avoid lagging in competition, but its e!orts have been futile given both its scale and setup. The Hong Kong Monetary Authority’s (HKMA) decision to grant virtual banking licenses earlier 2019 presents an excellent opportunity for the business to realize its digital ambitions.

01

Get it Earning money through work, cash bank deals and investment returns.

Compound Interest Reward Wishlist Saving Plan High Interest Contest Foreign Exchange Flexible Cash Loan

04

02

Spend it

Track it

Using money to attain or maintain the desired lifestyle.

Keeping an eye on income and outgoings, savings pots and debts.

03

Manage it Making decisions on how and when to spend, and how and when to save.

USER PERSONAS To understand behavior patterns, the mindset of Hong Kong millennials daily money activity and validate the VB product ideas Therefore, we can gain insights from the research to inform the design solution, in order to address the unmet user needs

DREAMER

LAZY INVESTOR

01. Lack of knowledge 02. Hesitate to their first step 03. Multiple Goal-mindset

01. Lack of knowledge 02. Calculates Benefits for Each Action 03. Lack time or dedication

STRATEGIC EXPLORER 01. Calculates Benefits for Each Action 02. A Need to Compare 03. Multiple Banks, Multiple Accounts

NON-BELIEVER 01. Calculates Benefits for Each Action 02. Reliability and Reputation 03. Lack of Confidence in Themselves

KEY TAKEAWAYS A solution to make the use of mobile app banking intuitive, fast and easily comprehensible.

Minimizing the number of steps without sacrificing the exposure of the products. The Hong Kong Monetary Authority’s (HKMA) decision to grant virtual banking licenses earlier 2019 presents an excellent opportunity for the business to realize its digital ambitions.

Cross-Border Insurance

Young Professionals

Questions about specific clauses of policy and legal rights.

Account opening and the need for physical presence in Hong Kong.

Sophisticated needs to manage wealth. Desire to spend more on health but is constrained by expenses

Students

Cross-Border Management

Travel is the highest priority Value short term pleasure over long-term planning

Safety of their wealth is the highest priority.

Global market information is valuable.

CIPLES

TRANSPARENCY HOLISTIC

UX PRINCIPLES

Minimizing interaction prevents the danger of the user experience is more about the device or app, rather than navigating the complexities of everyday life.

SIMPLICITY SELF-SERVICE Maintain Clarity: Understand and

HOLISTIC It focuses on solving problems but

Taking these principles into account and rely on them to develop our strategy and architecture.

takes an approach to the design which sees the system as an interconnected whole that is part of a larger world.

SELF-SERVICE Providing guidance & clear

Design for Users’ Main Goals. Easy

instructions for first-time users &

to navigate & achieve

when users encounter problems.

VB BANK INFORMATION ARCHITECTURE

VB Bank

1.0 Registration

1.1 Business Account

2.0 Login

3.0 Home

3.1 Message Center

4.0 Account

4.1 Settings

5.0 Saving

6.0 Transfer

7.0 Exchange

8.0 Loan

9.0 Manage Payment

5.1 L1/L2

6.1 Instant Payment

8.1 Withdraw

9.1 Mobile

5.2 L3 New

6.2 Recurring

8.2 Repay

9.2 Email

5.3 L3 Existing

6.3 Mobile

8.3 Overdue

6.4 Email

6.5 Ac no.

6.6 Small Transfer

KEY WIREFRAMES FLOW (500 SCREENS TOTAL) 1

HOMEPAGE

2 SEND MONEY

4 VB SAVING LVL.3

Quick Access

Account

Check or Signup

Allow user to access important functions throughout their daily life

Edit or change bank account

Check tier status or deposit now. Set goals & strategy for the long term and short term regarding the product

Saving Account

Payment Methods

Check daily status such as interest rate, money coming in and out & total balance

Select di!erent FPS payment methods with selected recipients

Transaction Latest transaction records from FPS or credit card usage

5 LOAN VB Products Status or access to VB products such as loans, savings, etc.

Account 3

O!ers

Select repayment account

EXCHANGE CURRENCY

Selection Insert

Access to personalized weekly or monthly o!ers from external partners

Select currency along with payment amount

Promotions

Transfer Time

Access to weekly or monthly o!ers from external partners

View transfer time & remarks

Select to repay or settlement amount for transactions

2 ROUNDS OF USER-TESTING A total of 16 users was invited for testing. Emphasis on usability testing in the overall flow

STRATEGIC EXPLORER LAZY INVESTOR DREAMER

EASY TO NAVIGATE The app was easy to learn and nevigate. I find it e!ortless

NON-BELIEVER

01

FULFILL MY GOAL/ PURPOSE

TRANSFER MONEY PROCESS

Functions and products that are suitable and clear. Overall, I was able to finish the task

Entire process was easy to understand. I was able to to find the task easily

LOAN VB PRODUCT

HOLISTIC EXPERIENCE

I understand the purpose and how to access VB products.

I find the entire flow was fluent overall.

VB Products Up Front - Desire to see saving accounts upfront with a better visualization.

02

Homepage Enhancement - Need for a less complex and less traditional homepage

SAVING VB PRODUCT

03

I understand the purpose and how to access VB products.

Transparency - Concern for loan payment & instructions

04

Personalization - More user oriented homepage (Shortcut e.g)

ADJUSTMENTS AFTER USER-TESTING (500 SCREENS TOTAL) 1

HOMEPAGE

3

2 SEND MONEY

EXCHANGE CURRENCY Insert Select currency along with payment amount

VB Products Check VB products daily status such as interest rate, money coming in and out & total balance.

Logic Defined Order of recipients will depend on the frequency/ most recent

Less complex homepage with relevant content one at a time

Transfer Time View transfer time & remarks

4 Quick Access

DIRECT DEBITS Choose

Allow user to access important functions throughout their daily life More features can be added in the future

Insert Mobile No.

Direct Debits allows you to collect money from another bank account of yours under the same name

When the system detects match information

Auto Collect Select payee details. Either it is active or expired

BRAND COLOR The core goal was to define colors that can distinguish the brand against other bank industry. The emphasis on playful & relaxation

PRIMARY COLORS

#FB5C62

PRIMARY GRADIENT

#434343

#FB5C62 —> #FED430

SECONDARY COLORS

#0FA3B1

#FCAB10

#477898

#77BA99

UI PRINCIPLES Brand core elements are essential which include color, typography and other basic UI components.

DYNAMIC Clean and clear, new, lively

AFFABLE Pleasant, sunshine and be-your-friend

SIMPLE Straight forward and precise, direct to the point

EFFORTLESS Sharp, proactive and naturally behave with direct card design

ICONS AND ILLUSTRATION DESIGN Dynamic, playful & simplicity design

2px 1px

UI ILLUSTRATION The ability to tell great stories around a digital experience through strong visual hierarchy

D BASED DESIGN

CARD BASED DESIGN One piece of information at a time with relevant content. Oneclick to access main functions throughout the app. Helps to avoid long unreadable texts, and allows users to save time while getting the main information

SURPASS TRADITIONALLY Minimizing interaction with card design, limiting 2-3 clicks towards main functions. Achieve greater experience through understand and design for users’ main goals.

SENDHOMEPAGE MONEY

SEND MONEY

Dynamic cards that can be

Consistent Experience

updated and reordered in the

Provide users with the

future through personalization

simplicity of PayMe

ECOMMERCE

How might we improve a rewarding experience through Lifestyle Awards?

KEY INISIGHTS “Non Air Redeem (NAR) is “not worth it” when compared against retail pricing and Air-Rewards” 01

Incentive

82% 84%

02

Interests

82%

I think it is always more value

I am only interested in flights

for money to buy the product/

awards, so I do not bother to

service with cash instead of

look into non-air redeem awards

redeeming them, so I do not

03

Awareness

04

Air Awards

bother to visit iRedeem

47%

43% 47%

I am aware of Lifestyle Awards

43%

I think non-air awards can

through Asia Miles

always be found easily

communications but the

elsewhere so I do not bother to

product / service introduced are

visit Lifestyle Awards

not attracted to me

MILES SPEND BEHAVIOUR 01

Relevant

14%

71% 14%

02

Miles Burn

03

Browse

24% 71%

24%

I think non-air products are

I want to use up all the miles

I just browsed around to see

relevant to me

that are going to be expired

what are there on Lifestyle Awards and found something I like

04

Non-Air Awards

48% 90%

I do not have enough miles to redeem air-related awards, so I go for non-air awards

05

Promotions

48%

I am looking for the latest details or promotions

3 CORE CHALLENGES iRedeem lacks di!erentiation against other retailers/platform where similar NAR is available

DIFFERENTIATION CHALLENGE 01

1

1

DIFFERENTIATION CHALLENGE 01 iRedeem lacks di!erentiation against other retailers / platform where similar NAR are available

WORTH IT

2

LLENGE 02

WORTH IT CHALLENGE 02

2

NAR is “not worth it” when compared against retail pricing and air-rewards

TOP PRIORITIES CHALLENGE 03

3

3

TOP PRIORITIES CHALLENGE 03 The Main trigger for NAR redemption is expiring miles or search for the next-best option

HONG KONG PERSONAS Become our member’s Go-to platform for unique & lifestyle purchases, where their miles become enablers of value & rewarding experiences

EXPERIENCE SEEKER Asia milesOCCASIONAL to me is..

USER

OCCASIONAL USER

Extra spending money. I love traveling, and use my miles so I can travel more often

Asia miles to me is..

A frequent flyer program I happen to join after flying with CX/KA

01. Foster connections 02. Build meaningful experiences

01. Right place, right time

03. Conveniently connect me with others

02. Smart rewards and real time rewards

04. Show me “Inside Experiences”

03. Show my progress and encourage me 04. Suggest how can I earn easily

IRATIONAL SAVER

ASPIRATIONAL SAVER Asia miles to me is..

Cash coupon and reward system. I save them up as I go

HIGH FLYER

01. Help me reach my dream destination 02. Make things inspirational, but accessible VALUE MAXIMISER

Asia miles to me is..

03. Give me more transparency

A hub where store all my points, it sometimes buys a

04. Remove hurdles for me

nice bonus for my family

VALUE MAXIMISER Asia miles to me is..

Saving account for travel, I’m an expert of the system 01. Give me predictable value

01. Do it for me

02. Help me find hacks & shortcuts

02. Include family options

03. Reward my diligence

03. Fast and convenient is key

04. Make it easy for me to compare

04. Make me feel special

KEY FOCUS [Member] How might we make members happy when they can’t redeem a flight ticket they want?

[AM] How might we position Lifestyle Awards as ‘attractive-get’ without expiry? How might we position Lifestyle Awards products as (still) good

04

04

√ Recommend relevant products - “There are too many choices categories/ products are quite similar”

value?

- Good presentation & appropriate product suggestion

01

√ Targeted promotion/ special deals

03

03

- Members want to utilise good deals

- “Made just for you” - both functional

- Something you won’t purchase for yourself but what you aspire to have

and emotional approach needed to make members feel the ‘value of miles’

02

√ Gifting’ - aspirational

02

√ Concert & event tickets] Additional experience to make it special - Backstage access, priority booking (Citibank card)

UX PRINCIPLES iRedeem experience should not only be gratifying, it should also be …

PERSONAL EFFORTLESS DIFFERENTIATED TRANSPARENT

PERSONAL

DIFFERENTIATED

Whether it‘s discovering new

Our customers should have all the

The platform should understand

Other reward & retail platforms are

content, redeeming one’s desire or

information they need to make an

each customer, recognizing the

fighting for consideration. iRedeem

managing an order, the interaction

informed decision; this includes

unique status, identity and desire

must leverage and showcase its

and flow should be intuitive and

not only rules, cost but also the

of each individual to be truly

unique propositions to engage

simple

value we provide

relevant.

customers

Important for:

Important for:

Important for:

Important for:

√ Aspirational Savers

√ Value Maximizers

√ Aspirational Savers

√ Experience Seekers

√ High Flyers

√ High Flyers

LIFESTYLE AWARDS INFORMATION ARCHITECTURE

Lifestyle Awards

1.0 Login

1.1 Forgot PS

2.0 Signup

3.0 Home

3.1 Product Listing

3.2 Product Detail

3.3 Campaign

4.0 Cart

4.1 Checkout

4.1.1 Order Confirm

5.0 Wishlist

6.0 History

6.1 Order Details

6.1.1 Redeem Cancel

7.0 Live Chat

8.0 Search

8.1 Product Listing

9.0 Live Chat

KEY WIREFRAMES FLOW (180+ SCREENS TOTAL) 1A HOMEPAGE 01

High fidelity wireframes

1B HOMEPAGE 02

Product Categorization

Product Categorization

Exposed detailed categorization to provide a wide variety of options in the first glance

Exposed categorization by lifestyle to minimize the user’s cognitive load

Promotion Driven Emphasize promotions with dominant key visual as a traditional site

Latest O!ers Align with research insights where customers are motivated to visit iRedeem for latest discounts or promotions

Personalisation Convey a sense of ideal lifestyle by using a series of products in a particular environment

Co-Brand Card Grouped all co-branded promotion into Credit Card Promotion according to commercial reason

Music Concert Highlight up & coming categories such as experience & events

Reassurance Provide reassurance regarding what iRedeem promises to our customers

Top Brand Top brands banner to further promote content discovery instead of giving customers a dead-end

Search Driven Addressing customers’ core needs (find redeemable NAR) first before catering for business needs in showcasing promotions

KEY WIREFRAMES FLOW (40+ SCREENS TOTAL) 1A HOMEPAGE 01

2 Product Listing

3 Product Detail

Product listing Relevant products depending on the user’s access point (filters. promotions, brand, etc.)

O!er cross-category promotion when related items appear seamlessly in a timely manner

Filter Options Exposed filter option instead of dropdowns to help customers find what they desire

Clarify Miles + Cash concept Promote understanding, Promote special o!ers and free shipping to ensure we can increase the perceived value of each product

Bundle O!er Upsell bundle products right below to encourage uptake of multiple products

Social Factor Leverage social proof to promote other products, reiterate category and brand name to promote discovery of more content

4 Product Categorization Image/Tags

Primary & Secondary

Product images with tags

Products are immediately displayed after one-click

Product Details Various information display includes Name, co-brand card, miles, time remaining

AB USER-TESTING APPROACH 10 users were invited. Implementing AB testing approach – we will be switching the order of questioning about direction one and direction two

Homepage 1A

Homepage 1B

8.0

User-Oriented 4.7

Section Order

5.5

01

8

6

5.0

6.5

Miles + Cash concept

4

2

Section Order Rearrangement - User desire on a more focused, product based section.

02

4.4

Product Catagorization

6.8

10

6.2

Personalisation - More user-oriented in terms of

0

0

2

4

6

8

10

Usability testing on product purchase flow iRedeem New Design

User’s favourite ecommerce platform

E!ortless

6.2

Personalisation

8.0

4.8

7.5

labeling, products, and theme Easy to understand

03

Miles + Cash - Less complex learning experience.

7.6

Holistic experience

6.8

8.2 8.5

Desire to be more clear and transparent 0

2

4

6

8

10

BRAND COLOR & TYPOGRAPHY

Yellow #FACF00

Dark Grey #272F38

#FBD933

#FAD319

#FFFFFF

#FEF5CC

PRIMARY COLORS

SECONDARY COLORS

RESPONSIVE GRID SYSTEM 1440 Or Above Pixel View - 1280 Pixel View

1279 Pixel View - 768 Pixel View

Below 768 Pixel View

Column Width 78px

Column Width 46px

Column Width 75px

Gutter Width 20px

Gutter Width 16px

Gutter Width 15px

Gutter Height 10px

Gutter Height 10px

Gutter Height 10px

PLATFORM ICONS Emphasis on content and more recognizable. A sense of playfulness to align with its branding.

Label

1.5px

Illustrations

DESIGN

PRODUCT CARD DESIGN Emphasis on less is more, harmonize UI and prioritize user needs. Results in showcasing di!erent components in identifying product tags, price & special products. Standard is established that an item number tag and multiple images should be used on a series card to di!erentiate it from an item card, and therefore, makes it clear for users. Create a unified, consistent user experience.

MILES + CASH PURCHASE By choosing the Miles Plus Cash redemption option, Members may redeem their Mileage Credits together with payment of money to redeem certain Lifestyle Awards. A simple slider design that allows the user to experiment before making final adjustments.

FINAL HOMEPAGE LAYOUT

Back to content page

PRODUCT POSITIONING Rewards program in which members can earn miles that can be used to redeem a huge range of travel and lifestyle awards.

DATA DASHBOARD

How might Data Analytics help to understand the Chinese consumer’s path to purchase?

KEY TAKEAWAYS

37%

37%

25%

25%

18%

18%

As a leading cosmetic brand worldwide, the business are very success within the APAC market. However, with various marketing campaigns and product

AsiatoPacific launching in recent years, the business was able extract various data from

Asia Pacific

APAC markets, but struggle to organise it in a way the business can review or

North America

targeting in specific people or areas.

North America

Western Europe

Western Europe

11% “It is a market driven by the of Latindevelopment America social media, increasing urbanisation 9%worldwide Europe, and rising growth in online Eastern beauty spending�

11%

Latin America

9%

Eastern Europe, Africa, Middle East

Africa, Middle East

Growth of the worldwide cosmetics market over 10 years +4.0% - 5.0%

2009

2010

2011

2012

2013

2014

2015

2016

2017

2018

+9.5%

+9.5%

IGHTS

+5.7%

+4.0%

+5.7%

+5.2% +5.0% +3.6%

+5.7%

KEY INSIGHTS +5.0%

The luxury cosmetics market is constantly growing and has seen a boom in the last few years, driven

+4.0%

+3.9%

by the expansion of the high-income class and the increase in the number of Chinese consumers traveling worldwide. As it shows the performance of the luxury cosmetics market compared to the total market

2015

2016

Total market

2017

2018

Luxury cosmetics market Skincare Haircare

3% 4%

5%

45% Makeup

4%

10%

Fragrances

37%

37%

22%

22%

19% 5% 12%

Skincare Haircare

45%

19%

Makeup

12%

10%

Fragrances

10%

10%

Hygiene products

Hygiene products

The global luxury skincare market saw a resurgence in 2017, with growth increasing from approximately 5% in 2016 to approximately 12% in 2017, driven by the women's skincare segment. The Chinese makeup market, although historically small, has grown significantly in the last few years, accounting for a quarter of the Chinese selective market in 2017.

STAKEHOLDERS OBJECTIVES Various marketing campaigns and product launching in recent years, the business was able to extract various data from APAC markets, but struggle to organize it in a way the business can review or target in specific people or areas.

Public Meeting Room Display

ELERS/ CONSUMERS

AC MARKET RANKING

Desktop / Mobile Display

CHINESE TRAVELERS/ CONSUMERS SHOPPING BEHAVIOUR Understanding consumer shopping behavior and how it will be a!ected by cross borders experiences

The comparison between the Chinese consumer against APAC market will be the key insight

APAC MARKET RANKING Ranking among APAC markets in launching campaigns in the future

KEY USERS • APAC Brand Marketing Directors • Hong Kong Marketing Manager & Digital Manager • Hong Kong Division Digital

ACCESSIBLE Design is usable for as many people as possible.

CONSISTENCY HIERARCHY

HIERARCHY

Experiences that connect and support one another.

CLARITY

Arrangement of items in which the items are well represented

CLARITY Appropriate content and easy to understand

INFORMATION ARCHITECTURE Views Mockup consulted with key users on an on-going basis

Data Dashboard

1.0 Travel

2.0 Market Performance In China

3.0 Market Performance Outside China

4.0 Chinese Consumers

5.0 Exchange Rates

1.1 Trends

2.1 China Top Brands

3.1 Local vs Tourist Sales

4.1 Demographics

5.1 Exchange Rate Trends

1.2 Origins & Destinations

2.2 China Top Products

3.2 HK Daigou

4.2 Digital Index Ranking

5.2 Correlation with Travelers

1.3 Hong Kong and Macau

2.3 China Top Categories

3.3 Celebrity & KOL

4.3 Hot Buzz

2.4 Tmall / nonTmall / C2C

3.4 Research Reports

DATA VISUALIZATION The resulting visuals are designed to make it easy to compare data and use it to tell a story – both of which can help users in decision making.

1

2

Line

3

Bar

5

4

Stacked bar

6

Pie

Bubble

7

Area

8

Waterfall

Horizon

KEY WIREFRAMES PRIVATE VIEW 01

2 Top Brand & Products

First stage of wireframe co-created with stakeholders

Filter Options for dates, market & segments

Stacked Bar 1

Able to view the di!erence in performance & growth within YTD & QTD

Executive Summary

Quick Access

Filter

Allow stakeholders to access main navigation in terms of market information

Options for dates, market & countries

3 HK Daigou Filter

Overall

Options for dates, market & countries

Importance of visual hierarchy.

From overall data to detailed information

Stacked & Pie Bar Able to view the di!erence in performance & growth within YTD & QTD

4 Currency Trend

5 Weekly Searches

Filter

Filter

Options for dates, Keywords search

Options country base

Pie

Waterfall

Illustrate the di!erence contribution in products & ingredients

Distribution charts show how often each value occurs in a dataset.

KEY WIREFRAMES PRIVATE VIEW 02

2 Domestic vs Tourist

First stage of wireframe co-created with stakeholders

Filter Source of search

Stacked & Pie 1

Domestic vs Tourist in Top 30 brands, products & Categories

Hong Kong and Macau Filter The di!erence in Hong Kong & Macau

3 Tourist/Sales Correlation Filter

Pie & Stake

Options for dates, market & countries

Comparison of transportation and day time

Bar & Line Able to view the overall trends in di!erent countries

4 Weekly Seaches

5 CN Market Product Catagories

Filter

Filter

Options for dates & brands APAC market

Options in Dates

Bubble

Pie & Bar

Ability to view progress & trends during QTD or YTD

Distribution charts show how often each value occurs in a dataset.

KEY WIREFRAMES PUBLIC VIEW First stage of wireframe co-created with stakeholders

Travel to Hong Kong

Globe Interactive Design

Exchange Rate

Use of transportation in Hong Kong

Able to click in various countries or brand for real time market data.

Compare counties in exchange rate correlation

Chinese Travellers Snapshots

Travel to Macau

Exchange Rate

Use of transportation in Macau

Compare counties in exchange rate correlation

BRANDING COLOR Interface color will be mainly in white, light and dark grey. Secondary colors will be applied to highlight figures and data. No gradient color will be used.

#97D5D3

#E5BBC6

#948AD1

#EABE71

Back to content page

MOBILE APP DESIGN

How might we reimagine Loyalty Programs to drive customer engagement

MOBILE APP STRATEGY Become our member source of daily inspiration to maximize the value of miles

Fully Native Experience

Position for the Everyday

The necessity to unleash mobile app potentials. Plus, this is what members expect.

Essential to di!erentiate instant redemption from purpose-driven redemptions on RIBE/ NAR.

1

Becoming more accessible from a hassle-free experience

1

Increased ease of earn and burn in everyday categories

2

Further strengthen our lifestyle propositions and utility, rewarding members

2

Travel and lifestyle accrual and redemption promotions

Priorities Markets Our app will not have a strong appeal in every market.

1

Most intimate digital channel with wider options for data signals and means of interaction

2

More synergies with CX app to reinforce our travel proposition

CORE CHALLENGES & IMPLEMENTATION Redeeming flight tickets remains the top priority of its core functionality. The business hopes to improve its tra!c through value-adding partnerships with third-party merchants. Streamlines business operations under various ongoing projects.

Simple, Intuitive, Easy Of Use PERSONALISATION Promotions & Content

Our focus should be on a product that meets customers’ holistic needs, shaped to sit favorably within the ecosystem of other products competing for attention.

Lifestyle Vision At The Core INSTANT EARN & REDEEM

GAMIFICATION

Blockchain technology for Miles earning

Dining game for 2x miles earn

We will need to think about what our customers are interested in besides travel and consider how this can be integrated into their digital experience.

Personal To User We will need to focus on mindsets over segmentations. Move away from traditional marketing approaches that treat people as a homogenized group according to their demographics.

WHAT WE LEARNED FROM CUSTOMER With streamlines business operations under various ongoing projects, the business must revamp its application in order to suit user’s needs with rewards, discounts and miles activities in smooth and simple ways

Browse Promotions Users show less interest in campaigns that have more entry barriers.

Desire in transparency in terms of miles currency

Earn

Users care about their total miles earned that is available

Users care about their total miles earned that is available

Collect miles

Users don’t want to be over-stalked.

Redeem Use Miles

Action Activities occur

Redeem process should be smooth & be able to track

The user always explore more options for earning and redemption.

ASIA MILES MOBILE APP AS-IS ASSESSMENTS

- Full page o!er banners - Hidden menu with key functions (Earn Miles, Tools & Links, Nearby Restaurants)

What was working

- Floating action button

- Search function for partners exploration - Simple navigation system - Quick & easy accesses to key functions

What was missing

- Action driven navigation system - No long scrolling (e.g current campaigns’ details)

How would it be

- Easy accesses -Compact card designs

CIPLES

PERSONALIZE MOTIVATE

UX PRINCIPLES

Trigger users’ actions by showing personalized content and recommendations.

MOTIVATE Encourage members’ engagement

Highlighted possible enhancement opportunities inspired by other

in rewarding schemes, gamify their experience.

mobile applications.

TELL A STORY SIMPLIFY Engage users with story-telling elements. Like media content and narratives

SIMPLIFY Remove distractions and let the customer get their tasks done e!ortlessly.

AM APP INFORMATION ARCHITECTURE

Asia Miles App

1.0 Login

2.0 Homepage

3.0 Travel

4.0 Offers

5.0 Shop

6.0 Game

7.0 Payment

8.0 Settings

9.0 Search

1.1 Forgot PS

2.1 Account Management

3.1 Flight Finder

5.1 Recommend

6.1 Game Rules

7.1 Payment Password

9.1 Filters

1.2 Social Login

2.2 Message Center

3.2 Destination Search

5.2 Earn & Burn

6.2 Terms & Condition

7.2 QR Code

9.2 Search Results

5.3 Nearby

6.3 Game Progress

2.3 All Offers

KEY WIREFRAMES FLOW 1

HOMEPAGE

2 MANAGE MILES Welcoming

A 12,400

QR code

Hi Zeco Tai

Back

Tier Membership

Manage Miles

Let user knows they ahve logged in. QR code scanning & view account miles balance

View membership tier & also ID for miles claiming

12,400 Expired Miles

Navigate to personalized functions

Pending Miles

123

0

Lastest O!ers Claim Missing Miles

Transfer Miles

Transaction history

Special Notice Updates on latest info

6 Days ago !

A500 x 2 = A1000

Progress

SCB Asia Miles Card Selected Spending

Indicate users about their progress. Steps to achieve finals results and awards

History + A305 11 Feb 2019

+ A25 09 Jan 2019

Transparency of redeeming and earning miles on a monthly base

Book now

5 SHOP Search Explore

A 12,400

Flight Award Finder

Direct Payment

Search options that match your personal request in miles spending

Search by miles

QR code

Recommend

Grab & Fly

Redeem Inspiration A possible destination for redeeming miles

Providing Asia Miles partners a single data source when managing account activity. This allows Asia Miles, partners, and members a near real-time ability to manage rewards.

Spend at least HKD $500 at our retail partners to Double Your Miles

Options for miles management in terms of transferring to a family member, Claim missing miles from airlines etc.

3 TRAVEL

Nearby partners such as airports shops & restaurants for earning miles

Blockchain Technology

Challange

Family Miles

BJ Restaurant Booking Asia Miles Spending

Nearby Partners

Back

Miles Management

Account Balance

Quick Access

Banners of the latest promotions with earn/ redeem indicator. With a discover more button for more inspiration

4 BLOCKCHAIN GAME

Bangkok, Thailand A20,000

Tokyo, Japan A30,000

Experience for you

See all

Earn

Earn

Four Season Hotel Redeem a free ticket

Driving

Earn & Burn

Nearby

Personalization

Nearby O!ers

Set and go destination o!er based on your miles.

Encourage to earn more for richer o!ers

A map view that shows nearby shops for miles earning. Including miles conversion

Columbia Outdoor | 150m Away

Earn $10=A1

Me

Travel

Dine

Shop

More

Me

Travel

Dine

Shop

More

Directly using co-brand credit card to earn miles

Me

Travel

Dine

Shop

More

USER-TESTING SCENARIO WALKTHROUGH (MAIN SCREENS) 1

HOMEPAGE

2 BLOCKCHAIN GAME

A 12,400

QR code

Hi Zeco Tai

PROVIDE EASY AND INSTANT EXPERIENCE TO ENCOURAGE FIRST TRIAL

Back

Challange

Spend at least HKD $500 at our retail partners to Double Your Miles

3 MANAGE MILES

GUIDE WITH USER RELEVANT CONETNT FOR GAME EXPERIENCE

Back

MANAGE MY ACCOUNT EASILY WITH CONSIDERATE HELP AND SUPPORT

Manage Miles

Account Balance

12,400 50%

70%

Inform

Inspired

6 Days ago !

A500 x 2 = A1000

65%

20%

Inform

Inspired

Expired Miles

123

Claim Missing Miles

Pending Miles

0

Transfer Miles

85%

50%

Inform

Inspired

65%

90%

Motivate

Help & Manage

Family Miles

Transaction history

20%

90%

40%

70%

SCB Asia Miles Card Selected Spending BJ Restaurant Booking Asia Miles Spending

Book now

Motivate

Help & Manage

Motivate

Be simple

Be findable

Be human

Be findable

Travel

Dine

Shop

More

Be simple

Be easy

Be clear

Be contextual

Me

+ A25 09 Jan 2019

Be simple

Be easy

Be clear

Help & Manage

+ A305 11 Feb 2019

Be human

Be findable

Be easy

Be clear

Be contextual

Be human

Be contextual

Action Priority:

Action Priority:

Action Priority:

Explore

Explore

Get Help

Redeem

Redeem

Check Miles

Search

Join Campaign

Send Gift

Join Campaign

Get Help

Explore

Mange Miles

Read Terms

Redeem

BRAND COLOR & TYPOGRAPHY

Yellow #FACF00

Blue #01ABBC

Dark Grey #272F38

#FBD933

#FAD319

#FFFFFF

#FEF5CC

PRIMARY COLORS

SECONDARY COLORS

MOBILE APP COMPONENTS

AN ENHANCED EXPERIENCE The next evolution of the Asia Miles Mobile App

INSTANT EARN AND PERSONALISATION BURN A homepage that targets

INSTANT EARN AND BURN

utility-driven functions and

A miles plus cash payment with

encourages engagement

real time conversion rate

Why is it important

Why is it important

Raises business values of o!ers

Reduces members’ cognitive load

through compact card design

for easy access to key miles information and to assist

Facilitates miles earners’ experience in searching for hot / special o!ers

decision-making for Earn & Burn

TRAVEL GAMIFICATION PROMOTIONS

Gamification with one action per

TRAVEL PROMOTIONS

screen, connection point to key

Show precise categories for hot

navigation section

promotions and location-driven content

Why is it important Why is it important Raises app stickiness through connections between the games

Reduces members’ e!ort to reach

and key navigation sections (e.g.

their most desired features

Dine, Shop) Surfaces a personalized content Eases members from absorbing key information

and reinforces daily lifestyle focus

Back to content page

UX & UI Designer / Interaction Designer

Thankyou