Nguyen Thanh Tung | Product Designer

MyOrbit

Project: My Orbit
My roles: Product Owner, UX Researcher, Interaction Designer, Vibe Coder
Type: Independent Product

MyOrbit app shown on a phone in the grass

01

Project Overview

My Orbit was born from a simple observation: people often forget the birthdays and important dates of their friends, classmates, colleagues, and acquaintances. At first, the idea seemed like a reminder app, but a basic notification system felt too ordinary. I wanted to create something more emotional, visual, and memorable.

That is how My Orbit appeared: a social memory app where contacts are visualized as living avatars inside a playful interactive map. Each person becomes part of your personal orbit and can hold birthdays, social links, notes, memories, and important moments.

My Orbit is not only about remembering dates. It is about making relationships feel alive.

02

Research and Audience

I used primary and quantitative research, interviewing friends, acquaintances, students, and people outside my usual social circle. The main audience emerged as highly social users under 30 who manage many connections and are open to playful, gamified experiences.

Forgetful users

People who care about others but often forget birthdays, plans, or important personal details.

Curious users

People who enjoy exploring their social circle and keeping small meaningful facts about others.

Students

Students build many fast-changing connections through school, events, and online communities.

03

UX Process

After defining the audience, I created a sitemap and focused the product around its most important flows.

Adding a new contact
Adding an important date
Importing existing contacts
Opening a mini-avatar profile
Viewing social information and reminders

I optimized these flows through moderated usability testing, then moved into low-fidelity wireframes and an early prototype. Test results led to simpler steps, clearer structure, and more predictable navigation.

04

Design and Final Testing

The final interface was designed to feel personal, playful, and futuristic without losing usability. A final usability test checked whether users could complete the main tasks confidently and confirmed that the interaction model was ready to move toward development.

05

AI and Codex Collaboration

AI supported secondary research, competitor analysis, draft personas, and testing scenarios, while real user feedback remained the source of validation. I created a dedicated project agent with product context, user logic, research notes, and future development direction.

Later, I connected Figma through MCP and built the application together with Codex. My role focused on product design, UX research, structure, and interaction logic, while Codex helped turn the design into a working application.

06

Technical Foundation

The project moved from design into a real product foundation organized through GitHub. A public domain was prepared for the product, and the application was built with React, TypeScript, HTML, CSS, and supporting development tools.

07

Conclusion

My Orbit began as a small idea about forgotten birthdays and evolved into a new way to see, remember, and interact with the people around you.

Research, playful visual design, AI-assisted workflows, Figma MCP, GitHub, and Codex-driven development helped the concept grow into a real application foundation.

Regy

Project: Regy Smart Budgeting
My roles: UX Researcher, Interaction Designer
Type: Responsive Finance Product, Case Study

01

Project Snapshot

Regy is a responsive budgeting product built around monthly planning, account awareness, and financial decisions that need enough space to compare details without losing the ability to check status quickly on mobile.

The product direction is closer to a personal finance command center than a simple expense tracker. It gives users one place to review their money, understand upcoming pressure, and decide what deserves attention next.

02

Core Problem

Most budgeting tools show users what already happened, but that does not always help them prepare. Regy needed to make the future visible: bills, subscriptions, category limits, monthly progress, and financial habits.

The challenge was to keep a rich finance product from becoming heavy across desktop and mobile while retaining enough information for control.

03

Responsive Experience

The desktop layout uses horizontal space to compare information side by side, while mobile keeps the same financial hierarchy in a tighter, task-focused flow.

Budgeting happens in sessions

Focused planning on desktop and quick financial checks on mobile.

Recurring payments create hidden stress

Subscriptions and upcoming bills stay visible before the end of the month.

Numbers need next actions

Review, adjust, pause, reduce, or keep going instead of decoding decorative charts.

04

Product Architecture

Regy is organized around six areas that connect directly to repeated weekly and monthly decisions.

Dashboard overview
Budget planning
Bills calendar
Subscription control
Spending insights
Account health

05

Visual System

The interface is quiet and utilitarian: clear surfaces, strong spacing, readable figures, and restrained accent color. Finance products need trust first, so the visual system avoids noisy decoration and chart overload.

Dashboard logicAt-a-glance status

Balance, budgets, bills, and spending pressure sit in one overview.

Decision layerWhat needs attention

Categories and unusual changes are framed as next actions.

06

Testing Focus

The strongest test is whether users can make better financial decisions with less effort.

Can users understand monthly status in under ten seconds?
Can they find upcoming bills without opening multiple screens?
Can they identify one spending category that needs attention?
Does the dashboard feel calm enough for repeated use?

07

Result

Regy shows how I approach a complex finance product: define the mental model first, then design around decisions, hierarchy, and repeated use.

The final direction brings budgeting, planning, and financial clarity into a system that can scale across desktop and mobile contexts.

Mapple

Project: SaaS Growth Analytics
My roles: UX Researcher, Interaction Designer
Type: B2B SaaS Dashboard, Case Study

01

Project Snapshot

Mapple is a B2B SaaS growth dashboard designed for teams that need to monitor revenue, customer health, retention, and churn risk from one operational view.

The direction focuses on a desktop analytics product with a clear sidebar, top-level growth metrics, an MRR trend chart, customer status breakdown, and an account table for follow-up.

02

Core Problem

SaaS teams often see growth and risk in separate places. Revenue can rise while churn quietly increases, customer health drops, or business accounts reduce usage before anyone notices.

The dashboard needed to support quick daily scanning while still showing what changed, why it matters, and which accounts deserve attention.

03

Dashboard Experience

The top level presents current MRR, new paid customers, net revenue retention, and churn. Charts and customer health modules then explain the story behind those numbers.

The hierarchy moves from direction to risk and finally into the account table for follow-up. The interface is designed for repeated team use, not a one-time presentation.

04

Product Architecture

Mapple is structured as a decision loop instead of a menu of disconnected analytics modules.

Read the growth pulse

Understand revenue direction before opening a deeper report.

$482.6K MRR

Separate healthy accounts from risk

Customer health works as an operational signal.

82% stable

Connect risk to ownership

Segment, status, MRR, and owner appear in the same row.

4,812 accounts

Return weekly without friction

Scan, compare, decide, and move into accounts that changed.

8-week trend

05

Visual System

The visual system uses restrained SaaS language: light surfaces, quiet borders, sharp data hierarchy, and one focused product accent. Complex data should feel operational instead of loud.

06

Testing Focus

Validation focused on whether the dashboard helps a team decide what to do next.

Morning revenue review

Can a manager understand growth direction and churn warning in under 30 seconds?

MRR and churn are read together, not as separate decorative numbers.

Customer success planning

Can the team identify which accounts need follow-up this week?

Risk status, segment, MRR, and owner are visible in the same row.

Leadership check-in

Can stakeholders discuss retention without another exported report?

The dashboard supports a decision conversation directly from the screen.

07

Result

Mapple shows how I approach SaaS analytics: define the operating model first, then design around decisions, risk, prioritization, and recurring team workflows.

The final direction works as a growth console: quick enough for daily scanning and detailed enough for revenue, retention, and customer success decisions.

Yooxen

Project: Yooxen
My roles: Product Designer, UX Researcher, Full-stack Vibe Coder
Type: Singapore E-commerce Platform, In Development

01

Project Snapshot

Yooxen is an e-commerce product being created for a Singapore client and a Singaporean audience. The platform brings together the practical categories people need when furnishing, renovating, or upgrading a home: furniture fittings, sanitary ware, lighting, fans, kitchen and bathroom products, tools, materials, and everyday home essentials.

I am building the product independently from early research to implementation. My responsibility covers UX research, product structure, interaction design, the Figma system, and full-stack development with Codex.

02

Singapore Market Research

The project began with secondary research into home-improvement shopping, local e-commerce conventions, category language, and the information customers need before ordering products for a renovation.

Large catalogs need orientation

Customers should understand where a product belongs before dealing with specifications and variants.

Technical products need confidence

Dimensions, compatibility, materials, delivery, and installation information must be easy to verify.

Trust continues after checkout

Support, order clarity, returns, and practical product guidance are part of the shopping experience.

03

Core UX Flows

I mapped the key journeys before moving into detailed screens. The flows connect broad inspiration with precise product decisions, allowing users to move from a room or category into the exact item they need.

Browse the catalog by room and product category
Search, filter, and compare relevant products
Review specifications, variants, availability, and delivery
Build a cart and complete checkout
Return for order status, support, and related products

04

Commerce Architecture

The information architecture is designed around repeated shopping decisions instead of a collection of disconnected pages.

Home and promotional discovery
Catalog and category navigation
Search, filters, and sorting
Product detail and variation selection
Cart, checkout, and account
Blog, support, and company information

05

From Wireframes to Figma

Low-fidelity wireframes were used to establish hierarchy and test the amount of information required on category and product pages before visual styling began.

Experience layerQuiet, practical shopping

Dense product information is organized for scanning, comparison, and repeated use.

System layerReusable commerce components

Navigation, filters, product cards, bundles, forms, and responsive states are designed as a connected system.

06

Full-stack Build with Codex

After the product structure and visual direction are resolved in Figma, I move into Codex to build the working platform. The scope includes a responsive front end and the back-end foundations needed for catalog data, product management, cart and checkout logic, customer accounts, and future operational workflows.

The design and code evolve together: implementation exposes real constraints, and those constraints feed back into the interface instead of being treated as a separate handoff.

07

Current Status

Yooxen is currently in development, with a planned release around September 2026. The immediate focus is turning the Figma product system into a stable, production-ready e-commerce experience for the Singapore market.

The project represents an end-to-end way of working: research, flows, wireframes, interface design, and full-stack implementation owned as one continuous product process.

Holapay

Project: Holapay
My roles: UX/UI Designer
Type: Fintech Product Redesign, Case Study

01

Redesign Snapshot

Holapay presents itself as a people-powered P2P e-wallet for fast transactions, card access, and global money movement. My task was to rethink how that value could be communicated through a more focused website and a clearer mobile product experience.

This was a redesign case study rather than a ground-up product build. I retained the core fintech proposition while reorganizing the experience around trust, speed, and the actions users perform most often.

02

The Design Challenge

Financial products need to show significant amounts of information without making money feel harder to control. Balances, currencies, transfers, market activity, cards, and transaction history all compete for attention.

The redesign needed to make the product feel global and capable while keeping the first interaction familiar to people who simply want to understand their balance and move money safely.

03

Redesign Principles

Trust before novelty

Balances, transaction status, security actions, and fees need an immediate visual hierarchy.

Action before explanation

Buy, sell, and transfer remain visible instead of being buried inside a financial dashboard.

Global without complexity

Currency and cross-border capabilities are presented in familiar product language.

04

Product Architecture

The redesign organizes Holapay around a short loop that users can understand quickly and return to frequently.

Onboarding and secure access
Wallet home and available balance
Buy, sell, and direct transfer
Currency and market information
Transaction history and notifications
Card, travel, and support services

05

Wallet Experience

The home screen works as the product control center. It prioritizes available balance and primary transaction actions, then moves into search, recent activity, service banners, and persistent navigation.

Primary layerKnow the current position

Balance, currency, and account state establish confidence before any action.

Action layerMove money directly

Core transaction controls remain prominent and predictable across the experience.

06

Visual System

Deep green carries the financial identity while warm white surfaces keep dense information readable. Rounded modules, restrained shadows, direct labels, and high-contrast controls create a more approachable wallet without removing the seriousness expected from fintech.

The broader identity extends the same system into the website, application mockups, card concepts, stationery, and campaign materials.

07

Redesign Outcome

The final direction reframes Holapay as a confident global wallet rather than a collection of disconnected financial features. The redesign gives the product a clearer hierarchy, a stronger visual identity, and a more direct relationship between account information and user action.

As a case study, it demonstrates how I simplify an existing fintech proposition without losing its operational depth.

Yamaha YZF-R7

Project: Yamaha YZF-R7
My roles: UX/UI Designer, Visual Designer
Type: Concept Landing Page, Motorcycle Product Showcase

01

Project Snapshot

This concept explores how a focused landing page can communicate the character of the Yamaha YZF-R7 without behaving like a conventional automotive catalog. The motorcycle remains the hero, while the surrounding interface frames its engineering, control systems, specifications, and supersport identity.

The project combines product storytelling with experimental editorial composition. It is designed as a visual showcase rather than an official Yamaha commission.

02

Creative Challenge

A performance motorcycle is both an emotional object and a technical machine. A purely cinematic page can hide the engineering, while a specification-heavy page can remove the sense of speed and desire.

The challenge was to make both layers visible: first create impact, then give riders a clear path into features, gallery content, and specifications.

03

Product Narrative

The experience opens with a full-width motorcycle image and the line "Engineered Precision," then moves through control, electronics, performance, and technical detail. Oversized statements create the rhythm; focused image modules slow the user down when a component deserves attention.

Establish the YZF-R7 as the first visual signal
Connect performance language to visible engineering
Move between cinematic imagery and precise component detail
Keep gallery, features, specs, and contact actions easy to locate

04

Modular Architecture

The page is built as a sequence of strong editorial modules instead of repeated marketing cards.

Hero motorcycle and model identity
Primary navigation and gallery access
Control and powerplant feature stories
Electronics and rider interface
Performance overview and key figures
Detailed specification categories

05

Neo-industrial Art Direction

The visual style can be described as neo-industrial technical editorialism with a restrained brutalist grid. Exposed columns and alignment lines reference engineering drawings, while oversized outline typography behaves like bodywork stretched across the page.

Base systemBlack, white, and structural lines

A near-monochrome interface keeps the visual language mechanical and precise.

Product signalYamaha blue and cinematic detail

Blue bodywork becomes the dominant accent while close-up photography provides texture and speed.

06

Interaction Direction

Interaction is intentionally controlled. Large typography and the grid establish movement through scroll, while arrows, gallery thumbnails, and section links provide direct actions without competing with the motorcycle.

The responsive direction preserves the same hierarchy on smaller screens by stacking modules, reducing simultaneous information, and keeping technical labels close to the imagery they explain.

07

Result

The final concept feels closer to a digital engineering magazine than a standard vehicle landing page. It gives the YZF-R7 a distinct product stage while keeping gallery, features, and specifications within one coherent system.

The project demonstrates how art direction, interface hierarchy, and technical content can work together without turning a performance product into generic advertising.

Learnit

Project: Learnit
My roles: UX/UI Designer
Type: Online Education Platform, Case Study

01

Project Snapshot

Learnit is a concept for an online education platform where people can browse courses, compare subject areas, purchase a program, and continue learning through one consistent account experience.

The case study focuses on the public product journey: helping a learner move from a broad goal such as changing careers or building a new skill into a course choice they understand and trust.

02

Core Challenge

Large learning platforms can make choice feel like work. Learners face many categories, course levels, instructors, prices, reviews, and promises before they know whether a program fits their actual goal.

Learnit needed to reduce that uncertainty without oversimplifying the catalog. The interface should support exploration while making outcomes, commitment, and the next step clear.

03

Course Discovery

Begin with an intention

Career, design, programming, finance, AI, and other categories provide an understandable starting point.

Compare with context

Course cards need level, format, instructor, rating, progress expectations, and price in a scannable hierarchy.

Use proof carefully

Student reviews and completion signals support a decision without becoming decorative social proof.

04

Platform Architecture

The product structure connects discovery, purchase, and learning instead of treating them as separate websites.

Homepage and promotional entry
Categories and course search
Course detail and comparison
Pricing, checkout, and enrollment
Student account and active courses
Reviews, support, and company content

05

Learning Journey

The "How it Works" experience explains enrollment as a short sequence: choose a course, begin learning, and complete the program with a visible outcome. This reduces ambiguity before purchase and gives the platform a clearer promise.

Before enrollmentFind the right commitment

Topics, pricing, reviews, and course expectations help users choose deliberately.

After enrollmentKeep progress understandable

Active learning, milestones, and completion should feel like one continuous journey.

06

Visual System

The visual direction combines a clean white learning environment with a confident yellow accent and direct black typography. Large headings make the value proposition easy to scan, while outlined modules keep categories, reviews, and learning steps organized.

The system stays approachable without relying on childish education imagery, allowing Learnit to speak to both career changers and people adding practical skills.

07

Result

The final case study presents Learnit as a coherent course marketplace rather than a collection of promotional pages. Discovery, evaluation, purchase, support, and the learning journey share one product logic.

The concept demonstrates how a broad education catalog can feel focused when information architecture and decision support are designed before visual decoration.

Horizon

Project: Horizon
My roles: To be added
Type: To be added

01

Project Snapshot

Example text — add the project context, scope, audience, and business objective here.

02

Core Problem

Example text — describe the primary user problem and the constraints that shaped the project.

03

Experience

Example text — explain the key user journey and the most important interaction decisions.

04

Product Architecture

Example text — document the information architecture, flows, and product modules.

05

Visual System

Example text — add the visual principles, component logic, and design-system decisions.

06

Testing Focus

Example text — add the validation method, testing scenarios, and observations.

07

Result

Example text — summarize the result, impact, and next steps.

Nguyen Thanh Tung - Product Designer and UX/UI Designer

MyOrbit

Regy

Mapple

Yooxen

Holapay

Yamaha YZF-R7

Learnit

Horizon

UX Audit

Product Design Retainer

Website Design

Mobile App Design

Scalable Design System

Design & Development