
Artificial Intelligence (AI) brings boundless opportunities to enhance both user experience and daily life. While foundational technologies often seem under the purview of data scientists and engineers, designers play a crucial role in bridging the gap between user needs and emerging technologies. This article explores **the role of UX** and **how to determine which user problems are best solved with AI** while assessing their effectiveness.

## Understanding UX in AI-driven design

![](assets/6-product-design-weekly-framework.png)

To develop effective AI-powered applications, it is vital to deeply understand user needs and apply UX principles throughout the design process. Only then can we create AI solutions that truly meet end-user expectations.

Consider a trading platform aiming to implement an AI system to analyze crypto market trends. While some users might find such a feature disruptive to their trading habits and fear potential data breaches, others may over-rely on the system's recommendations, even when those recommendations are flawed. This could lead to severe issues, such as automated trading strategies triggering "flash crashes," where large-scale sell-offs are executed based on negative signals, causing significant losses for both AI users and the broader market.

This scenario highlights a common challenge in applying AI across industries. It underscores the importance of close collaboration between UX designers, AI developers, and engineers to overcome these obstacles, enhance system efficiency, and foster user acceptance.

Machine learning (ML) is not a one-size-fits-all solution. Misguided applications of ML can result in unintended consequences. Identifying the right problem to address and evaluating whether ML is the most suitable tool is paramount. **While AI and ML can solve complex problems, they cannot independently identify what problems need solving**—a critical role that UX plays in steering the application of technology effectively.

## What’s New When Working with AI?

When designing any product, user-centered decisions are key. Three critical considerations for integrating AI into products are:

### Identifying the intersection of user needs and AI strengths

Determine the real-world problems users need to solve and evaluate whether AI offers unique value in addressing these issues. This requires a deep understanding of user needs and AI capabilities to ensure the proposed solution is both practical and valuable.

### Balancing automation vs. augmentation

Decide whether AI should fully automate a task or merely enhance user performance. Automation suits repetitive, mundane, or hazardous tasks, while augmentation is better suited for tasks where users want active involvement and where social or cognitive value is significant.

### Designing and evaluating reward functions

Every AI model is guided by a reward function, also called an “objective function” or “loss function.” This is a set of mathematical formulas that define the system's perception of "correct" versus "incorrect" predictions. Careful design of the reward function ensures long-term benefits and avoids unintended outcomes that might adversely affect user experience.

### Use case examples: when AI works best vs. when it doesn't

![](assets/6-product-design-weekly-fit.png)

![](assets/6-product-design-weekly-fall-short.png)

## Where to integrate AI into products and solutions

### Enhancing efficiency

AI can learn user behaviors, identify patterns, and make actionable suggestions to save time and resources. For instance, [**Siri**](https://support.apple.com/en-vn/guide/iphone/iph6f94af287/ios) suggests apps based on daily habits, like opening a fitness tracker at 6 a.m. if the user jogs at that time. Similarly, platforms like Netflix and YouTube recommend content based on viewing history.

![](assets/6-product-design-weekly-siri.png)

AI also enhances logistics efficiency. Delivery services like DHL and FedEx optimize delivery routes, cutting fuel costs by up to 30%. These systems predict optimal paths and times, saving shipping costs and improving delivery speed.

### Reducing mundane tasks

AI is ideal for automating repetitive, low-value tasks. For example, AI tools in Photoshop now automate background removal or complex graphic designs with simple commands, tasks that once required significant manual effort.

![](assets/6-product-design-weekly-mundane-task.png)

In finance, AI-powered tools consolidate data from various crypto exchanges, [generate weekly portfolio reports](https://medium.com/@batuhansenerr/ai-powered-financial-analysis-multi-agent-systems-transform-data-into-insights-d94e4867d75d), and issue alerts for sudden price changes. These tools enable investors to make informed decisions faster, automating tedious tracking processes.

![](assets/6-product-design-weekly-finance.png)

Automation, however, isn't always ideal. Some tasks, like journaling or creative work, offer intrinsic value when performed manually. Instead of fully automating such activities, AI can assist by suggesting ideas or providing guidance, enhancing the user’s creative experience without taking over.

### Supporting user tasks

AI can act as a powerful assistant, helping users achieve goals seamlessly. Financial apps like **Acorns** and **Wealthfront** use AI to help users manage savings, track progress toward milestones like homeownership, and adjust strategies based on personal financial data.

![](assets/6-product-design-weekly-wealth-front.png)

AI can also help your users accomplish tasks that were previously impossible or difficult to access.

![](assets/6-product-design-weekly-notion.png)

Grammarly and Notion AI assist users in writing tasks, ranging from crafting marketing content to editing documents. These AI tools help correct grammar mistakes, suggest better phrasing, and even provide content ideas. They enable users, even those who aren't writing experts, to create professional-quality pieces, saving time and enhancing the overall quality of their output.

![](assets/6-product-design-weekly-grammarly.png)

Similarly, [Duolingo](https://blog.duolingo.com/duolingo-max/) incorporates gamification into language learning through daily and weekly challenges. These challenges are tailored to match the learner's current proficiency level, helping them progress while maintaining an effective and engaging learning routine.

### Improving safety and health

AI enhances user safety through real-time data processing. Apple devices analyze user movements to detect falls, automatically contacting emergency services if necessary.

![](assets/6-product-design-weekly-health.png)

In healthcare, AI systems like DeepMind's retinal disease detection analyze medical images to [diagnose conditions](https://deepmind.google/discover/blog/using-ai-to-predict-retinal-disease-progression/) early. With accuracy rivaling specialists, such tools empower healthcare providers to deliver faster, more reliable care.

![](assets/6-product-design-weekly-deep-mind.png)
_AI system for predicting exAMD. Predictions from the raw and segmented retina scans are combined to calculate the risk of AMD progression within 6 months._

## Conclusion

AI is not a silver bullet for every problem. As designers, our ultimate goal is to solve user challenges and help them achieve their objectives. By understanding their needs and developing comprehensive solutions, we can identify where AI best fits to amplify outcomes. Start with the problem, then let AI elevate the solution.

**Learn more:**

- A chapter from Google's guide on [User Needs + Defining Success (Responsible AI)](https://pair.withgoogle.com/chapter/user-needs/), focusing on understanding and meeting user needs during the development of AI systems.

- The article ["Applications Of Machine Learning For Designers"](https://www.smashingmagazine.com/2017/04/applications-machine-learning-designers/) on Smashing Magazine discusses the applications of machine learning for designers, helping them understand how to integrate this technology into their design process.


Artificial Intelligence (AI) brings boundless opportunities to enhance both user experience and daily life. While foundational technologies often seem under the purview of data scientists and engineers, designers play a crucial role in bridging the gap between user needs and emerging technologies. This article explores the role of UX and how to determine which user problems are best solved with AI while assessing their effectiveness.

Product design commentary #6: AI in design - cool ideas and how to make them happen


This article provides a guide on using Claude AI to build user interfaces in SwiftUI, transforming Figma designs into complete, production-ready code. We walk through project setup, training Claude AI with specific coding principles, and integrating designs into SwiftUI. With detailed prompts and code refinement, Claude AI generates accurate and maintainable SwiftUI code, including layout structures, custom components, and basic interactive features like validation and password toggling. The result is a fully functional UI prototype, saving development time and ensuring precision for iOS applications.

## Setup project & train AI knowledge

To begin our project, we’ll create a new project within Claude AI, establishing a strong foundation of AI knowledge to support our design and coding efforts.

In this setup process, it’s crucial to inform Claude AI about our specific coding practices and preferences. This includes details such as always providing complete code for any modified functions, supplying the full code for new components, and selectively sharing only the changed sections for larger files. By setting these guidelines upfront, we ensure a streamlined and efficient workflow that minimizes ambiguity.

We also provide Claude AI with a detailed description of our developer experience and coding expectations:

> Always give full code for functions that are modified.
> If possible, give the full code to the component.
> For large files, only give the code that changes.`

> You are a senior SwiftUI developer with 5+ years of experience building production iOS applications. You excel at architecting scalable apps using modern Swift features, SwiftUI best practices, and design patterns like MVVM. Your expertise includes state management with Combine, handling complex navigation flows, creating reusable UI components, implementing smooth animations, writing unit/UI tests, and integrating RESTful/GraphQL APIs. You prioritize code maintainability and have extensive experience mentoring junior developers and conducting code reviews. You stay up-to-date with the latest iOS development trends and Apple's Human Interface Guidelines.

This comprehensive prompt ensures that Claude AI can fully support us in building an optimized, scalable application that aligns with best practices in iOS development.

## Figma to Claude AI

With the initial setup complete, our next step involves translating our Figma designs into SwiftUI code. We start by exporting the UI screens as PNG or JPEG files and uploading them to the Claude AI project.

![](assets/5-product-design-commentary-figma-to-claude.png)

## Upload context for Claude AI

When uploading, we prompt Claude AI with instructions for generating SwiftUI code:

> Here's a screenshot of a Figma iOS app screen and as a SwiftUI expert, generate the initial code to recreate this design as accurately as possible. Include the basic structure, custom components, appropriate views and modifiers, and pay attention to layout and styling. User placeholders for text and data, implement basic naviation if needed, and approximate colors and images. Optimize for clarify and efficiency, and comment on your choices and assumptions. We'll review and refine the code together after your initial implementation.

![](assets/5-product-design-commentary-context-for-claude.png)

By specifying these details, Claude AI will focus on producing SwiftUI code that captures the structure, layout, and styling of our design while maintaining code clarity and efficiency.

![](assets/5-product-design-commentary-detail-context.png)

## Implementing Claude AI-generated code in SwiftUI

Once Claude AI generates the initial SwiftUI code, we move it into our project. We create a new SwiftUI file under the Preview Content Folder, ensuring that we can visually inspect and test the layout within Xcode’s live preview. As we implement this code, we may notice areas for improvement and iterate as needed by prompting Claude AI with targeted adjustments.

![](assets/5-product-design-commentary-generate-code-in-swift-ui.png)

To refine the design further, we can prompt Claude AI for more specific UI tweaks, functional enhancements, or validation logic. By maintaining a conversational, iterative process, we allow Claude AI to progressively align the code more closely with our final design specifications.

![](assets/5-product-design-commentary-claude-answer.png)

![](assets/5-product-design-commentary-claude-answer-2.png)

## Implementing Claude AI-generated code in SwiftUI

The result of this collaboration with Claude AI is a SwiftUI-based UI that not only replicates the visual design accurately but also includes functional interactions. Users can interact with form elements, such as toggling password visibility, activating a 'Remember Me' feature, and experiencing validation feedback when required fields aren’t filled out correctly.

![alt text](5-product-design-commentary-demo.gif)

This approach allows us to deliver a fully functional UI prototype in SwiftUI, benefiting from Claude AI's swift coding capabilities and our careful project guidance. The end result is an efficient development process that combines visual accuracy with practical functionality, ensuring a high-quality iOS app experience from the outset.


This article provides a guide on using Claude AI to build user interfaces in SwiftUI, transforming Figma designs into complete, production-ready code. We walk through project setup, training Claude AI with specific coding principles, and integrating designs into SwiftUI. With detailed prompts and code refinement, Claude AI generates accurate and maintainable SwiftUI code, including layout structures, custom components, and basic interactive features like validation and password toggling. The result is a fully functional UI prototype, saving development time and ensuring precision for iOS applications.

Product design commentary #5: Figma to SwiftUI (functional code) with Claude AI


## Exploring functional and spatial relationships in generative AI design

The integration of Generative AI into user experiences is transforming how we interact with digital systems. As we explore the intricate dynamics of AI and its role in enhancing human-computer interaction, it becomes essential to understand the functional and spatial relationships that AI establishes within systems. These relationships directly impact the effectiveness and intuitiveness of user interactions with AI-driven systems.

This article explores the scope of relationships between Generative AI and other system elements, focusing on three key aspects: **System Scope Relationships**, **Spatial Relationships**, and **Functional Relationships**.

## System scope relationship

The first layer in understanding how Generative AI fits into larger systems is to explore the **System Scope Relationships**. This relationship defines the scale at which AI integrates with other elements of a system and plays a crucial role in determining its interaction model. The five categories within system scope are

![](assets/4-product-design-weekly-system-scope-relationships.png)

1. **Component**:
   - **Example**: AI used to provide additional context or cognitive insight behind individual elements in a system. For instance, a feature that suggests relevant actions for a user in a specific interface component.
2. **Flow**:
   - **Example**: AI automates or enhances multi-step flows. A practical example would be a chatbot guiding users through a multi-step process, automatically completing sections based on previous inputs.
3. **Feature**:
   - **Example**: Here, AI powers a specific action or feature. Consider an AI-driven grammar checker embedded in a word processor.
4. **Application**:
   - **Example**: AI creates entire applications or powers core experiences. For example, tools like Grammarly, which is primarily an AI-driven application built around content refinement and language improvement.
5. **Platform and ecosystem**:
   - **Example**: On a larger scale, platforms or ecosystems use AI pervasively. An ecosystem may see different systems interacting through a network of AI technologies, such as multiple SaaS tools integrated with AI APIs to enhance functionalities and data flow across systems.

Each level of this scope reveals the depth at which AI interacts within a digital system—from individual elements to entire ecosystems. Designers should consider how AI features align with the scale of their product's experience.

## Spatial relationships

In terms of user interface (UI) design, **Spatial Relationships** describe the physical layout and placement of AI components relative to other features on a screen. This placement is crucial for ensuring a seamless interaction between AI elements and the rest of the user experience. The diagram highlights the following relationships

![](assets/4-product-design-weekly-system-spatial-relationships.png)

1. **Separate**:
   - **Description**: Generative AI is placed on a completely different page or space.
   - **Example**: Think of an AI-driven support system that opens a separate window or app when initiated, like a full-screen chatbot.
2. **Alongside**:
   - **Description**: Generative AI is placed on the same screen but in its own space, typically as a side panel.
   - **Example**: A sidebar AI assistant that provides suggestions while users work in the main content space.
3. **Layered**:
   - **Description**: Generative AI exists as a floating modal or overlay.
   - **Example**: A floating AI chatbot on a shopping website that pops up over the main content area when activated.
4. **Integrated (Parent and Child)**:
   - **Description**: AI is intermingled with the feature and drives the content. In the parent relationship, AI takes the primary role, while the child relationship sees the AI supplementing the feature.
   - **Example**: AI tools that refine user-written text in real-time, such as an AI-driven grammar checker in a text editor.
5. **Point**:
   - **Description**: AI supports a specific feature, acting at a particular point in the content.
   - **Example**: AI-powered auto-suggestions that appear while typing in a search bar, subtly enhancing the primary feature.

The spatial design directly impacts user navigation and interaction fluidity, and placing AI in the appropriate spatial relationship ensures a seamless user experience.

## Functional relationships

Lastly, **Functional Relationships** refer to how Generative AI interacts with other features and content at a functional level. The interaction model can vary based on the role AI plays within the system. The different types of functional relationships include

![](assets/4-product-design-weekly-system-functional-relationships.png)

1. **Separate**:
   - **Description**: AI operates in a separate experience without direct interaction with other features.
   - **Example**: A separate AI content generation tool like MidJourney, which creates art without influencing other features directly.
2. **Aware of**:
   - **Description**: Generative AI is aware of other content or features, but it does not act upon them directly.
   - **Example**: An AI that passively monitors text input and offers suggestions based on the content without actively changing it.
3. **Acting upon**:
   - **Description**: Generative AI can directly interact with and modify content or features based on user input.
   - **Example**: AI-powered content moderation tools that automatically remove inappropriate content in a chatroom.
4. **Feature incorporates**:
   - **Description**: AI-generated outputs are integrated into the user experience, enhancing the primary feature.
   - **Example**: A text editor like Microsoft Word that incorporates AI-generated writing suggestions directly into the content being created.
5. **Uses feature**:
   - **Description**: Generative AI relies on other features to function properly.
   - **Example**: An AI system that relies on database queries to generate relevant reports or suggestions.
6. **Uses conversationally**:
   - **Description**: AI interacts with features and the user through conversational inputs and responses, often as a two-way exchange.
   - **Example**: A conversational AI that interacts with users through voice commands, such as Google Assistant, which processes natural language inputs to perform tasks.

These functional dynamics define how deeply integrated AI is with system features and user actions, guiding how AI can best support or enhance user experiences.

## Conclusion

The evolution of Generative AI within digital systems hinges on its **scope**, **spatial**, and **functional relationships**. Designers and developers must pay close attention to how these relationships manifest within their products to ensure that AI serves to enhance the user experience rather than disrupt it. By understanding how Generative AI fits into these relationships, we can design more intuitive, helpful, and powerful AI-driven experiences that feel natural and effortless for the user.

Generative AI is a transformative tool, and its success relies on how well it integrates into the systems and experiences we create. As AI technology evolves, designers must constantly rethink these relationships to maintain an optimal balance between functionality and usability.


This fourth edition looks at how Generative AI fits into digital systems. We examine the connections between AI and other parts of a system, focusing on scope, space, and function. Learn how these connections affect the way we design AI features and make them easy to use. Get practical tips on adding AI to your products in ways that make sense for users.

Product design commentary #4: Generative AI UX design patterns


**Industry**\
Financial Services / Investment

**Location**\
Vietnam

**Business context**\
Securities firm needed to modernize their trading app to attract new users while retaining professionals

**Solution**\
Redesigned the mobile trading platform with personalized experiences for different user skill levels

**Outcome**\
Delivered an app that improved user retention and provided appropriate tools for all trader types

**Our service**\
UX/UI Design / User Research / Mobile App Redesign

## Technical highlights

- **User research**: Comprehensive analysis of user behavior and pain points
- **Personalization**: Adaptive interfaces based on user experience level
- **Onboarding**: Streamlined registration process with progressive disclosure
- **Education**: Integrated learning tools for new investors
- **UI design**: Clean, modern interface with contextual help features
- **Responsive design**: Optimized for various screen sizes and orientations

## What we did with Kafi

Kafi Securities asked us to rebuild their mobile trading app. After a strong financial year in early 2024, they wanted to invest in better technology to grow their business and stay competitive.

We worked directly with Mr. Diep The Anh , Deputy Director of Kafi , and their leadership team to find the biggest problems and create smart solutions. Together, we built a new app that matched Kafi's goal of "Building financial dreams" and helping everyone access investment opportunities.

Our main task was designing an app that works for two very different groups: beginners who are just starting to invest, and professionals who trade stocks daily. The app needed to teach new Vietnamese investors about finance while giving experienced traders the advanced tools they need.

Instead of making small improvements to their old app, we built something completely new from scratch. This fresh start let us make the app faster, more secure, and easier to use.

![Kafi Securities mobile trading app interface showing market data](assets/kafi-cover.webp)

## The challenge Kafi faced

Kafi's biggest problem was that their old app didn't work well for different types of users. This caused several key challenges:

### User experience problems

- **High dropout rates during onboarding**: The complicated identity verification process turned potential users away, with many abandoning the app before completing registration
- **Confusion for new investors**: Financial terminology and complex charts overwhelmed beginners, preventing them from taking their first steps
- **Limited tools for professionals**: Experienced traders couldn't access the detailed market analysis they needed on mobile devices
- **One-size-fits-all approach**: The app treated everyone the same way, regardless of experience level

### Business impact

These user experience issues directly affected Kafi's business by:

- Limiting new user acquisition despite marketing efforts
- Reducing mobile engagement - users only checked basic information instead of actively trading
- Pushing professional traders to use desktop platforms or competitor apps
- Creating frustration that damaged the company's reputation

With investment interest growing in Vietnam, Kafi recognized the opportunity to capture market share by creating a more accessible platform. However, they needed to better understand their users' needs before they could build an effective solution.

## How we built it

We used a three-step approach: learn, plan, and design. This methodical process helped us understand what users truly needed before we started creating solutions.

### Technical approach

#### Comprehensive user research

We spent an intensive week gathering insights to answer three critical questions: What frustrates customers now? What do they want? What do they actually need?

Our research methodology included:

- **Contextual observation**: We watched real users interact with the app to identify moments of frustration and confusion
- **Social listening**: We analyzed investment forums and social media groups to uncover common problems discussed by traders
- **Competitive analysis**: We evaluated competing trading apps to identify best practices and opportunities for differentiation

This research revealed that most mobile trading app users primarily want to:

- Monitor stock prices and market news quickly
- Check their account balances and positions
- Receive alerts about important market changes or opportunities
- Execute basic trades when away from their computers

#### Experience-based personalization

Based on our research findings, we created user personas and journey maps to guide our design decisions. This led us to develop a core innovation: experience-based personalization.

The app now identifies whether a user is a beginner, intermediate, or expert investor and adjusts the interface accordingly:

- **Beginners** see simplified views with educational components
- **Intermediate users** access more detailed charts and analysis tools
- **Advanced traders** get professional-grade features and customization options

![Different app views for different experience levels showing persona-based interfaces](assets/kafi-designing-tools-for-different-user-groups.webp)

#### Streamlined onboarding process

We completely redesigned the registration process by:

- Breaking it into smaller, more manageable steps
- Adding a clear progress indicator to show completion status
- Allowing users to explore the app before completing full verification
- Implementing a "try before you buy" approach with demo accounts

#### Education integration

For new investors, we created contextual learning tools:

- Hover tooltips that explain financial terms in plain language
- A persistent help panel that can be accessed from any screen
- Interactive tutorials that guide users through their first trades
- Simplified market explanations with visual aids

![Help features for new investors showing contextual assistance](assets/kafi-helping-new-investors.webp)

![Investment education tools showing simplified explanations](assets/kafi-helping-new-investors-2.webp)

#### Modern, minimalist design system

We developed a clean, distraction-free interface that puts important information first:

- Eliminated unnecessary elements to reduce cognitive load
- Used consistent design patterns across all sections
- Implemented a contemporary color scheme with clear hierarchy
- Created flexible components that work across different screens

![Design concepts for the app interface showing visual style exploration](assets/kafi-moodboard.webp)

### How we collaborated

Our partnership with Kafi involved close collaboration throughout the project:

- Regular workshops with stakeholders to align on direction
- Weekly progress reviews with their leadership team
- User testing sessions with actual Kafi customers
- Direct collaboration with their development team
- Knowledge transfer sessions to ensure smooth implementation

This collaborative approach ensured the final product would meet both business objectives and user needs while being technically feasible to implement.

## What we achieved

Our redesign of Kafi's trading app delivered several measurable improvements:

**Increased registration completions**: The streamlined onboarding process helped more people successfully join the platform, with completion rates rising significantly.

**Higher mobile engagement**: Both beginners and professionals now spend more time using the app, with more trades being executed on mobile.

**Accelerated learning curve**: New investors reported feeling more confident and began trading earlier in their journey thanks to the integrated educational tools.

**Advanced functionality**: Professional traders gained access to the detailed analysis tools they needed, reducing their reliance on desktop platforms.

**Unified platform experience**: A single app now effectively serves users at all experience levels, simplifying maintenance while improving the user experience.

**Enhanced brand perception**: The modern, thoughtful design strengthened Kafi's position as an innovative investment platform in Vietnam.

The new app successfully supports Kafi's mission to make investing accessible to everyone while providing experienced traders with the tools they need. By creating personalized experiences based on user knowledge, we've helped Kafi build a platform where investors can grow their skills over time without needing to switch apps as they advance.

This project demonstrates the importance of understanding diverse user needs when designing financial applications. By combining careful research with thoughtful, adaptive design, we created an experience that works for both beginners and experts, helping Kafi grow their business while making investing more accessible to the Vietnamese market.


We helped Kafi Securities rebuild their stock trading app to work better for both beginners and experienced traders, making investing more accessible for everyone.

Kafi - design

Kafi: making stock trading easier for everyone


The longstanding challenge of communication between humans and machines has been ongoing since the dawn of computing. With the emergence of large language models (LLMs), prompting has become a powerful tool in facilitating this communication. The role of UX designers is to help bridge this gap by designing effective systems and interactions that allow humans to better understand and utilize these advanced AI technologies.

### The emergence of prompting

LLMs, such as GPT and similar models, rely heavily on user prompts to generate responses. UX designers play a crucial role in shaping how these prompts are structured, ensuring that AI can effectively interpret user intent. Just as graphical user interfaces (GUIs) revolutionized human-computer interaction, AI has the potential to further evolve how we interact with technology, offering deeper and more intuitive experiences.

### A mental shift in design

As we move away from traditional command-based interfaces, the challenge lies in providing AI with appropriate context to generate meaningful outputs. Designers must now focus on the context in which AI models operate, ensuring continuous improvement and iteration to optimize user experiences.

![](assets/3-product-design-commentary-mental-shirt.png)

### Context and AI models

Effective communication with AI relies on providing clear context, both from the user and from the system. Whether it's a conversational prompt or a store-like interaction, understanding context shifts complexity to the edges, allowing AI models to interpret and respond more effectively. Designers can assist by ensuring that the system captures the right context through prompts, making AI interactions smoother.

### **The craft of prompting (System prompting)**

UX designers can enhance AI interactions by crafting effective system prompts. These prompts help guide the AI, providing a consistent tone and behavior.

- **Interface prompting:** Designers can provide conversational starters and suggest follow-ups.

  ![](assets/3-product-design-commentary-the-craft-of-prompting.png)

- **System prompting:** Hidden prompts guide the AI in a specific direction, ensuring consistent tone and behavior across the tool.

  ![](assets/3-product-design-commentary-training-data.png)

- **Training data:** The UX role is crucial in helping train models or assist in fine-tuning them to avoid bias and ensure ethical use.

### Understanding the context window

The concept of a **context window** is essential in AI interactions, as it determines how much of the conversation the AI can remember. System prompts are embedded within this window to ensure that AI responses align with company values and user needs. Models like **Google’s Gemini** use context windows to retain relevant information over long conversations.

![](assets/3-product-design-commentary-understanding-context.png)

### Approaching prompting

Effective prompting requires structured frameworks, such as **RACE** (Role, Action, Context, Expectation), where designers guide AI through clearly defined parameters. **Few-shot prompting** helps the AI understand what is expected by providing relevant examples, while **Chain-of-thought reasoning** ensures that the AI processes complex tasks step-by-step. **ChatGPT** uses these techniques to allow users to interact with the AI more intuitively and receive more accurate responses.

![](assets/3-product-design-commentary-approach-prompting.png)

### Closing remarks: Prompting for the future

As UX designers continue to master the art of prompting, collaboration and experimentation are key. Prompting will evolve as a tool to shape human-AI interactions, ensuring that AI is used responsibly and effectively. Designers must take on the challenge of refining these systems, ensuring meaningful and transparent communication between humans and machines, just as UX shaped the first generation of graphical user interfaces.


In this third edition, we delve into the art of prompting in AI-human interaction. We explore the evolution of communication between humans and machines, focusing on the crucial role of UX designers in crafting effective prompts for large language models. The commentary covers the importance of context, system prompting techniques, and structured frameworks for prompting, highlighting how these elements shape the future of human-AI interactions and user experiences.

Product design commentary #3: The art of prompting in AI-human interaction


## AI icon - sparkles

Article: <https://www.nngroup.com/articles/ai-sparkles-icon-problem/>

The Spark icon has become increasingly common today, primarily used for AI-related features. However, the icon carries multiple meanings and is interpreted in various ways, making it ambiguous.

### Ambiguity

The icon lacks a clear definition or consistent meaning.

For example, the Spark icon is used in apps like **Plane Finder,** but its meaning varies between apps, leaving users unsure about its exact purpose.

![](assets/2-product-design-commentary-plane-finder.png)

The **Ulta & Google Meet** apps face a similar issue where the Sparkle icon leads to confusion. Users struggle to accurately guess the exact meaning or purpose of the icon, as it is unclear. This inconsistency in usage results in misunderstandings about what the icon is supposed to represent in different contexts.

![](assets/2-product-design-commentary-ulta.png)

![](assets/2-product-design-commentary-google-meet.png)

The image presents statistics on how users interpret the Spark icon. The results show that many users associate it with saving favorites, special information, or promotions. This indicates a lack of clarity in the icon design, which is commonly used by many brands today, leading to user confusion.

### Misuse of the icon

As more AI features are introduced, overuse of the Sparkles icon (✨) can increase user confusion, especially since it’s commonly associated with AI-driven functionalities like recommendations and automation.

- The icon is often unclear, leading users to misinterpret its connection to AI.
- This vagueness highlights the need for **context** and better explanations to ensure users understand its role in representing AI-related features.
- Without clarity, users may fail to recognize the association between the icon and AI technology.

![](assets/2-product-design-commentary-figma.png)

![](assets/2-product-design-commentary-figma-design.png)

![](assets/2-product-design-commentary-figma-view.png)

![](assets/2-product-design-commentary-interview.png)

![](assets/2-product-design-commentary-nylas.png)

### Impact on UX

Without proper context (such as tooltips or labels), the Sparkles icon can cause confusion and reduce interface clarity.

![](assets/2-product-design-commentary-compare.png)

### Summary & conclusion

- The **sparkles icon (✨)** is frequently used to represent AI features, but it often leads to **ambiguity** and **misunderstanding**.
- Users frequently **misinterpret** the icon, associating it with unrelated functions.
- Providing **context** and clear explanations is essential for improving its effectiveness.
- **Consistent and thoughtful usage** of the icon can make it a valuable tool for AI-driven functionality.
- Design teams should prioritize **clarity and user experience** when using abstract icons in interfaces.

## New AI user onboarding

Article: <https://www.nngroup.com/articles/new-AI-users-onboarding/?lm=ai-magic-8-ball&pt=article>

### Simplify onboarding

A study with 6 participants from China tested AI chatbots like Baidu's Ernie bot, ChatGLM, and SparkDesk. Out of the group, 3 had no prior experience with AI, while others had limited knowledge, thinking AI mainly created images and videos. SparkDesk provided a long tutorial but assumed users already knew how chatbots worked, causing confusion.

In contrast, US ChatGPT users would ask questions starting with “Can you?” which allowed them to quickly understand the tool’s capabilities. This interaction helped them grasp the tool’s potential more easily.

![](assets/2-product-design-commentary-example.png)

### Use the tool name to indicate functionality

**App-store descriptions** are crucial for clarifying a tool’s function. For example, the **EF Hello** app is a **good practice** by using a clear name and tagline that clearly communicates its AI-driven language learning capabilities. In contrast, the **Ernie chatbot** represents a **bad practice** because its unclear name makes it difficult for users to understand the app’s purpose, causing confusion and making it harder for users to remember. Clear, concise descriptions are essential to guide users effectively.

![](assets/2-product-design-commentary-app.png)

### Follow best practices for onboarding tutorials

Users tend to skip lengthy tutorials, so it’s essential to provide **contextual help** based on their current actions. For instance, the **SparkDesk** app offered multiple FAQs but failed to address core questions like "What does this tool do?" or "How does it work?". Useful tips should appear after users understand the interface, similar to how **Perplexity.ai** uses hover tooltips. Unnecessary onboarding steps, like the **Ernie app**'s character selection, may confuse users by leading them to believe the character’s personality affects the tool’s output, causing misunderstandings about its capabilities

- **Avoid pop-up windows** during onboarding, as users may mistake them for ads and **dismiss them immediately**.
- Pop-up instructions are often unnecessary if the icons are **self-explanatory** and their functions are clear to users.

![](assets/2-product-design-commentary-application.png)

### Provide general task examples instead of specific ones

New users often begin with AI chatbots by following provided examples. However, overly specific examples like “Poem with Plum” or “Horoscope Matching” may not resonate with most users. Broader examples like "Generate text" or "Create an image" are more effective in helping users explore the tool’s capabilities. These general tasks, such as "Help me study" or "Help me debug," allow users to naturally discover the AI’s potential, making tools like ChatGPT easier to use and more practical in real-life scenarios. Clear guidance enhances the overall user experience.

![](assets/2-product-design-commentary-example.png)

## Key takeaways for designing AI apps

- **Simplify onboarding**: Keep instructions short, answering key questions about the app's function and how users can interact with it.
- **Contextual help**: Introduce features gradually as users interact to avoid overwhelming them with too much information.
- **Broad, generalized examples**: Use general examples to demonstrate AI's capabilities, encouraging user exploration.
- **Clear communication**: App name, tagline, and store description should clearly convey the product’s function.
- **Minimize complexity**: Eliminate unnecessary pop-ups and features to simplify the UX.
- **Adapt the experience**: Support users with timely help as they explore the app.
- **Testing & feedback**: Test with real users, especially those with limited AI experience, to identify pain points.


In this second edition, we explore the use of the Sparkle (✨) icon for AI-driven features and the common confusion it creates for users. It covers best practices for designing effective onboarding for AI tools, highlighting the importance of clear communication, contextual help, and easy-to-follow tutorials to ensure a smooth user experience. By focusing on these elements, designers can enhance user understanding and engagement with AI features.

Product design commentary #2: Unpacking the sparkles icon and AI onboarding challenges


As technology evolves, design processes are being transformed by advancements like Voice User Interfaces (VUI), Augmented Reality (AR), Virtual Reality (VR), Modular Design Systems, and AI tools. These innovations are helping designers automate repetitive tasks, enhance user experiences, and ensure consistency across products. In this article, we explore how these tools are shaping the future of UX, UI, and product design, making interactions more intuitive and efficient.

## Voice user interface (VUI)

Voice User Interfaces (VUI) are growing rapidly with widespread integration into devices like smart speakers, mobile phones, and automobiles. Services such as **Siri**, **Alexa**, and **Google Assistant** are leading the way, and many more products are expected to follow in the near future.

### The future of VUI

By 2026, nearly **50% of the U.S. population** is expected to be using voice-activated devices. This trend encourages businesses and UX designers to consider effective ways of incorporating VUI into their products to meet user demands.

### Products leading VUI trends

**Vietnam**:

- **FPT AI**: [10 Tips for Creating the Best Chatbot Script](https://fpt.ai/blogs/10-tips-creating-best-chatbot-script-fptai-conversation-part-1/)
- **Zalo AI**: [Kiki - Zalo AI](https://kiki.zalo.ai/)

**Global Products**:

- **Google Assistant**: [Google Assistant](https://assistant.google.com/)
- **Amazon Alexa**: [Amazon Alexa Smart Home](https://www.amazon.com/alexa-smart-home/)

![](assets/product-design-commentary-20240927-1.png)

## Augmented reality (AR) and virtual reality (VR)

AR and VR are quickly becoming standards in multiple industries, enhancing both user experience and product interaction.

### Growth forecast

The number of AR users is expected to increase from **0.44 billion in 2019** to **1.73 billion by 2024**, with the AR/VR market projected to reach **$40 billion in revenue by 2027**.

### Practical applications in UX

- **E-commerce**: AR allows users to preview products in real-world environments, such as **trying on shoes virtually**, **placing furniture in a room**, or **trying on clothing**.
  - Example: [L'Oreal AR Skincare](https://www.lorealparisusa.com/skin-care/facial-moisturizers/age-perfect-rosy-tone-cooling-night-moisturizer)
  - Example: [Warby Parker AR Glasses Try-On](https://www.warbyparker.com/)
- **Education and training**: VR is being utilized to provide immersive, direct-learning environments, where learners can practice skills in a safe, virtual setting.

### Products leading AR/VR trends

**Vietnam**:

- **VinFast AR/VR**: [VinFast Showroom with AR/VR](https://vinfastauto.com/vn_vi/vingroup-phat-trien-cong-nghe-arvr-tai-showroom-vin3s)
- **Viettel x VR360**: [Viettel Collaboration with VR360](https://vr360.com.vn/du-an-hop-tac-giua-viettel-va-vr360)

**Global Products**:

- **Meta Horizon Worlds**: [Meta Horizon World](https://www.meta.com/horizon-worlds/)

![](assets/product-design-commentary-20240927-2.png)

## Modular design systems

**Modular Design Systems** allow teams to build reusable components that create consistency across products. Elements like buttons, navigation bars, fonts, and more are organized into a system, making it easy for teams to maintain a unified user experience across different platforms.

### Benefits

Modular systems are designed once and can be reused across various products, saving development time and ensuring a cohesive user experience.

### Examples

- **Ant Design**: [Ant Design System](https://ant.design/)
- **Tailwind CSS**: [Tailwinds Flowbite](https://flowbite.com/docs/getting-started/introduction/)
- **Shadcn UI**: [Shadcn UI Design System](https://ui.shadcn.com/docs/figma)

_All these systems are available as Figma libraries as well as for development, making it easy to ensure design and implementation are well-aligned._

### Application in design & development

- **For designers**: Designers use the design system as the primary source for creating components in Figma. All designs strictly adhere to the principles of the system library, limiting customization.
- **For developers**: Developers also have access to the pre-built component libraries that follow the design system. This ensures that the web version closely mirrors the design mockups.

One significant advantage is **responsiveness across devices**. By using a single web design, it can adapt to tablet and mobile formats easily.

Example: [Flowbite Component Example](https://flowbite.com/docs/components/tables/)

![](assets/product-design-commentary-20240927-3.png)

## AI tools for UX, UI, and product designers

AI is transforming the design industry by automating repetitive tasks, streamlining the research process, and optimizing UI/UX design.

### For UX & research

AI plays a crucial role in **UX research**, helping designers better understand user behavior and needs by analyzing data and automating research processes. These tools provide data-driven insights that optimize the user experience from the early stages.

- **ChatGPT**: [ChatGPT](https://chatgpt.com/)
- **Maze**: [Maze AI Testing](https://maze.co/ai/)
- **Claude AI**: [Claude AI](https://claude.ai/new)

### For UI design

AI also plays an important role in **automating UI design processes** such as layout adjustment, color selection, and image processing. This helps UI designers save time while ensuring that the user interface always meets the highest standards of aesthetics and functionality.

- **Uizard**: [Uizard](https://uizard.io/)
- **Galileo AI**: [Galileo AI](https://www.usegalileo.ai/)
- **Creatie AI:** [Creatie AI](https://creatie.ai)

![](assets/product-design-commentary-20240927-4.png)

## Conclusion

The integration of VUI, AR/VR, Modular Design Systems, and AI is transforming modern design by enhancing user experience and streamlining workflows. To stay competitive, designers must leverage these tools effectively, focusing on user feedback, privacy, personalization, and cross-platform performance. Embracing these technologies will enable teams to create innovative, user-centered products that stand out in the market.


New tools are changing how we design products. In the first edition, we look at voice controls, mixed reality, reusable design parts, and smart helpers. See how they're being used, what's popular, and why designers should care. Learn to make things that are easier and better to use.

Product design commentary #1: New technologies changing UX/UI and product design


In the world of digital products, ensuring that users have a smooth experience is crucial. One key part of this is designing interfaces that can handle user mistakes. This concept, known as "designing for forgiveness," means creating systems that not only help users avoid errors but also assist them in recovering quickly when they make mistakes. In this article, we will look at some simple principles for designing error-tolerant interfaces and how to apply them to improve user experience.

### Understanding the problem: user errors are inevitable

No matter how well we design a system, users will still make mistakes. These mistakes can be as simple as clicking the wrong button or as complex as misunderstanding how a feature works. Understanding that errors will happen is the first step in creating interfaces that can handle them effectively.

**Common Types of Errors**:

1. **Accidental errors**: These happen when users unintentionally do something wrong, like clicking the wrong button or entering the wrong information.
2. **Errors due to lack of understanding**: Sometimes, users don’t fully understand how a feature works or they are new to the interface.
3. **Errors due to unclear design**: If the interface is not easy to understand, it can lead to confusion and mistakes.

Given these types of errors, the next question is: How can we design interfaces that not only help reduce these mistakes but also help users recover easily when they do happen?

### Provide early warnings

One way to help reduce user errors is by giving early warnings before they perform an action that could lead to a mistake. This helps users think again before they make a decision or correct the mistake before it causes a problem.

**Examples**:

- **Microsoft Word**: When users try to close a document without saving it, Word asks if they want to save their changes before closing. This helps prevent losing important work.

  ![](assets/designing-for-forgiveness-microsoft.png)

- **Shopify**: As soon as we change an information in the box, a warning of unsaved changes appears right on the top bar. Make sure we must act Discard or Save before leaving.

  ![](assets/designing-for-forgiveness-shopify.png)

**Benefits**: Early warnings help reduce serious mistakes, protect important data, and make users feel safer when using the system.

### Design clear and consistent interfaces

Having a clear and consistent design helps users navigate the system easily and reduces the chance of mistakes. If the design is predictable, users can focus on their tasks without worrying about how the system works.

**Examples**:

- **Microsoft Office**: The familiar layout and consistent icons across different versions of Word and Excel help users easily switch between updates without needing to learn the interface all over again.

  ![](assets/designing-for-forgiveness-excel.png)

**Benefits**: A clear and consistent interface leads to fewer mistakes caused by confusion, improving the overall user experience.

### Graceful error recovery

Even with the best design, errors will still happen. That’s why it’s important to have tools that help users recover quickly from their mistakes.

**Examples**:

- **Drive**: The “Undo Remove” feature lets users recall an item they’ve just removed, allowing them to correct a mistake before it becomes permanent.

  ![](assets/designing-for-forgiveness-drive.png)

**Benefits**: These recovery tools reduce frustration and stress, allowing users to continue their tasks without too much disruption.

### Error prevention through visual feedback

Giving users real-time feedback about what’s happening in the system helps prevent mistakes before they happen. If users know right away that something is wrong, they can fix it immediately.

**Examples**:

- **Twitter**: When users go over the character limit, Twitter highlights the extra text and disables the tweet button. This instant feedback helps users correct the mistake without guessing.

  ![](assets/designing-for-forgiveness-twitter.png)

- **Discord**: The character limit displayed, and if including the extra text and disable the Save Changes button.

  ![](assets/designing-for-forgiveness-discord.png)

**Benefits**: Real-time feedback ensures that users can fix mistakes quickly, leading to a more efficient and error-free experience.

### Provide guidance and support

To help users avoid mistakes, it’s important to provide clear guidance throughout their experience with the system.

**Examples**:

- **Word**: For icons that are not clearly visible, tooltips are the best solution, helping users understand what they are for.

  ![](assets/designing-for-forgiveness-excel-setting.png)

- **Onboarding in Webflow**: Webflow uses interactive tutorials and visual cues to guide new users through key features, such as adding elements to a webpage. These prompts help users quickly learn how to use the tool effectively, reducing the likelihood of errors

  ![](assets/designing-for-forgiveness-webflow.png)

**Benefits**: Providing guidance and support from the start helps reduce the number of mistakes, especially for new users, and ensures a better experience with the system.

### Conclusion

Designing error-tolerant interfaces is not just about preventing mistakes, but also about helping users recover when they do make mistakes. By applying principles like giving early warnings, clarifying choices, ensuring a consistent design, offering recovery tools, providing real-time feedback, and guiding users, we can create interfaces that make users feel confident and satisfied with the product.

Incorporating these principles into your design process will lead to more user-friendly products that help users achieve their goals with fewer obstacles and greater satisfaction.


In this article, we will look at some simple principles for designing error-tolerant interfaces and how to apply them to improve user experience.