Trang's website

How this blog runs

2026-07-14T00:00:00Z

This post is slightly technical and it would be useful to have some knowledge of data fetching and website deployment. TL;DR is that I built this site and blog using Markdown files and Eleventy static site generator.

Why #

I created this site as my little corner of the internet. A space that’s truly mine. I didn’t want to rely on paid platforms like Substack or Medium because I believe in decentralization. Owning my content and having full control over my site is important to me. Plus, I thought that building it myself might be a fun coding challenge.

Here’s what I set out to achieve:

Own my content – No lock-ins, no platforms deciding what happens to my writing.
Easy posting and editing – Writing should feel effortless, not like managing a system.
Future-proof format – Markdown is simple, portable, and built to last.
Lightweight and fast – No unnecessary bloat, just clean and speedy pages.
Content first – The words should shine, not be buried under distractions.

This blog is a work in progress, and that’s part of the fun.

The process #

Create notes in Notion
Generate the blog
Push to a Git repository
Deploy the site

A visual of how this blog runs

Tools and technologies #

Notion – Content creation and organization
Eleventy – Static site generator
Git – Version control and code management
Netlify – Automated deployment and performance monitoring

Create notes in Notion #

Everything starts in Notion. I considered alternatives like Obsidian, but ultimately, I chose Notion because I already subscribe to it, and its database functionality is a good fit for my needs. I'm also familiar with the tool, so it made sense to use it.

I needed a way to organize tags and have control over when a note gets published, and Notion provides a structured way to manage that.

The database in Notion with tags and flag if the post is published or note

I usually start by drafting the post, refining it, and making adjustments until I’m satisfied. Once it’s ready, I mark the Is Published checkbox in Notion to publish it.

Generate the blog #

After ensuring I’m happy with the note(s), I run a Node.js script named fetch-notion.js that:

Connects to Notion via Notion API.
Fetches published notes.
Downloads images and optimizes them.
Converts Notion content to Markdown.
Saves posts as .md files.
Deletes old files to keep the blog clean.

Output from the script that fetches the content

After checking the script output to ensure everything looks good, I commit the changes to the Git repository.

Deploy the site #

After pushing the changes to the repository, Netlify automatically builds and deploys the site.

As part of this process, a Lighthouse check runs to ensure the site meets performance, accessibility, and SEO standards.

Netlify deploy log

Lighthouse scores with 100 for performance, accessibility, best practices and SEO

Room for improvement #

Setting up this site and blog has been a great learning experience, but there’s still room for improvement.

Instead of manually generating Markdown files, I’d like to streamline the deployment process so that explicit execution of the fetch-notion.js script isn’t necessary.

Fortunately, Notion introduced Webhooks in December ‘24, and I plan to explore how they can automate this workflow.

Additionally, migrating my portfolio and generating it in the same way as the blog is something I’m considering.

Update: Notion's webhooks made this click into place: now I have a Notion automation that pings a Netlify build hook whenever I publish, triggering a rebuild automatically. No need to run the fetch script by hand anymore, and the portfolio now syncs the same way.

The ultimate goal is to self-host both the site (no need for Netlify) and the git repository (maybe using Gitea?). Dropping Notion is a nice-to-have down the line. Well, I’m getting ahead of myself here, though, mhihi.

Curiosity #

Do you fully own your content as well? I’d love to see what you’re building! Feel free to share your blogs, digital gardens, or small personal sites. I’m always curious to connect with like-minded creators.

A tale about a messy kitchen

2025-09-11T00:00:00Z

This is a completely made-up tale I initially wrote for a few of my pals. Hope you enjoy it.

Once upon a time, there was a kingdom called Patchworkia. Let’s talk about how Patchworkia ran its royal kitchen.

Duplication without coordination #

In the royal kitchen, three chefs might chop the same onion in three different rooms. One used a rusty knife, another had a sharp one but no light, and the third had music but no onions. That’s how internal systems worked: fragmented, redundant, and disconnected.

Ingredients mislabeled, misplaced, or missing #

Cupboards held the same spices under different names. Salt was “seasoning” in one place, “white powder” in another, and “???” somewhere else. Some ingredients had no label at all. Rumors spread about a box of labelling stickers but no one had ever seen it.

No clear ownership #

Some tools dated back to recipes written in Latin. Others were new, but incompatible. No one knew if the kitchen had one head chef, or seven. One app claimed a dish was ready, another said it never left the oven. Notes didn’t exist. Accountability disappeared.

Lies and court politics #

The “smart oven” reported every soufflé had been served, though half were raw. Some recipes took three winters to prepare (only to be forgotten on a dusty shelf before anyone ever tasted them). Decisions on what to cook were driven not by diners but by court politics. If Lord Manuka liked sweet, everything was sweet, regardless of what citizens wanted or tolerated.

Trust collapse #

Then came a new wave of chefs. Some were fired before they’d even sharpened their knives. Some burned out after just a few shifts. And the ones who stayed? Many stayed only for the coin. The inns outside the royal palace paid less, so they endured the chaos, even if their hearts were no longer in the craft.

Cooks tiptoed around the chaos. Some ignored systems and brought their own forks. Others gave up and ordered takeout. Without clarity, anxiety grew. The system wasn’t malicious, but unmanaged complexity turned it into a forest: ivy over ovens, mushrooms in cracks. A few clever raccoons figured out how to survive. Multiple raccoons even tried to serve the dishes themselves, pretending to be cooks. Diners couldn’t always tell the difference.

What the cooks needed #

Healthy ecosystems depend on balance and clarity, meaning light, water, food chains. Healthy kitchens depend on clarity of flavor, balance, and trust in the recipe. Patchworkia had none of that. What was needed?

A shared recipe book
A common pantry
Tools that work together
Permission to taste, learn, and iterate
Trust that mistakes could be surfaced and improved

The cooks wanted to serve beautiful meals. The system didn’t let them.

Moral of the story #

A healthy system is not built on secret sauces, guesswork, and royal whims. It’s a well-lit, open kitchen where people know what they’re making, where to find ingredients, and how to listen to the diners. And just as important, the meals need to be priced reasonably. Because even the best recipe fails if citizens can’t afford to taste it.

Let’s build that kitchen.

P.S. There was, in fact, one sous-chef who stood apart. He wasn’t universally loved. His words were sharp, his tone too direct for many. At first, people rolled their eyes or bristled at his challenges. But he was clever, tireless, and far more competent than most. Where others gave up, he didn’t. Over time, cooks began to see that beneath his bluntness was something rare: someone who cared enough to fix the mess. Slowly but surely, he helped build a real kitchen table. A common place where everyone could finally chop their ingredients side by side.

Using LLMs in product design

2025-07-16T00:00:00Z

Since the rise of LLMs, I’ve experimented to understand its capabilities, test its boundaries, and assess what’s possible today and what still lies out of reach. Below are some notes on how I integrate AI into my daily work, across the entire design process.

The process:

Research
Ideation
Prototyping with LLMs tools
Validating and testing with users
Include findings into new prototype
Handover to engineering
Product marketing
Measuring impact

Tools that I’m using

Research #

Understand the problem #

At the start of any project, it’s essential to understand the problem we’re solving. I work closely with the product manager to define it clearly, often asking myself (or my "AI self") to rephrase the problem statement in simple, human language.

Detective work #

Then it’s time to roll up the sleeves and reach out.

Talk to actual users. Also engage key stakeholders (such as Sales Reps and customer support).
Check out data available. Dive into product analytics and connect with data team folks. Extract pain points from existing logs.
Create automated surveys using Typeform or swift through past surveys results.
Watch recordings on Clarity or Hotjar or Smartlook. See how users interact with the product.
Explore how others do it. I like going to Mobbin for inspiration and create collections there.

Typeform results

Clarity recording

Saved screens in Mobbin collection

Good practices #

Translation

I believe good design begins with good translation. When speaking with users, we often operate in different "languages," so I make it a point to reframe the problem in their terms and check for mutual understanding.

Framing

When reaching out, clearly state what you're looking for while remaining open-minded. Often, someone will share unexpected information that proves incredibly valuable.

Solid relationships

Strong collaboration is key, especially with stakeholders from other teams. I invest time in building trust and open lines of communication. These relationships not only help surface edge cases and constraints early but also ensure smoother execution down the line.

Gather insights and findings #

To organize my research efficiently, I create dedicated projects in ChatGPT or in NotebookLM that store various resources including playbooks, documentation, result summaries, and datasets.

Dedicated project in ChatGPT

I conduct all related conversations within these projects for better continuity. Throughout this process, I follow one simple rule: "Trust, but verify."

One piece of advice from my manager Masha that I keep in personalized settings:

Don’t default to agreement — challenge my ideas to offer a contrarian view.

It’s a reminder to stay critical, not just collaborative.

An output from the research could be a simplified set of user stories.

User stories

After gaining a solid understanding of the problem, I create a list of questions to discuss with the product manager and engineering team. This helps me get the project scope, which is essential since time and resources are always limited.

Ideation #

In this phase, it's essential to generate solutions, brainstorm ideas, and explore various approaches.

While brainstorming on my own, I also invite Claude into the process to generate alternative approaches. I ask it to outline the pros and cons of each direction, which helps me think more critically and uncover angles I might not have considered.

Approaches suggested by Claude

Flowchart #

Next, I typically create a new flowchart or update an existing one. This process gives me time to think through all edge cases in addition to the happy path.

A flow chart example

I strategically place sticky notes throughout with insider information or important points that require special attention.

Wireframes #

After understanding the flows, I focus on individual screens and components. I use my iPad with Apple Pencil to sketch in the Notes app. These sketches automatically sync to my computer, where I take screenshots and import them into Figma as reference for my designs.

Wireframe

Prototyping #

Figma #

Next, I convert the wireframe into a polished Figma design by leveraging existing components from our design system.

When creating Figma prototypes, add clear arrows between components to show interaction flows. Keep designs clean and uncluttered to improve readability for both myself and my teammates.

Figma designs

Working prototype #

Once the design is solidified in Figma, I move into a prototyping environment like v0, Replit, or Lovable. As for Figma Make, it’s a promising start, but not quite there yet. The output can be inconsistent, such as rendering fonts much smaller than intended.

I make sure the first AI prompt includes as much context as possible and keep it easily accessible for future iterations.

I prefer using v0 or Replit, where I can work directly with the code. With Lovable, I often continue editing in Cursor to fine-tune the output and have more control over micro-interactions etc.

To keep things secure and avoid unintended exposure, I usually place early prototypes behind a password.

Apply design system #

To make sure the prototype uses our design system, I pour in a design-system.json file. Here’s a look how that file looks like, including design tokens and components.

{
  "colors": {
    "groupon": {
      ...
      "accent": {
        "blue": "#3b82f6",
        "purple": "#a855f7",
        "yellow": "#eab308"
      },
      "neutral": {
        "50": "#fafafa",
        "100": "#f5f5f5",
        ...
        "950": "#0a0a0a"
      }
    },
    "destructive": {
      "default": "#dc2626",
      "foreground": "#ffffff"
    },
    "success": {
      "default": "#22c55e",
      "foreground": "#ffffff"
    },
    ...
    "muted": {
      "default": "#f5f5f5",
      "foreground": "#525252"
    },
    "border": "#f5f5f5",
    ...
    }
  },
  "border": {
    "width": {
      "default": "1px",
      "thick": "2px"
    },
    "radius": {
      ...
    }
  },
  "font": {
    "family": {
      "sans": "Nunito Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
      "mono": "JetBrains Mono, Fira Code, Consolas, Liberation Mono, Menlo, Courier, monospace"
    }
...
  "card": {
    "default": {
      "variant": "default",
      "padding": "default"
    },
    "variants": {
      "default": {
        "background": "{colors.card.default}",
        "border": "{border.width.default} solid {colors.border}",
        "shadow": "default"
      },
      "elevated": {
        "background": "{colors.card.default}",
        "border": "none",
        "shadow": "lg"
      },
      "outlined": {
        "background": "{colors.card.default}",
        "border": "{border.width.thick} solid {colors.groupon.primary.200}",
        "shadow": "default"
      }
    },
    "padding": {
      "none": "0",
      "sm": "1rem",
      "default": "1.5rem",
      "lg": "2rem"
    }
  }
...
}

Test with users #

Once the prototypes are ready, I create a test scenario to validate the experience. I usually break it down into clear steps and use a template that outlines the goals, which I refine with the help of Claude or ChatGPT.

My focus is on crafting simple, focused tasks using plain, accessible language. The goal is to make the test feel natural and not overwhelming, so users can engage comfortably and provide honest, useful feedback.

I prefer using UserTesting for structured, scalable sessions and Lookback for more in-depth, conversational insights. One feature I particularly appreciate in Lookback is Eureka, which automatically transcribes the sessions and organizes key takeaways into headlines. I often transfer these transcripts into NotebookLM or Claude for further synthesis and reflection.

A test scenario on UserTesting

Lookback test where I obfuscated the real names

Include findings into the new prototype #

Once the sessions are complete, I transfer the transcripts into NotebookLM or ChatGPT to help extract patterns and surface key insights. I still manually review and filter the findings to ensure only the most relevant and actionable ones are carried forward into the next iteration.

Handover to engineering #

The latest version of the prototype is prepared in a format that's ready for handoff to engineering. It serves not only as a design reference but also as a useful input for estimating development effort. I make sure the flow is clear, edge cases are considered, and the context is easy to grasp.

Product marketing #

I prepare for the release by creating relevant visuals for user-facing communication. I also refine the content to align with our company’s tone and brand guidelines.

Measuring impact #

While measuring impact is typically the responsibility of the Product Manager, I like to check in after a month, a quarter, or even six months post-release to see how things are going. It helps me understand what worked, what didn’t, and how the design is performing in the real world.

Summary #

I treat LLMs as another tool in my design toolkit, but one I’m not afraid to challenge. I plan to keep refining this approach over time. It’s important to work with AI responsibly and ethically, while also shaping the tools in a way that pushes my own thinking forward.

Principles now

2025-06-23T00:00:00Z

This is a catalogue of principles that drive me now.

Meet people #

And meet them in a way so that you can see where they’re at conceptually, emotionally. Verbally recognize their wisdom and emphasize when things go well.

Stay real #

Give zero fuel to poor behavior, bad ideas, performative smartness. Focus your emotional and intellectual energy on the right things.

Careful curation #

Escape the algorithm by selecting information content with intention. Also consider stepping away from your screen and doing something completely different and unrelated.

Trust #

Trust needs to be earned and is a glue to quality relationships.

Warmth #

Antidote to negativity is warmth, not positivity. Positivity tells a sad person that there is no reason to be sad. Warmth asks the sad person if they want to go get some ice cream.

Healthy self-competition #

When you compete with someone else, you let their values define your goals and the perception of your own performance. Define your values, embrace growth mindset and set ambitious, exciting goals. Progress over success – celebrate incremental accomplishments and enjoy the journey.

Curated lists

2025-05-25T00:00:00Z

This note contains few lists – of websites, films and sounds that I enjoy at the moment. The date of this note is the date of latest update as I make changes to it quite often.

Books #

A Sting in the Tale by Dave Goulson – A deep insight into the crucial importance of the bumblebee
Japan: The Cookbook by Nancy Singleton Hachisu – Simple and elegant dishes with insightful notes

Websites #

https://worksinprogress.co/ – Both digital and printed magazine of new and underrated ideas to improve the world.
https://www.growbyginkgo.com/ – Digital and printed magazine on all things biology
https://nomaprojects.com/blogs/recipes – NOMA recipes
https://nesslabs.com/best – Posts about creativity, productivity, mental wellness
https://www.fromjason.xyz/ – Jason Velazquez and his digital garden
https://sansceuticals.com/journal/sustenance – Nourishment journal
https://atmos.earth/ – Climate and culture
http://www.tastysnacking.com/ – Snack reviews by Tiffany Tseng

Films #

Sound #

Curation for the win.

I once made a promise to myself: to never stop going on the occasional “random quests”, both online and offline. There’s something exhilarating about an impromptu journey without a set destination, whether it’s wandering around the internet or heading to a local concert venue to support emerging artists.

Rather than passively taking what’s handed to me, I choose to discover, research, and refine my tastes. It keeps life interesting and ensures I’m always learning something new.

Here’s to the curation and to the curators.

Product design at Groupon

2025-02-03T00:00:00Z

At Groupon, this is our designer community set of principles. I’ve put together these guidelines as a shared framework to ensure great collaboration with our stakeholders and smooth hand-offs to our development team. Think of them as our collective best practices to keep our work clear, structured, and accessible to everyone.

Clean design output #

Organized files #

Always keep your shared Figma files tidy and well-organized. While it’s okay to experiment in your personal archives, the versions you share with developers and stakeholders should be clean and structured.

Structure and Clarity #

Use auto-layouts and sections to build a clear hierarchy in your designs. Keep your utility components (like patterns and content elements) separate from your actual design work.

Clear naming and resources #

Give your designs a concise, intuitive title and include links to relevant resources such as Asana, Jira, diagrams, or user testing sessions. This makes it easy for everyone to find context and additional details.

Context through video #

When your designs are nearly ready, consider recording a short Loom or video to walk through the context and your solution. Link this video directly to your Figma file for easy reference.

Thumbnail #

Ensure that each Figma file includes a thumbnail cover. A well-crafted thumbnail not only adds a professional touch but also makes it easier for team members to quickly identify and reference your work.

Ensuring the right access #

Please ensure your Figma file is accessible to all relevant team members (ideally everyone at Groupon). Avoid keeping shared files in your Drafts. If an assigned developer doesn’t have a Dev seat or a PM lacks view rights, please make sure they get the necessary access. For access-related issues, you can use our dedicated Google Chat space called Figma Access.

All necessary resolutions #

Unless you've agreed otherwise with your product manager, please prepare screens for:

Mobile (Touch)
Desktop
App (Light)
App (Dark)

Consider special cases #

Loading states #

Provide skeletons or loaders.
Include designs for when loading fails.

Error states #

User input handling and system errors.
A generic "Something went wrong" message is essential.
Where applicable, specify the error reason.

Missing data or images #

Use placeholders for images or data that might not arrive from the backend.

Text overflow #

For texts that are too long, consider using truncation (e.g., ellipsis).

Dark mode #

Ensure your designs are compatible with dark mode.

Data-informed decisions #

Make design decisions grounded in data and aligned with our business objectives. For example, a new feature might potentially boost conversion rates by a certain percentage or streamline processes for agents, resulting in significant revenue savings. Use relevant data sources to guide your design choices, such as:

Clarity
Google Analytics
Tableau

Product marketing #

Consider how the new feature will be communicated to our end users. Think about the various channels that might be used—whether it's through emails, push notifications, landing pages, modals, or in-app tours with cues. Additionally, prepare visuals that the content team can integrate into their communication strategy. This collaborative approach ensures that the feature is not only well-designed but also effectively marketed.

Implementation #

Where applicable, prepare accompanying HTML and CSS examples in CodePen to showcase animations or interactive elements. This helps developers better understand the intended behavior and enriches the overall design narrative.

Summary #

By adhering to these guidelines, we maintain a high standard of clarity and efficiency in our design process at Groupon. This collaborative approach not only streamlines our workflow but also reinforces our commitment to quality and transparency. I’m excited to share this glimpse into our processes and hope it inspires others to adopt similar practices.

The process of crafting a great tutorial

2024-11-14T00:00:00Z

Effective knowledge sharing requires the right tools and a thoughtful process. Here’s how I approach creating tutorials, from drafting scripts to sharing polished videos.

In this guide, I’ll walk you through my approach to creating tutorials using a specific example: How to Redeem Vouchers, designed for Groupon Merchants.

The tools #

Claude and ChatGPT – for refining and perfecting the script.
Tella – for recording desktop content and editing the source materials.
Bezel – for capturing mobile device screens.
FFmpeg – for sound editing, including removing and merging audio tracks.
Eleven Labs – for enhancing or changing voiceovers.

The process #

Script
Preparation
Record, edit and download
Post processing
Share

Script #

First, it is crucial to draft the script with the screenshots. For signing it off with stakeholders, the draft lives in a Google doc. Then have it proofread using an AI tool of your choice – I used a combination of Claude and ChatGPT.

Preparation #

Before recording, ensure all necessary accounts and materials are ready, with no sensitive data visible.

For example, I prepared a Merchant Center account with a corresponding Customer account containing at least six available vouchers for redemption. Testing this setup in advance ensures a smooth recording process.

Record, edit and download #

Capture footage using Tella for desktop recordings and Bezel for mirroring and recording mobile device screens.

Tella offers a flexible editing environment where you can trim, rearrange, or replace sections with ease.
For mobile recordings, Bezel mirrors the device screen onto your computer, ensuring high-quality visuals.

Multiple recordings in Tella edit mode

Post processing #

Extract the original audio using FFmpeg:

ffmpeg -i original_video.mp4 -q:a 0 -map a output_audio.mp3

Use Eleven Labs to replace the audio with a professional-quality voiceover. For instance, I prefer the River voice option.

Eleven Labs voice changer

Upload the extracted audio, generate the new version, and save it as main_audio.mp3.

Remove the original audio from the video:

ffmpeg -i original_video.mp4 -an video_without_audio.mp4

Combine the video with the new voiceover and background music (set the music volume to 2% for balance):

ffmpeg -i video_without_audio.mp4 -i main_audio.mp3 -i background_music.mp3 -filter_complex "[1:a]volume=1[a1];[2:a]volume=0.02[a2];[a1][a2]amix=inputs=2:duration=first[a]" -map 0:v -map "[a]" -c:v copy -shortest output_video_with_audio_and_bg_music.mp4

Upload your polished tutorial to YouTube or your preferred platform and share it with your audience.

Guidelines for tutorial design #

To ensure a professional and visually appealing result:

Use a gradient background for a polished aesthetic.
Keep the layout minimal and uncluttered.
Use zoom effects to emphasize important details.
Add pleasant, non-intrusive background music to enhance the viewing experience.

Here’s the output video:

https://www.tella.tv/video/how-to-redeem-groupon-vouchers-1-6rpj

Creating tutorials can be a rewarding process, allowing you to share knowledge in an engaging and professional way. Happy creating.

On (design) leadership

2024-09-25T00:00:00Z

These are my personal notes on leadership that I would appreciate back when I was all new to the role of a leader. Hopefully, someone out there will find this insightful as well.

How It All Started #

In the spring of 2021, I had the privilege of stepping into the role of Product Design Lead. During one of my one-on-one sessions with Honza Čurn, I expressed my ambition to transition from an individual contributor to a leader. With his trust and support, I embarked on the journey of building an in-house design team, starting by hiring our first Product Designer. Before we knew it, our team had grown to five talented designers.

Given that leadership was a new frontier for me, I enrolled in a leadership workshop cohort provided by Femme Palette for female leaders. Additionally, I benefited from monthly mentorship sessions with Lusine Yeremyan, whose invaluable insights, lectures, and tips have been instrumental to my growth.

TL;DR #

Here are the key takeaways I'd like to share with fellow leaders, official or unofficial:

Listen
Grow and nurture your team
Learn business
Communication is key
Lead by example
Educate others in the company

Listen #

Many people listen with the intent to reply rather than to understand. The most successful listeners are those who keenly observe body language, voice, and tone. A valuable piece of advice I received was to avoid saying, "I know exactly how you feel," as it's often impossible to fully grasp the complexity of someone else's situation. Instead, focus on giving your full attention to the person speaking.

Grow and nurture your team #

Believing in your team's potential can significantly enhance their performance. If you, as a leader, have confidence in your team's capabilities, they are more likely to excel.

An effective exercise is to list your team members and rank them based on their performance. Reflect on how you treat each person. Is your approach consistent? Do you provide equal opportunities and space for growth?

As a leader, you share in both the successes and failures of your team.

Have 1-on-1 Sessions #

At the beginning of each month, I would post my available slots in a private Slack channel for team members to reserve their 1-on-1 sessions. During these meetings, we would discuss:

What did you complete over past month?
What made you happy in the past month?
What did you not like about last month?
What are the blockers or where do you need my help?
Where do you see yourself in half a year/year/5 years?

Provide a clear path for promotion #

Ideally in a format of rubric of skills or knowledge the member’s role needs to acquire. Call that a career ladder.

It serves two things – folks have structure to fall into and can feel progress. But also those who want to chill, can chill. When a designer asks for a promotion, I would go pull it out and say for example “To get a raise, you should first become an expert contributor to our design system.”

Here’s an example of a Product Design rubric.

Keep Track of Your Team’s Strengths and Weaknesses #

I created and continually updated a spider chart for each team member, assessing their abilities in:

Ability to learn quickly
System Design
Product Sense
Frontend Development
Visual Design
Mentoring

Create a sense of belonging #

A great leader fosters a sense of belonging within the team. We held regular design sessions to discuss specific design-related topics, encouraging each designer to share their insights, opinions, and ideas.

Learn business #

It is crucial to learn the business and its politics: how the organization makes money, how designer roles contribute to that, and how to get others to see that.

Part of why so many design-adjacent roles are struggling is because market conditions (e.g., higher interest rates, over-hiring during the pandemic, etc.) shifted emphasis from growth to profitability. If the role isn't seen to contribute to the bottom line, it won't be around long.

Alas, many designers aren't used to thinking in these terms. I hear from many who seem to think that 'user centricity' is self-evidently desirable. As a result, they can't make convincing business arguments for their role.

Know how your team’s work impacts business metrics.

Communication is key #

Effective communication is essential, especially during times of uncertainty like the COVID-19 pandemic. Regular and transparent communication helps alleviate anxiety. It's important to react promptly and not wait for the perfect moment to address issues.

Lead by example #

Strive to be an exemplary designer, have confidence in your work, and avoid lousy outputs. Authenticity is crucial – over time, people will recognize if you are not genuine.

Educate others in the company #

Advocate for design's equal place alongside engineering and product development. Share your expertise on product design and research, and educate others within the company about these critical areas.

I hope these insights will be helpful to someone out there in their leadership journey. Remember, leadership is not just a position but an ongoing commitment to personal and team growth.

Ideal work environment

2024-08-15T00:00:00Z

This is the ideal setting/environment for me to work effectively as a product designer.

Build with the end users in mind #

Implement continuous research, talk to the users on a regular basis and gather the insights.

Meaningful direction #

Remind the purpose of long term goals.

Aim for clarity #

Make data-informed decisions, articulate ideas properly.

Decide and move on #

There isn't always a best answer. The important thing is to make a decision, and move on.

Measure progress with actual work #

Create small scoped tasks where you can show a diff in a design/code file.

Give (radically candid) feedback along the way #

There should be a possibility to give radically candid feedback anytime. We can hop on a 1on1 call/chat anytime.

Make a space for cross-functional teams #

Ping-pong between designer and developer and have enough autonomy/accountability.

Look back and celebrate #

Crucial to keep the team motivated.

Context > consistency #

When it comes to design, I think designing around the current context is better than designing to satisfy prior consistency.

So, these are the main points that come to my mind. Most of them are must-haves and I will challenge the status quo when the work setting lacks any of these.

Calm rules

2024-06-30T00:00:00Z

Growing up in a small town in a house with a garden ingrained in me a deep appreciation for the sounds of nature and calmness.

Now I live in downtown Prague, which is tremendously noisy. Noise pollution is everywhere, from roadworks and tourist groups yelling their drunken anthems to cars and motorbikes vrooming under my windows. At some point, I had to protect my hearing to stay serene in the midst of tumultuous life.

Nature #

Regular ventures into nature are crucial to me. I take trips by train, on foot, or by bike, ideally near a lively body of water such as a stream, spring, or lake, as I love the gurgling sounds of water. Spring is lovely, with an abundance of bird chirping. If I don’t have the option to escape the city, I compensate by visiting a nearby university botanical garden (which offers free entrance to all open areas) with my camera and a book, and I relax there for at least two hours.

Earplugs to the rescue #

Earplugs help a lot. My quality of life has increased exponentially thanks to these little gems made of silicone. I put them on whenever I need to take public transport. Let me tell you, there’s a lot of buzz in shared spaces. It’s relieving to filter out unnecessary noise – especially negative remarks from bitter folks.

I also keep a pair or two at my workplace by my desk. The daily average number of people who curse in our room is three. I mean, it’s good to let your frustration out, but hey, I need to focus on my work. So if you need to talk to me, wave.

I like to think of earplugs as masks for ear canals.

Balance #

Of course, there is a time and a place for excitement, euphoria, joy, and even nervous anticipation. But living at the extremes of emotion for an extended period is exhausting. Layering extreme emotions over daily stress and uncertainty equals chaos.

Summary #

I seek simplicity and serenity whenever I can. Calmness is a welcome tonic that brings me back into balance, offering clarity, serenity, and quiet genius.

A tool for tracking habits

2024-02-21T00:00:00Z

Ever tried tracking a habit and found yourself overwhelmed by complicated features or social pressure? That was my experience with most habit-tracking apps. I simply wanted an easy way to log everyday habits without feeling compelled to compete or share progress. Privacy often feels neglected in these apps, and many are either too intense or revolve around unwanted leaderboards.

That realization led me to design my own habit tracker. As someone who enjoys working in Figma, I saw an opportunity to create a tool that truly fit my needs and preferences.

The mission #

My primary goal was a minimal, calming layout without icons or flashy charts. Instead, I opted for a clean grid with space for notes, sketches, or any other thoughts. More of a gentle reminder than a strict monitoring system.

It also had to be printable. There’s a certain satisfaction in physically marking progress on paper that digital tools simply can’t replicate.

The process #

Research the field #

Before diving into the design, I explored various habit trackers, from digital apps to printable versions on Pinterest and Etsy. Many felt either too rigid or overly decorative, which reinforced my decision to create something understated and flexible.

Various trackers found on Pinterest, Etsy, websites and local paper shops

Keep it simple #

I began in Figma with a basic grid layout, purposefully avoiding icons and elaborate design elements. The aim was to maintain a sense of openness so that anyone using it could annotate or draw freely without feeling cramped.

A screenshot from Figma design file

Add a personal touch #

To make it warm but not too cutesy, I played with soft typography and a gentle layout. Each section has breathing room, nothing cramped or overwhelming. The design whispers: "Take your time, this is for you.”

Test for print #

I tested the layout on different paper types to confirm print quality and usability. The final version is printer-friendly, suitable for slipping into a notebook or displaying on a fridge.

The output #

Now I have this habit tracker that feels personal, peaceful, and refreshingly analog. It’s just a grid, some space for notes or doodles, and the flexibility to track whatever I want without judgment. No apps. No notifications. No guilt. Just pen, paper, and a gentle way to check in with myself.

Habit tracker for print

Why it works (for me) #

This tracker is all about keeping things minimal but meaningful. It’s private, adaptable, and, most importantly, warm. The blank spaces invite creativity whether that’s doodling, jotting down reflections, or brainstorming new habits. It’s become a little ritual I genuinely look forward to.

So, if apps feel too loud for you too, maybe a DIY habit tracker is worth a shot. Mine has made such a difference, and if it inspires you to create your own that’s even better. Because the best tools are the ones that make you smile when you use them.

How I use the habit tracker

Qualities of a seasoned product designer

2024-01-24T00:00:00Z

When I was hiring for Product Designer roles, I checked if they had these qualities.

Critical thinking
Systems thinking
Creative problem solving
Storytelling
Research
Craft
Collaboration and communication

Critical thinking #

The ability to articulate the hypothesis in a given design, feature, or direction.

System thinking #

The ability to frame the problem from multiple perspectives, the ability to see how data from interaction can scale and map to the bigger data story, the ability to make sense of user intent, workflows and mental models in the architecture of the experience.

Creative problem solving #

Good problem solvers tend to exercise divergent thinking by looking at the problem from every angle.

Storytelling #

The ability to persuade, educate, or explain by distilling complex concepts into a narrative that others will remember or understand.

Research #

Someone who thinks like a researcher and have conducted behavioral research.

Craft #

To me craft is expected. A designer must have a certain level of craft and all the things that goes with it such as understanding design patterns, prototyping, etc.

Collaboration and communication #

Someone who can ideate to extend the thinking of engineers and data scientists. Someone who is a trusted ambassador for the team. Humility is important.

P.S. #

Of course, all of these qualities apply in ideal state. If the specific candidate for product designer role was lacking in some of them during the hiring process but had the potential to improve, I made sure they had the time and resources to learn in the particular areas (if they were hired).

Handy code snippets and files

2023-09-16T00:00:00Z

Trang’s profile picture #

trang-vu-profile-picture.JPEG.jpeg 470 KiB

Sleep on Mac #

Disable sleeping when the lid is closed running on battery

sudo pmset -b sleep 0; sudo pmset -b disablesleep 1

Re-enable sleeping when the lid is closed running on battery

sudo pmset -b sleep 5; sudo pmset -b disablesleep 0

Hidden files in Finder #

Show hidden files

defaults write com.apple.finder AppleShowAllFiles TRUE

killall Finder

Hide hidden files

defaults write com.apple.finder AppleShowAllFiles FALSE

killall Finder

Trang's website

How this blog runs

Why #

The process #

Tools and technologies #

Create notes in Notion #

Generate the blog #

Deploy the site #

Room for improvement #

Curiosity #

A tale about a messy kitchen

Duplication without coordination #

Ingredients mislabeled, misplaced, or missing #

No clear ownership #

Lies and court politics #

Trust collapse #

What the cooks needed #

Moral of the story #

Using LLMs in product design

Research #

Understand the problem #

Detective work #

Good practices #

Gather insights and findings #

Ideation #

Flowchart #

Wireframes #

Prototyping #

Figma #

Working prototype #

Apply design system #

Test with users #

Include findings into the new prototype #

Handover to engineering #

Product marketing #

Measuring impact #

Summary #

Principles now

Meet people #

Stay real #

Careful curation #

Trust #

Warmth #

Healthy self-competition #

Curated lists

Books #

Websites #

Films #

Sound #

Product design at Groupon

Clean design output #

Organized files #

Structure and Clarity #

Clear naming and resources #

Context through video #

Thumbnail #

Ensuring the right access #

All necessary resolutions #

Consider special cases #

Loading states #

Error states #

Missing data or images #

Text overflow #

Dark mode #

Data-informed decisions #

Product marketing #

Implementation #

Summary #

The process of crafting a great tutorial

The tools #

The process #

Script #

Preparation #

Record, edit and download #

Post processing #

Share #

Guidelines for tutorial design #

On (design) leadership

How It All Started #

TL;DR #