Touch N' Go x KopiKat Collaboration Microsite Landing Page Event

Touch N'Go × KopiKat Microsite Landing Page Event

I'm the student from The One Academy Penang. This is the project of Web and Mobile Design that I'm going to showcase here. The project is created within last year in course semester that I did as a personal school project for taking branding example to collab with the previous course project, Kopikat website prototype. This is the branding that I created myself for advertising Malaysia culture and educational purpose.

The project involved vector 2D animation and some interactive elements for user to experience, the project developed by few softwares:

1. Adobe Illustrator (Illustration Assets)

2. Adobe XD (Static Prototype Preview)

3. Adobe After Effect with LottieFiles plugins (Animation)

4. Microsoft Visual Studio Code. (Backend Coding and Layout Arrangement. HTML, CSS, JAVASCRIPT included)

Here is the showcase of the concept board of the Touch N'Go × KopiKat Microsite Landing Page Event.

To better understand my work, let me briefly introduce my previous course project and the origin of the Kopikat brand.

Kopikat is an educational website aimed at promoting Malaysian culture and help foreign visitors learn and use local words commonly found in traditional Malaysian coffee shops, like dialects.

This way, foreign tourists visiting or residing in Malaysia won't encounter communication difficulties when dining out or interacting with locals.

These are prototype display images for the Kopikat Microsite Landing Page.

The landing page consists of introduction about traditional coffee shop and their history, their F&B selling menu, and some additional knowledge need to know in the shops. Also, the page provided a series of game test for tourists to know how much of dialect language they can handle.

Content List

1. Research Phase

2. Content Phase

3. Usability Phase

4. Outcome Phase

1. Research Phase

This research phase is mainly talk about the purpose I want to collab with the brands, the backgrounds details, benefits and goals for both. 

Introduction

Touch N Go × KopiKat Microsite Landing Page Event is a mobile microsite pop-up event. It used to serve users like local urban and overseas students for educational and prizes rewarding purposes.

Rationale

Nowadays, urban teenagers are like to join with global topics, short videos culture. Most of them are not specifically understand Malaysia locals' cultural knowledge. To promote the culture and provide knowledge to urban teenagers and overseas students, I selected the local e-wallet app brand (Touch N' Go e-wallet) as the collaboration partner to execute the event program.

Problem Statement (KopiKat)

Customer wish to have a better understanding while travel or plan to stay in Malaysia and communicates with hawker stall easily through their languages. But they are lacking of online portal or guides to learn for those knowledge.

Problem statement (Touch ’n GO)

Touch ’n GO e-wallet services is popular in Malaysia. But they need a live event to enhance corporate social responsibility with the users individually. This kind of event may improve users downloads and attract more target user groups to join their e-wallet payment.

Goal (KopiKat)

The users may learn well of those language preparation and may deal easily with dialect languages while communicate with coffee shop hawker stall.

Goal (Touch ’ n Go)

User loyalty may improve after the live event and more downloads and user daily active data increased.

Objective

1. Create a mini game event for searching collection of letter from specific food stall in nearby coffee shop. After fully collect the letters, users may regroup the letter into the correct dialect to get rewards.

2. Provide a specialized QR code that with tag of dialect, user may scan it and play the minigame, the score may use to exchange various promotion in app.

3. Provide a task that require user visit the target coffee shop and done a mission like using dialect as a slogan to order food. The waiter or hawker will give the redeem code for user to claim rewards.

I selected the second objective to proceed for the microsite landing page.

2. Content Phase

A microsite landing page should have exposure to audience for reaching user for advertising purpose. So, I settled a list of keywords to deal with the Search Engine Optimization (SEO) for increasing search rank in the browser.

Microsite Keywords

Keyword

- How to learn dialect in Malaysia

Title Tag

- Unlock cashback by play dialect minigames online

- The goal hunter dialect minigames

Modifiers

- Website to learn dialect languages

- How to speak Hokkien

- Order food with Hokkien

- Educational mini games

- Malaysia cultures and languages

H1

- Dive in the food dialect universe in our minigames.

H2

- Engage more prizes and rewards from your score.

First 100 Words

Malaysia is a multicultural country that share different language and culture together. Even they communicate with dialect too… In usual places like kopitiam (coffee shop), they order food using dialect, waiter and hawker also speak dialect. …Most traveler from other country are wish to blend in with them for learning their languages and dialect. “JomDialect: Explore & Win with Touch 'n Go” 

Inbound Links

https://www.linkedin.com/pulse/malaysian-language-overview-exploring-137-languages-malaysia-tirosh

https://en.wikipedia.org/wiki/Languages_of_Malaysia

https://www.tomedes.com/translator-hub/malaysian-language

Outbound Links

https://www.touchngo.com.my/

Internal Links

https://www.myfundialectgames.com/index.html

https://www.myfundialectgames.com/game-categories.html

https://www.myfundialectgames.com/tng-e-wallet-reward-redemption.html

https://www.myfundialectgames.com/about-us.html

LSI Keywords

- Hokkien terms

- Online minigames

- Language tutorial

- Malaysia language

- Free games

Social Media Links

https://www.facebook.com./tngminigames/

*REMINDER* Those keywords and links are create virtually as a prototype concept. 

This is the moodboard of the microsite landing page. To make the collaboration of the microsite more identically, these primary colors that I apply most is the color from the official brand.

Also, I tried out the comic style webpage as it is more suits to the audiences ages and their visual preferences.

This is the microsite sitemap that I prepared. It actually is a long-scroll webpage when users view the pop-up link after they pay through Touch N' Go e-wallet.

The content sequences will be like:

Home - Step To Joins - Rewards 

This is the font family of header and body copy of the text that I prepare for the project.

The reason I apply these two families of the font is Nove work consistently with the comic art illustration and Ebrima is useful for commercial purpose websites and not affect negatively the final combination of the website styles.

To proceed this microsite, I require an identity name for the microsite event.

Pay and Play! JOM!DIALECT

How do I discover this name?

The name origin from the previous project that educates about the local dialects culture. I use the "JOM!" words that represents "Come" in Malay. Applying the title with local elements will create resonance with the users who are take part in this event, including the local youths and overseas students.

Pay and Play is the main part of the mechanics that involved in this event. So, I used it to apply on the front of the name of "JOM!Dialect" to increasing the ranking in (SEO) for higher exposure.

Wireframe

This is the sketches that I illustrate in Adobe Illustrator, and I arrange in a long-scroll form. And this is the preview of the initial layout and design.

Prototype Progression

Initial Home Section Design

Introduction Page

Element Assets Export 

Arranging Margin and Type

Background Illustration

Final Prototype

This is the final static design that I import all the Illustrations from Adobe AI to Adobe XD and I rearrange all the layout, the final effect shown as below.

Test link: https://xd.adobe.com/view/45e1a38e-d01e-436f-85f5-01090f053dde-10b2/

Storyboard

At the same time, to show the landing page for the audience. I plan to animate a showreel as the purpose for showcasing the microsite landing page in 45 seconds durations.

I have two types of the storyboard in hand sketches in below.

Lastly, I taken both of the few scenes to combine in a smooth flow of storytelling type of showreel. Mostly of the content are focusing on introducing the content of microsite landing page, and actually the event minigames also.

3. Usability Phase

Throughout the process of design, I send the prototype link for peers and giving them a short survey about the prototype experiences.

Below is the survey results.

Most of the people think I should have the element related to the webpage like cultural food and things related to collaborator.

The users suggest my microsite content should be more close to game and collaboration itself.

Since the microsite collab with games, they wish to have more animation appear in my microsite.

4. Outcome Phase

After the survey, I refined by following the action plan that I analyzed and summarize by myself. Also, I separated two version of the landing page.

Mobile

This is the landing page that mobile users may use to view after the payment pop-up windows.

Below is the walkthrough from the coded prototype website.

Desktop

This is the landing page that website users may use to view while they get to know from searching the Google and the filter ranking showcased.

Below is the walkthrough from the coded (responsive) prototype website.

Showreel

This is the final showreel that I applied on the After Effect, the animated assets are repeat used from the prototypes to avoid loss consistent of the style.

Music

331Audio. 2023. Fun Circus. (Available at:https://motionarray.com/browse/royalty-free-music/?q=Fun%20CIrcus&search_header=1) [Accessed in 9/11/2023]

Challenges

1. Style

This is the challenge part that I first time contact with, as applying a comic art style, it requires a high cooperative element to balance themselves, or else the project is not easy to perform good visual and experiences while using it.

2. Interactive Part

In the middle part of the microsite landing page, there is a small figure for users to click and jump, the aim is to let users' tryout and practice before entering the minigame provided by the microsite. But I find out it requires a precise JavaScript that use to activate the click for the figure to react and feedback. So, I take a long process for me to develop in coding.

My Thoughts

For me, I think this is a small improvement on learning to progress my own project. Since websites especially for mobile in this era are being compulsory as a trend to contact with user, engage users to take part in the business-like online shopping with the brand and many more usage.

I'm very appreciate that learning about the building the own prototype of a simulated commercial websites as a learning process to gain as an experience. And understanding how important of the role of UX for most of the users.

And lastly, let me thank for Mr. Wai Khong and Ms. Cheryl for assisting in feedback and guidance's while developing the project. For anyone who are browsing this project showcase, thanks for your patience and support!