UX/UI · MOBILE WEB

M Tourist

UX Flow Design for International Visitors

This project was completed during my time at The Mall Group. The work is shown here for portfolio purposes only.

Built with

Tools behind the build

The core stack used to shape the product experience, interface, and implementation.

FigmaDesign

Tourist App is a membership and privileges application designed for international tourists visiting Thailand, offering exclusive deals and discounts from partner retailers. The project scope covered end-to-end UX flow design across every touchpoint from first entry to becoming a fully verified member.

What I Designed

**End-to-End User Flow**

The flow spans three access channels native app, mobile site via QR Code scan, and desktop browser all leading into the same experience. I mapped every path a user might take, from the Welcome screen through registration, identity verification, and full feature access.

Registration uses a gated access model: users complete a standard sign-up form, verify via email OTP, then must enter an Invitation Code to proceed. This controls who can access the app during rollout without creating friction for invited users.

**Passport Verification System**

To unlock full membership privileges, tourists must verify their identity at a physical counter using their passport. I designed both sides of this interaction the tourist-facing flow for scanning or uploading passport documents, and the staff-facing web interface at mstaff.mcard.com where M Staff receive and confirm the information.

**Membership Tier System**

The app supports four membership tiers Gold, Platinum, Diamond, and UOB each with a distinct UX treatment. Tier status is surfaced on the home screen alongside personalized offers, reward cards, and categorized partner listings.

**Feature Set**

My QR displays the member's personal QR Code for use at partner stores. Rewards surfaces coupons, point balances, and expiry dates. E-Coupon allows redemption without points. Earn & Burn M Point handles point accumulation and redemption. Directory helps tourists find participating stores and venues nearby.

Phased Rollout

The project was structured across three launch phases to release features progressively as the platform matured. Phase 1 focused on core features Home, My QR, and basic Rewards. Phases 2 and 3 expanded into E-Coupon, Earn & Burn M Point, and Directory.

Key Design Considerations

  • Designed for international users across multiple languages and digital literacy levels
  • Dual interface tourist-facing app/web and staff-facing web tool needed to work as a connected system
  • Gated access via Invitation Code required a flow that felt natural, not like a barrier
  • Responsive design covering both mobile and desktop without compromising the experience on either

Interaction Walkthrough

The motion demo works best as a quick overview giving a sense of the full experience before diving into the details.

Product Screens

A view of the M Tourist Card mobile application dashboard showing membership tier levels and custom user privileges.