B / PORTFOLIO - An Nguyen - UX/Product Research & Training Manager

PORTFOLIO

A personal website builds instant credibility and value.

The ROI is clear: better roles, higher pay!

1. Website goals & Target users

2. Choosing platform

3. Choosing your domain

4. Personal brand strategy

Posted on Feb 22, 2025. Reading time: almost 30 mins.

Cooked up with love by

(1) a PM who turns ideas into reality;

(2) a Teacher with smart career strategies;

(3) and a UXUI Designer focused on productivity.

And yeah! That’s me, of course, wearing all these hats

—ʘ‿ʘ—

Feel free to steal my questions to find your way.

If you are unsure the answers, read my examples below.

QUESTIONS:

1A – What are the 1-3 key reason(s) this website needs to exist?

1B – Who are your target users and what do they care about?

The first question guides your entire website.

Every decision needs to align with your main goal!

——————————

SUGGESTED ANSWER:

+ Job hunting → hiring managers and team leads

+ Building a freelance career → entrepreneurs and decision-makers

+ Creating your professional hub → your industry peers and community

Let's dive in:

👉 Hiring managers and team leads:

↳ What they care: Detailed case studies, clear problem-solving process.

↳ Call-to-Action:

Case Studies → Profile/ CV/ Work History → Contact Me

👉 Potential entrepreneurs and decision-makers in corporates:

↳ What they care: Success metrics, testimonials, industry experience.

↳ Call-to-Action:

Showcases → Testimonials → View your services & rate → Book a schedule

👉 Your industry peers and community:

↳ What they care: Industry insights, knowledge sharing, your expertise evidence.

↳ Call-to-Action:

Read blog → Download free resources → Connect on LinkedIn/ or Book mentoring session

——————————

OUTPUT FROM 1B:

Focus on ONE Primary User Group.

↳ Put all your effort into perfecting the primary CTA path.

You can always expand to serve other audiences later!

Why invest in a domain?

+ Professionalism and credibility yeah :)) Shows serious career investment
+ Easier for people to find and remember you. Better search engine visibility
+ Looks cleaner on business cards and resumes

✳️ Think long-term. Your domain is an investment in your professional identity

↳ Choose something that will grow with your career and remain professional regardless of your future roles.

——————————

✏️ CHOOSE YOUR NAME:

+ Use your personal name – it's your professional brand

+ Prefer English name if you have one (easier globally)

+ Avoid double letters (e.g., annguyen can be confusing)

+ Skip job titles (e.g., designer/developer) – your role may evolve

✏️ PICK THE EXTENSION:

+ Prioritize .com – it's the global standard

+ Avoid .co – commonly mistaken for .com

+ Choose country-specific domains if targeting local markets

——————————

Where to buy:

(1) Platform-provided domains:

like Squarespace, Wix… you can buy directly when you build your website on it

↳ convenient but may be pricier

(2) GoDaddy: secure, global but complex support

↳ While support can be frustratingly complex, requiring multiple identity checks, this thoroughness protects your domain. I love it.

(3) Local providers for Vietnam:

PA Vietnam
Matbao
↳ More expensive but faster local support

My criteria for choosing personal website platforms:

(1) Efficiently:

• Quick to set up and launch
• Easy to maintain/update

(2) Cost-effectively:

• Low monthly/yearly costs, reasonable upgrade options
• Low-code or no-code

——————————

Why I don't recommend building a website from scratch:

↳ Too costly. Backend is complicated. High maintenance needed

My experience: In 2017 spent $2,000, then got hacked and lost everything.

↳ Better use ready-made platforms and focus on your content.

WEBSITE PLATFORMS:

3A – Self built: A special case

Free:

3B – Figma

3C – Framer. Alternative: Webflow

3D – Notion. Alternative: Coda

3E – Wix

Paid:

3F – Squarespace

3G – Carbonmade

3H – Semplice

3I – Cargo Site

Not recommended for most, but might be super worth for unicorn designers and lead roles.

✳️ Best when you want to:

• Prove coding capabilities. Demonstrate technical depth

• Stand out profiles with special strong experiences

Click here to open his website ↗

✳️ Example and insights from my friend:

• LinkedIn: Long (Drake) Nguyen

• His website: Thelongpixel.com

PROS:

• Full control over your website’s design and content.

• A great way to learn coding, think like a developer, and improve team communication in your UX job.

• Impress interviewers by showcasing a site you built yourself.

• More cost-effective: ~400K VND/year for a domain + ~1.2M VND/year for hosting.

CONS:

• Takes more time and effort to build.

• Requires basic coding knowledge (HTML & CSS are good starting points).

TIMELINE:

• Case study: ~10 hours coding/writing
• Full case study completion: 1-2 weeks
↳ Most time spent on: case study imgs, content, coding implementation

Screenshot from Drake: The upload interface

is old-school but gets the job done.

💡 TIPS:

Drake chose PA Vietnam for good beginner support

↳ Best suited for static informational websites without complex backend needs.

↳ Their support team is helpful technical questions.

✳️ Best for: UXUI designers, Product designers, of course!

↳ Inspired source for your Figma website

Click here to open his Figma ↗

✳️ Example and insights from my old team member:

• LinkedIn: Khanh (Kevin) Nguyen

• His website: Click here to open his Figma

PROS:

• Very convenient for designers, full design control

• Prototype-ready, good animation

• Set up super-quickly and easily

• FREEEEEE with many templates

CONS:

• Long URLs/links
• Need to adjust prototype width for screens
• Limited functionality compared to web platforms

TIMELINE:

• With templates: 2-3 days
• Custom design: 1-2 weeks
• Writing/Designing case studies: 2 weeks – 1 month
↳ Time varies based on daily effort

✳️ Best for: Tech-savvy folks who enjoy customization.

↳ Inspired source for your Framer website

Click here to open his Framer ↗

✳️ Example and insights from my mentee:

• LinkedIn: Tai (Kaiser) Truong

• His website: Click here to open his Framer

PROS:

• Easy to learn and direct design without Figma preparation

• Rich community references and online tutorials
• Learn dev structures through customization

• FREE.

CONS:

• Upgrade only when you need to add a custom domain ($15/ month)

• Limited animation capabilities. Performance issues with complex animations.

• Some customization takes significant time

TIMELINE:

• Homepage (with animations): ~40 hours
• First case study: ~12 hours
• Additional case studies: ~1 hour each
↳ Time varies based on complexity

✳️ Best for: Quick setup (your hash deadline to job hunter) & Senior roles

↳ Inspired source for your Notion templates

Click here to open his Notion ↗

✳️ Example and insights from my friend:

• LinkedIn: Tung (Dennis) Vo

• His website: Click here to open his Notion

PROS:

• Fast loading speed and responsive design, consistent across devices

• Clean information layout for quick scanning

• Easy content updates and maintenance, low technical overhead

• FREE. Built-in content organization tools

CONS:

• Less visually impressive than custom websites

• Not ideal for complex portfolio presentations

• Restricted branding opportunities

TIMELINE:

Timeline is content-driven, not design-driven. The focus is on telling the right story, not decorating it.

💡 TIPS:

Dennis shared that:

• Prioritize recent work and latest projects

• Quick scan of product descriptions

• Only deep-dive for specialized/unique products

✳️ Best for: Quick setup.

Or: creating your professional hub – prioritize simplicity over monetization

Click here to open his website ↗

✳️ Example and insights from my friend of friend ; )

• LinkedIn: Phuc (Cavin) Tran Quang

• His website: Click here to open his website

PROS:

• Quick start (no technical skills needed) + what you see is what you get

• Free plan available

• Built-in social features (comments, likes, views)

• Google-searchable content, simple content organization

CONS:

• Significant lag when editing lengthy content

• Limited monetization options on free plan

• Big "wix.com" bar on free plan

TIMELINE:

• Tech-savvy users: 1-2 hours
• Complete beginners: 4-8 hours
• First post: 30-60 minutes

💡 TIPS:

Cavin shared that:

• Focus on writing, not tech setup. Enough for personal blogging

• Start free, upgrade later if needed. Easy to migrate when you outgrow it

✳️ Best for: Your professional hub + Freelancers, because you can monetize directly:

• Digital product sellers (ebooks, templates, art)

• Service-based creatives

• Community & membership sites

NOT for: Job hunting, or you have tight timeline to set up.

Click here to open my dear Staylab ↗

✳️ Example and insights from my business website

• Crunchbase: STAYLAB CO.,LTD

• My dear's website: STAYLAB.edu.vn

PROS:

• Strong e-monetization features with built-in membership

• Beautiful templates

• Professional analytics

• All-in-one hosting & security

CONS:

• Expensive ($16+/month)

• Steeper learning curve, can feel overwhelmed

• Content/ Article interface: Less flexibility, limited customization

TIMELINE:

• Basic site: 2-3 days

• Monetize setup: 1 weeks

• Design and content: Ongoing (more 1 month)

✳️ Best for: Visual portfolios, perfect for UI/UX designers wanting clean, responsive image displays

Click here to open her website ↗

✳️ Example and insights from my beloved friend:

• LinkedIn: Mai (Sophie) Tran

• Her website: ngcmai.com

PROS:

• Simple drag & drop interface, quick setup

• Portfolio-focused templates, responsive image layouts

• Built for visual works and easy to write case studies in English

CONS:

• Limited layout options, too-basic customization

• Slow support (24hr response)

• Less Vietnamese text-friendly, Google fonts

• No CSS customize, no additional plugins, no buttons

TIMELINE:

• Template setup: 1 day

• Basic site: 3-4 days
• Projects prep: 2-3 days

💡Note from me:

I built this website (ngthuyan.com) using Carbonmade.

But I chose it for my personal reasons, from my love of writing, having a personality that perfectly fits the bookworm aesthetic + professional work + many real-life images…

In short, I know it 100% matches my needs, but that doesn't necessarily mean you should use it, because it's pretty crazy, haha!

✳️ Best for: UI/UX and Product Designers building a premium digital presence for leadership and freelance positioning

However, my journey with Semplice was a mixed experience

Order V1

Created by renowned designer Tobias van Schneider (Carbonmade co-founder), Semplice promises deep understanding of how designers want to showcase their work.

2 key issues made me hesitant:

1. The pricing shift: I purchased Semplice in its early days (2015) when it was advertised as a one-time purchase – an attractive alternative to the subscription models common among other platforms. The reality proved more complex.

The initial setup required developer assistance, and later versions each required additional payments. While I understand products need to evolve, this approach felt misaligned with the original promise. A subscription model from the start would have been more transparent and potentially provided better value through continuous updates.

2. Performance concerns: Despite its popularity among designers, sites built on Semplice often feel heavy and can cause system lag. This raises questions about the platform’s technical foundation.

I still admire Tobias’s decade of beautiful mindful work and many cool features on Semplice. However, I now use Semplice page only as a reference – reading portfolio guides and studying other designers' work, rather than building on it.

✳️ Best for: Visual portfolios specializing in motion, typography, and artistic direction – especially those with a minimalist, zen aesthetic

I’ll share a case study of a well-known graphic designer’s website built on Cargo once it launches. For now, you can take a look on Cargo Site’s interface:

Click here to open Cargo Site examples ↗

Cargo Site has a beautiful font library from Dinamo ↗

PROS:

• Distinctive templates, strong image showcase

• Quick setup, pay after setup

• Big love: Premium typography library, beautiful font selection

• Minimal but impactful for your aesthetic personal brand identity

CONS:

• Style too niche for most

• Not suited for long-form content, limited blog capabilities

• Specific aesthetic required

TIMELINE:

• Basic setup: 1 week
• Showcase: 2-3 weeks

Strong personal branding isn’t just marketing – it’s about making your professional value instantly clear and memorable.

My big note: You will change, your personal brand will change with you

Your personal brand is not a cage. As you grow and transform, let your brand soar with you. Never confine your infinite potential to a single message or expertise. Change isn’t just inevitable—it’s your superpower. Own it!

QUESTIONS:

4A – Which drives your career path: following guidance or self-direction?

4B – What do your values bring to companies/ teams/ markets?

Everyone values those who understand their career direction.

It doesn’t need to be a specific destination, but you must know where you’re heading.

——————————

SUGGESTED APPROACH:

+ If you choose following guidance → Show strong evidence matching target roles.

+ If you choose self-direction → Express your identity + unique strengths confidently.

Let's dive in:

🎯 FOLLOWING-GUIDANCE career path:

• Consistent keywords: Align with JDs.

• Portfolio: Prove industry standards.

Example:

For Product Designer role, show standard keywords + relevant Product design project

👉 Job hunting:

Step 1: Find 3-5 dream job descriptions that align with your goals
Step 2: Ask AI: "Analyze these JDs and extract key required skills, qualifications, and industry keywords"
Step 3: Weave these keywords throughout your About page and case studies as evidence

Example my prompt for Claude:

I want to analyze multiple job descriptions and create a prioritized skills table with:

1. Top 10-15 most important skills/keywords
2. Suggestions for proving each skill on CV with evidences or metrics
3. Skill category (technical/soft)

Format as an Excel-ready table. Context about my target role:

1. Position: [YOUR TARGET POSITION]

2. Level: [CAREER LEVEL]

3. Industry: [SPECIFIC INDUSTRY]

4. Years of experience: [YOUR EXPERIENCE]

Here are the job descriptions: [Paste JDs here]

👉 Building a freelance career:

Step 1: Research top freelance profiles in your field, or your market.
Step 2: Ask AI: "Analyze successful freelancer profiles in [your field] and identify common patterns in how they present their services and results"
Step 3: Structure your portfolio to highlight these winning elements

👉 Creating your professional hub:

Step 1: Research your field's trends and strengths:
↳ Find trending industry keywords

↳ List favorite books/articles in your expertise areas

↳ Identify topics where you have unique insights
Step 2: Ask AI: "Help me extract key concepts and themes from these resources: [your books/articles/topics] to develop my unique professional perspective"
Step 3: Structure all your knowledge sharing around these expertise and insights.

——————————

🎯 SELF-DIRECTION career path

• Consistent keywords: Personalize. Prove your unique values.

• Portfolio: Showcase diverse experiences.

Example:

By my website, I express my authentic voice and fulfilled experiences/ events. The courage to be myself – my lifelong journey to discover and love all my aspects.

If you understand yourself, you can identify niches in the economy or social world that are best suited to you. High risk high return!

As Harvard Business Review highlights The Strategic Genius of Taylor Swift, so let's learn from her NYU Commencement Speech:

Scary news is: You’re on your own now.

Cool news is: You’re on your own now.

I leave you with this: We are led by our gut instincts, our intuition, our desires and fears, our scars and our dreams.

And you will screw it up sometimes. So will I. And when I do, you will most likely read about on the internet.

Anyway, hard things will happen to us. We will recover. We will learn from it. We will grow more resilient because of it.

How to show your self-awareness strongly:

Step 1: Write down your reflections for 4 aspects below.

Step 2: Then use AI to generate 10-20 keywords defining your professional path.

✳️ Aspect #1: Your Superpowers:

What you're good at + What you love

↳ Champion your strengths without apology. No one can advocate for you better than yourself!

✳️ Aspect #2: Your Weakness:

What you can't and don't want to do (helps filter out distractions)

↳ Byproduct effect: When you express vulnerabilities boldly, no one can trigger you.

✳️ Aspect #3: Your Aim + Your Game:

Define companies/products/projects you love and want to contribute to.

↳ Manifest? Yes – because you know what you want and express it clearly.

✳️ Aspect #4: Your plan B:

Know your limits + fears. Chaos happens, don't worry.

↳ Plan for your worst days during your best days.

——————————

OUTPUT FROM 4A:

10-20 keywords defining your career direction (skills + goals + traits)

↳ Use across web, study cases, CV. It's your bold confidence.

It helps you:

(1) Direct positioning → More opportunities

Stand out in the job market and attract the right fits.

(2) Consistent story → Builds authority

Guide your content/portfolio to showcase your worth confidently.

——————————

SUGGESTED APPROACH:

Step 1: Identify your Value Proposition.

Step 2: Turn it into your Signature Statement.

Let's dive in:

✏️ Your Value Proposition:

Steal my practical approach in Product Management:

YOUR VALUE PROPOSITION = FEATURES + ADVANTAGES + BENEFITS

+ Features – Your clear title/ identity

+ Advantages – Your unique differentiator

+ Benefits – Your biggest metric/ impact

More details:

✳️ Component #1: Features

Your common-sense title + level (+ domain)

↳Choose widely recognized titles over niche ones. Keep it simple and clear.

Notes:

(1) Avoid confusing/ rare titles: UX Strategist; Product Specialist; Product Consultant

(2) Use standard industry titles: Senior Product Designer; Lead UXUI Designer; Senior Product Manager

(3) Add your domain expertise if relevant:

Senior Product Designer, Healthcare
Lead UXUI Designer, Fintech
Senior Product Manager, Banking.

✳️ Component #2: Advantages:

What makes you stand out from others!

↳ How to define? 3 ways:

(1) Leverage Career Journey

Blend past + current roles for unique value.

Example: Ex-UX Designer turned PM brings superior user testing skills others lack.

(2) Show Peak Performance

Master 1-3 core skills with proven results.

Example: 3 years specialized in B2B design systems, boosting team efficiency 40%.

(3) Highlight Resource-Smart Impact

Show soft skills that maximize results with minimal input.

Example: 6 years startup experience + business sense = skilled UX Lead managing 10-person teams efficiently.

✳️ Component #3: Benefits:

Your concrete impact through numbers & business outcomes

↳ Lead with your most impressive, verifiable metric.

↳ This should be the first thing visitors see on your homepage – make it impossible to ignore!

——————————

✏️ Your Signature Statement:

Steal my basic signature-statement formula:

I am [FEATURES] do/ achieve [BENEFITS] through/ by [ADVANTAGES]

↳ Use everywhere: homepage, LinkedIn, CV

↳ Quick value at first glance.

Examples:

I am a Senior Product Designer in Fintech who grew user engagement 170% through my combined UX research and psychology background.

I am a Lead Product Manager in Healthcare who drove $1.3M revenue by leveraging UX design team with my start-up founder experience.

——————————

OUTPUT FROM 4B:

Show Value Proposition in Signature Statement.

Make it billboard-bold!

👉 Up next: I am writing more about case study structure, and how to create effective sub-pages that serve your goals. Stay tuned!

🦁

AN, NGUYEN THUY

— Relocating to Kuala Lumpur —

ngthuyan14@gmail.com

So you’re ready for

YOUR OWN WEBSITE?

Here's your one-stop guidelines

– for UX, Product professionals, or designers –

1.

1A – Website goals:

—

1B – Target users:

—

↓

2.

↓

3.

CHOOSING PLATFORMS

3A – Self-built website: A special case

—

3B – Figma

—

↓

3C – Framer/ or Webflow

—

↓

3D – Notion/ or Coda

—

↓

3E – Wix

—

↓

3F – Squarespace

—

↓

3G – Carbonmade

—

↓

3H – Semplice

—

↓

3I – Cargo Site

—

↓

4.

4A – Career direction:

—

↓

4B – Value proposition:

—

↓

*Coming soon

CASE STUDY STRUCTURE

**Coming soon*