
![](../assets/ux-benchmarking.webp)

Redesigns often promise better usability, cleaner visuals, and a fresh take on the product. But without benchmarking the existing experience first, you’re flying blind. You might launch something that *feels* better, only to learn later that task completion rates dropped, frustration rose, and conversion tanked.

UX benchmarks aren’t just for data-heavy teams or mature products. They are a minimum standard for making informed, measurable decisions. If you wouldn’t ship code without tests, you shouldn’t ship a redesign without benchmarks.

Let’s walk through what UX benchmarking really means, why it matters, how to do it effectively, and how to keep it from limiting innovation.

## What is UX benchmarking?

UX benchmarking is the practice of capturing quantitative usability metrics like task success, time on task, error rate, user satisfaction, and more. This establishes a baseline of how your product performs today.

Think of it as a UX snapshot. It’s not a score to chase but a reference point. It gives you a way to measure if your new design actually improves the experience or if you’re just shifting pixels around. In a redesign, that matters. Baselines let you compare before and after in a structured way.

## Why it matters before a redesign

### 1. Avoid accidental regression

Without a baseline, there’s no way to tell if the redesign improved or worsened the experience. A cleaner UI might look better but perform worse. Benchmarks catch that before it reaches production.

### 2. Focus on what actually needs fixing

Benchmarks reveal the real pain points. Instead of guessing, teams prioritize what impacts usability the most—whether it’s a broken flow or a confusing form.

### 3. Prove ROI

Before-and-after benchmarks let you quantify improvement. If task success jumps from 70% to 92%, that’s concrete progress you can share with the team and leadership.

### 4. Build stakeholder confidence

Data earns trust. Benchmarks give product and business teams a clear view of how design contributes to outcomes like retention, activation, or support reduction.

### 5. Prevent redesign theater

Redesigns done for visual polish or internal tastes often miss the mark. Benchmarks help teams stay outcome-driven, not aesthetics-driven.

### 6. Watch for metric misuse

According to Campbell’s Law, when a metric becomes a target, it can lose its value. Inflated success rates or simplified tasks can look good on paper but misrepresent real usability. Benchmarks need to be honest, not gamed.

### 7. Don’t confuse structure with constraint

Some fear benchmarks kill creativity. In reality, they give you guardrails, not handcuffs. You can still push bold ideas—just measure if they actually work.

## How to benchmark UX effectively

### Choose the right metrics

- **Effectiveness:** Can users complete the task
- **Efficiency:** How long does it take them
- **Satisfaction:** How do they rate the experience (SUS, SEQ, NPS)
- **Errors:** Where do they stumble
- **Engagement:** How deep or far do they go in the task

### Pick your benchmarking method

- **Internal benchmarking:** Measure your product now and again post-redesign
- **Competitive benchmarking:** Test your product against similar ones in your category
- **Best-in-class benchmarking:** Compare yourself to UX leaders outside your industry to raise the bar

### Focus on real, high-value tasks

Don’t benchmark a feature no one uses. Choose representative tasks that reflect critical user journeys like onboarding, checkout, or account setup.

### Keep testing consistent

Use the same user profiles, environment, and tasks. That way, comparisons are clean and improvements are clear.

### Pair quant with qual

A task success rate of 60% tells you something is wrong. Watching users struggle with the form tells you why. Metrics are vital, but so is observing behavior and listening to feedback.

### **Example: benchmarking in a fintech product**

A fintech startup wants to validate its crypto trading flow. Before launch, designers link a Figma prototype to Maze. The results:

- 60% task success rate
- Multiple misclicks on the trading form
- Average SUS score of 65 out of 100, indicating low usability
- Time-on-task data shows even successful users hesitated at the fee disclosure step

The team iterates the design.

Post-launch, they use Mixpanel to track the trading funnel. They discover 20% of users drop off at the “confirm trade” step. Hotjar recordings show confusion over a vague fee disclosure.

User surveys confirm the issue. Several users rate the experience 3 out of 10, saying “didn’t understand fee structure.”

They fix the UI in Figma and retest in Maze. This time, 90% succeed, SUS jumps to 80, and time-on-task improves as users move through the flow with less hesitation.

To sustain visibility, they set up a live UX dashboard:

- Mixpanel tracks funnel conversion and retention
- Quarterly NPS surveys (via Qualtrics) measure sentiment

This mix of task-based testing, behavioral data, and long-term metrics gives the team a full picture. It covers both usability and long-term user loyalty.

## Conclusion

Redesigning without benchmarks is like painting in the dark. You might hit the mark, but more often, you’ll miss and never realize it.

Benchmarks don’t slow you down. They give you a map. They keep the team focused on the right problems, protect you from regression, and help prove the value of good design.

Innovation still matters. But it has to work. And the only way to know that is to measure it.

So before your next redesign kicks off, pause, measure, and get your baseline. Then go build better.

## Learn more

Explore these original articles and guides for a deeper understanding of UX benchmarking:

- [**Product UX Benchmarks – Nielsen Norman Group**](https://www.nngroup.com/articles/product-ux-benchmarks/)
    
    The core guide on types of benchmarks, metrics to track, and how to run UX benchmark studies 
    
- [**Benchmarking UX: Tracking Metrics – Nielsen Norman Group**](https://www.nngroup.com/articles/benchmarking-ux/)
    
    Practical overview covering when and why to benchmark, and how to interpret your results 
    
- [**Quantifying UX Improvements: A Case Study – Nielsen Norman Group**](https://www.nngroup.com/articles/quantifying-case-study/)
    
    Real-world example of tracking UX metrics over time and measuring impact 
    
- [**Campbell’s Law: The Dark Side of Metric Fixation – Nielsen Norman Group**](https://www.nngroup.com/articles/campbells-law/)
    
    Explains how misuse of metrics can distort design decisions and harm user experience 
    
- [**Build a UX Benchmarking Program: Two Approaches – AnswerLab**](https://www.answerlab.com/insights/ux-benchmarking-program-two-approaches)
    
    Advice for small teams on creating and scaling a UX benchmarking practice

Discover why UX benchmarking is essential before any redesign. Learn how capturing usability metrics provides a baseline for improvement, avoids accidental regression, and builds stakeholder confidence. Get practical tips for effective benchmarking and see how it drives outcome-focused design.

Why every redesign should start with UX Benchmarking


![](../assets/autonomy-automation.webp)

## What's the deal with agentic AI?

Agentic AI can automate tasks, save time, and simplify interactions. But what happens when machines act without asking?

Agentic AI systems, like Visa’s Intelligent Commerce, Google Pay’s AI Mode, and Coinbase’s x402, independently perform tasks on users' behalf. They streamline processes but raise important UX questions around user control.

Here’s how to integrate agentic AI without compromising user autonomy.

## Benefits worth leveraging

These are use cases where agentic AI clearly helps. Think convenience, access, and scaling repetitive work.

### Automate simple, repetitive tasks

Let AI take over low-stakes, routine tasks to reduce friction.

[Google Pay](https://techcrunch.com/2025/05/20/google-adds-ai-powered-shopping-features-for-discovery-and-easy-check-out/) automatically tracks product prices and makes small purchases when prices drop, reducing user effort in managing regular transactions.

### Improve accessibility

AI can simplify digital experiences for users facing cognitive, visual, or process-related barriers.

[Visa’s Intelligent Commerce](https://corporate.visa.com/en/products/intelligent-commerce.html) uses AI to securely automate purchases within preset spending limits, helping users overwhelmed by traditional checkout complexities.

### Efficient microtransactions

Good for systems that need to handle lots of tiny transactions with minimal friction.

[Coinbase’s x402 protocol](https://www.coinbase.com/developer-platform/discover/launches/x402) enables AI agents to handle internet micropayments automatically, ideal for content subscriptions and small service fees.

## Key UX risks and practical solutions

When done wrong, agentic AI erodes trust, frustrates users, and takes away control. Here’s how to avoid that.

### Maintain user autonomy

Don’t design out the user. People still want a say, especially with money.

**Actionable tip:** Insert explicit consent checkpoints for critical transactions.

**Insight:** Clear decision points reinforce autonomy. When users understand when and why a decision is being made, and feel like they had a part in it, they are more likely to trust the system. This aligns with the psychological principle of autonomy outlined by the [Nielsen Norman Group](https://www.nngroup.com/articles/autonomy-relatedness-competence/).

### Prevent financial anxiety

Unexpected charges or unclear automation can make users feel unsafe.

**Actionable tip:** Allow users to set explicit spending limits easily.

**Insight:** [In a recent survey](https://www.pymnts.com/personal-finance/2025/financial-anxiety-spurs-demand-for-consumer-budgeting-apps/), 66% of U.S. shoppers said they would not allow AI to make purchases for them, even if it saved money. This distrust isn’t about laziness. It’s rooted in concern that AI might prioritize business goals over user interests. Clear boundaries and manual approvals help mitigate that.

### Reduce consent fatigue

Over-notifying is as bad as under-notifying. Striking the right balance matters.

**Actionable tip:** Employ adaptive consent, prompting users strategically.

**Example:** [SecurePrivacy](https://secureprivacy.ai/blog/adaptive-consent-frequency-using-ai-to-combat-consent-fatigue)’s adaptive consent model uses AI to show consent prompts only when users are most receptive, effectively balancing compliance with user experience.

## Proven frameworks for user-centric AI

These patterns help teams preserve autonomy while delivering intelligent systems.

### Advocate for user control

Design AI that users can manage directly, not platforms.

**Example:** Auto-GPT and BabyAGI are open-source AI platforms that let users directly control and monitor their AI, enhancing transparency and reducing manipulation risks [Explore Auto-GPT](https://github.com/Significant-Gravitas/AutoGPT), [Explore BabyAGI](https://github.com/yoheinakajima/babyagi).

**Career insight:** Expertise in open-source tools boosts your ability to advocate for responsible UX.

### Establish trusted autonomy

Bake in structure and oversight. Systems should always have fallback control.

**Example:** Visa’s Intelligent Commerce explicitly sets automated spending limits and requires human approval for transactions beyond certain thresholds, ensuring clear oversight and user trust [Read more](https://venturebeat.com/ai/visa-launches-intelligent-commerce-platform-letting-ai-agents-swipe-your-card-safely-it-says/).

### Adopt progressive disclosure

Let users ease into automation. Start small, and grow trust.

**Example:** Google Pay incrementally introduces automated features, allowing users to comfortably transition to greater levels of autonomy while always retaining manual override options [Read more](https://techcrunch.com/2025/05/20/google-adds-ai-powered-shopping-features-for-discovery-and-easy-check-out/).

## Actionable UX takeaways

- Automate only low-risk, repetitive tasks where consequences are minimal and expectations are clear.
- Explain how and why the AI made a decision in simple terms users can easily understand.
- Use smart prompts that appear only when users are likely to engage, not every time something changes.

## Bottom line

Agentic AI isn’t the problem. Poor implementation is. The way forward is to combine intelligent automation with user oversight. Build AI systems that enhance decision-making rather than bypass it. Help users stay in control, understand what’s happening, and make corrections when needed. That’s how you keep trust intact while delivering smart experiences.

A UX guide to designing agentic AI systems that balance automation with user control.

Should AI agents transact without human confirmation?


Designing the UI for a blockchain-based hedge fund platform like [**Hedge Foundation**](https://hedge.foundation) is not just about creating a visually appealing interface. The real challenge lies in ensuring that complex financial data is **presented in an intuitive, understandable way that helps users make quick investment decisions**. Optimizing the UI plays a crucial role in allowing investors to access accurate data without feeling overwhelmed by excessive information.

## UI design principles for data visualization

Before starting the design, we focused on understanding who our users are and what problems they face. We divided our users into three main groups:

- **Individual investors:** Need simple tools to protect their assets.
- **Institutional investors:** Need the best hedging strategies for large portfolios.
- **Professional traders:** Want to use hedging tools to maximize profits.

When looking at other hedge fund platforms, we noticed many had overly complex interfaces that made it hard for new users. For example, some platforms required too many steps to make a simple trade, causing users to leave. Also, many platforms didn't clearly show important information like BTC Dominance, Market Trends, and Volatility Index, forcing users to look for data from different sources. Based on these findings, we decided to make trading simpler and add easy-to-read charts right on the main screen to help investors make faster decisions.

To make this work well, we focused on these key principles:

1. **Highlight key data ([Information Hierarchy](https://www.bridgewaterlearning.co.za/2013/04/16/design-principles-hierarchy-of-information/))**: We use dynamic charts and interactive dashboards to help users quickly grasp market trends.
2. **Minimize information overload ([Cognitive Load Reduction](https://www.nngroup.com/articles/minimize-cognitive-load/))**: We keep the layout simple and only show necessary information to avoid overwhelming users.
3. **Enhance data recognition ([Recognition Over Recall](https://www.nngroup.com/articles/recognition-and-recall/))**: Important indicators like BTC Dominance, Market Trends, and Volatility Price are always visible on the main screen, so investors don't have to search through multiple pages.

## Three key UI design for Hedge Foundation

To improve data visualization and usability, we have implemented the following key UI design considerations:

### 1. Integrate an interactive dashboard with dynamic charts

**Problem**: Investors found it difficult to track market movements because key data was fragmented across multiple sections. This forced them to navigate between several pages, increasing the time required to make informed decisions. The lack of a centralized view also made it harder to identify trends and compare portfolio performance efficiently.

**Solution**: We designed a centralized dashboard that consolidates all critical data on a single screen, allowing users to get an overview without navigating between multiple pages.

**Charts Used**: Trend analysis charts are essential for helping individual and institutional investors monitor asset performance and assess risk management strategies. Key implementations include:

- For **long-term patterns**, we use **Trend Lines** to show good times to buy or sell.
- For **investment performance**, the **Portfolio Return** chart shows how much money you're making over time.
- To check **risk levels**, the **Volatility Chart** and **Drawdown Analysis** help investors understand how risky their investments are.
- To see **where money is moving**, the **Liquidity Flow** and **Heatmap Chart** show which areas have the most trading activity.

![](assets/hedge-foundation-charts.png)

💡 Tip: We used [i Charts Generate](https://www.figma.com/community/plugin/1370606842652257742/i-charts-generate-line-chart-bar-chart-pie-cahrt-radar-chart-scatter-radial) in Figma to create charts quickly and easily, saving design time and keeping charts consistent throughout the project.

### 2. Enhance readability through color & layout hierarchy

**Problem**: Too much information on the screen can overwhelm users, causing difficulty in focusing on key insights. Without a structured layout, investors struggle to accurately compare values. Tracking performance metrics and identifying market trends also becomes more challenging.

**Solution**:

- Use **colors meaningfully** to help investors understand quickly:
  - Green shows strong growth
  - Blue shows slight growth
  - Yellow shows steady markets
  - Red shows decline
  - Gray shows stable or predicted numbers
  - Purple shows when a stock price hits its upper limit

On price charts, we use different shades of red to show how big a drop is.

- Apply appropriate font sizes and contrast levels to **highlight** essential information:
  - Using bigger text for total investment value
    ![](assets/hedge-foundation-price-charts.png)
  - Using smaller text for extra details like **Total Yield** and **Performance%**
    ![](assets/hedge-foundation-total-yeild.png)
- Arrange information in ways that are natural to read:
  - **Z-pattern**: Perfect for comparing different investments side by side
  - **F-pattern**: Makes it easy to scan long lists of numbers from left to right
    ![](assets/hedge-foundation-reading-patterns.png)

### 3. Select the right chart types for different data sets

**Problem**: Different types of data require specific visualization methods. Choosing the wrong chart type can cause confusion, making it hard for investors to interpret trends, compare assets, and evaluate risks effectively. Poor data representation can lead to misinformed investment decisions and missed opportunities.

**Solution**:

- **Show one big number**: For example, showing **Assets Under Management** right on the dashboard helps investors quickly see how much money is being managed.
- **Compare values within and between groups**: **Bar Charts** and **Stacked Bar Charts** allow investors to analyze and compare the performance of different portfolios or asset groups side by side, making it easier to spot trends and discrepancies.
- **Show relative composition of data**: **Pie Charts** and **Treemaps** illustrate portfolio allocations by asset type or industry.
- **Display change over time**: **Line Charts** and **Candlestick Charts** track price trends and portfolio fluctuations over time.
- **Explain relationships between metrics**: **Scatter Plots** and **Correlation Matrices** help investors see how BTC Dominance relates to altcoin volatility.
- **Plot geographical data**: For hedge funds with global asset distribution, **Map Charts** visualize investment flows across regions.
- **Show detailed data for multiple assets**: **Tables** provide investors with a structured way to analyze asset details, compare performance metrics, and assess risk across different holdings efficiently.

![](assets/hedge-foundation-data-sets.png)

_Source: [Medium](https://medium.com/gooddata-developers/how-to-choose-the-best-chart-type-to-visualize-your-data-85c866ca13a1)_

## AI-based UI evaluation tools

After completing the design, we utilized various AI tools to predict user interactions and assess UI effectiveness. This allowed us to refine the interface for better usability. One example is **Attention Insight**, which provides heatmaps that highlight areas attracting the most user attention. Warmer colors indicate high engagement, while cooler colors suggest areas receiving less attention. Areas with no color indicate almost zero engagement.

To ensure an optimal user experience, we analyzed heatmaps generated by AI-based tools to identify **attention hotspots** and assess whether **key areas** were effectively capturing user focus. This data-driven approach allowed us to refine the **visual hierarchy**, ensuring that critical information was immediately noticeable. Additionally, we used tools like Predict by Neurons and 3M's Visual Attention System (VAS) to compare accuracy levels, and Heurix to conduct automated UX evaluations for the website.

![](assets/hedge-foundation-heat-map.png)

_The heatmap from Attention Insight shows 90-96% accuracy in predicting where visitors will look in the first 3-5 seconds of seeing the design.
© Attention Insight_

## Key lessons from designing UI for Hedge Foundation

From research and UI optimization, we have identified several important takeaways:

1. **Good information layout speeds up decision-making**: Investors can understand data faster when charts and information are shown in a clear way.
2. **Show less information**: By hiding less important data and only showing what's needed, we help users focus better.
3. **Color and layout choices significantly impact UX**: Even small design adjustments can change how users interpret data and make investment decisions.
4. **AI in design workflow**: Automates repetitive tasks to help designers focus on key improvements. It evaluates designs based on industry standards, detects usability issues, and generates predictive heatmaps to improve user engagement.

## Conclusion

By using the right charts, showing less information, and making data easy to understand, Hedge Foundation makes things better for users. Better dashboards, clear information, and good charts make trading simpler, reduce mistakes, and help with investment results.

Looking ahead, integrating AI and advanced data analytics will continue to refine UI/UX, enabling hedge funds to optimize their strategies and deliver greater value to investors.


Designing the UI for a blockchain-based hedge fund platform like Hedge Foundation is not just about creating a visually appealing interface. The real challenge lies in ensuring that complex financial data is presented in an intuitive, understandable way that helps users make quick investment decisions. Optimizing the UI plays a crucial role in allowing investors to access accurate data without feeling overwhelmed by excessive information.

Hedge Foundation - optimizing UI for effective investment experience


Hyper-personalization represents the future of product development, **delivering personalized experiences that adapt to each user's needs**. In this model, everyone will have their own version of the internet, shaped by AI interfaces that understand their preferences, goals, and personal context. These smart systems automatically adjust the user interface, showing up when needed and disappearing after completing tasks (called [Ephemeral Web-Based Applications](https://www.nngroup.com/articles/ephemeral-web-based-applications/)). This approach creates unique experiences that fit specific use cases.

By using AI, we can create more personal moments, experiences, and interactions. This level of deep personalization promises to change how we use technology, making our digital experiences better, more efficient, and more suited to our individual needs and preferences.

![](assets/7-product-design-weekly-hyper-personalization.png)

## Hyper-personalization vs. traditional personalization

The main difference between Hyper-Personalization and basic Personalization is that it **uses many different types of data** to create a complete picture of each user. Basic Personalization only makes suggestions based on groups of users using basic information. On the other hand, Hyper-Personalization focuses on each person with more detailed analysis, using up-to-the-minute data along with AI and data processing. This helps understand users better and predict what they might do next, allowing for a more personal experience across websites, emails, and mobile apps.

| **Criteria**               | **Hyper-personalization**                                                                        | **Traditional personalization**                                    |
| -------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ | -------------------------------------------- | ---------------------------------------------- |
| **Level of customization** | Very detailed, uses real-time data, behavior, and specific context for each user.                | Based on common traits or basic data like name, gender, or age.    |
| **Data sources**           | Real-time data, behavior history, personal preferences, location, current context                | Basic user info (age, gender, location), general purchase history. |
| **Technology**             | Smart technology that can learn and predict                                                      | Simple if-then rules.                                              |
| **Key features**           | Automatically suggests products/services based on each person's specific behavior and situation. | Shows content or products based on general customer groups.        |
| **Interaction**            | Real-time interaction that changes based on what the user is doing right now.                    | Fixed interaction that doesn't change in real-time.                |
| **Goal**                   | Make customers happier by better understanding their personal needs and situation.               | Make products/services more relevant to target customers.          |
| **Examples**               | - Amazon's product suggestions based on what you're searching for right now                      | - Netflix showing movies based on what you like to watch           | - Marketing emails that start with your name | - Product suggestions based on customer groups |

## How hyper-personalization makes things personal

Hyper-Personalization works through four main steps:

#### Step 1: Data acquisition and preparation

- **Collecting information:**
  - **Basic personal info:** Age, gender, location, income
  - **How people use the product:** Purchase history, habits, time spent on site, items in cart, visits
  - **Personal preferences:** Likes, interests, feedback
  - **Current activity:** Recent searches, recent purchases, comments, likes, shares
  - **Current situation:** Location, time, user status, mood (for example, rapid scrolling or leaving pages quickly may indicate frustration or dissatisfaction)
- **Cleaning up information:**
  - Filling in missing information with reasonable values
  - Finding and fixing incorrect information
  - Making sure all information is organized in the same way
- **Creating helpful insights:** Taking existing information and turning it into useful insights for AI
  - For example: Working out how valuable a customer is or how often they shop

#### Step 2: Choose the right AI method

- **Collaborative filtering (CF)**: Most effective when there is enough data about how users interact with items. Makes recommendations by finding products that similar users have enjoyed.
- **Content-based filtering (CBF)**: Ideal for systems with detailed product attributes. Recommends items similar to customers' previous purchases.
- **Hybrid models**: Best suited for addressing cold start problems and enhancing accuracy by combining both customer data and product characteristics to generate more precise recommendations.
- **Advanced techniques**: Use neural networks and deep reinforcement learning to analyze user behavior patterns, enabling the system to better understand and respond to user needs.

#### Step 3: Train and test the system

- **Split the model training:**
  - Training Data (70-80%): Used to teach the system.
  - Testing Data (10-15%): Check how well the system works.
  - Validation Data (10-15%): Fine-tune the system to avoid mistakes.
- **Check performance:**
  - Look at how many people click, buy, or find the suggestions helpful.

#### Step 4: Keep improving

- **A/B testing:** Test different approaches to find what works best.
- **Model retraining:** Keep the system up to date with new information about how customers behave.

## Practical applications of hyper-personalization

![](assets/7-product-design-weekly-personalization.png)

_Source: [LinkedIn](https://www.linkedin.com/pulse/leveling-up-personalization-maturity-curve-amir-yazdanpanah)_

Hyper-personalization has 3 main real-world uses:

1. **Adaptive content:** It can tailor content to fit each person. This works well for product marketing and especially in education. For example, [Sesame Workshop](https://techcrunch.com/2017/06/07/sesame-workshop-and-ibm-team-up-to-test-a-new-a-i-powered-teaching-method/) tested an AI-powered vocabulary learning app with kindergarten students. The app uses Sesame Street characters in games and videos to help kids learn new words. The AI adjusts lessons based on each student's ability and lets parents and teachers track progress. Students learned better, even with difficult words. This personalized learning approach helps make education more effective, where students of all levels can learn and grow together.
2. **Personalized recommendations:** Streaming apps like [Spotify](https://sea.mashable.com/tech/34358/spotify-wants-to-make-you-an-ai-playlist-for-every-occasion) and Netflix use AI to suggest songs and movies based on what you watch. Amazon's product suggestions are another good example. Amazon looks at what customers buy, view, and rate to understand what each person likes. This kind of suggestion can work for many services that need to match individual needs. Here are some examples:
   - Suggesting travel plans and hotels for vacations
   - Recommending fashion styles based on personal taste
   - A personal magazine that picks articles you'll enjoy
   - Custom diet and exercise plans that fit your health needs
3. **Adaptive user interfaces:** Many apps have too many features that can overwhelm users. [Contextual AI](https://business.adobe.com/blog/perspectives/contextual-ai-the-next-frontier-of-artificial-intelligence) helps by learning how you use the app and showing only the features you need, making it simpler to use. For example, [Siemens](https://www.youtube.com/watch?v=D9_U2EI0Sdw)' NX CAD, a 3D design software used in architecture and engineering, uses AI to learn from users and predict what commands they might need next. This makes the software easier to use for both new and experienced users.

## Challenges around hyper-personalization

1. **Privacy:** Since AI learns from user data, privacy is a major concern. The key is to be open with users. Always ask for permission before collecting data, clearly explain what data you want to collect, how you plan to use it, and how you'll protect it. Make it easy for users to delete their personal information if they want to.
2. **Bias:** Social media apps often show users only what they already like or agree with. This can make people less open to different viewpoints. To reduce this problem, make sure to use diverse data when training the AI. If you're using data from users, consider having a way to review content. Keep checking your product's AI to make sure it's fair to everyone.
3. **Fatigue:** Seeing the same kind of content over and over can get boring. People's interests change over time, and AI based on past behavior can't always predict when someone wants something new. To fix this, let users reset their preferences or control how personalized their experience is. For example, a music app might suggest a random song that's different from what the user usually likes, just to offer something fresh.

## Conclusion

Beyond learning and health applications, we can use personalization in finance. For example, creating personalized financial dashboards that only show portfolio and transactions that matter to users. Or suggesting the best times to pay bills and save money based on spending habits.

While personalization paints a perfect picture, it's not without problems. Users can get bored seeing the same things, content can be one-sided, and there are data privacy risks. That's why it's important to keep focusing on what users need - research, design, test, and improve - to solve these issues and make sure your product succeeds.

**Learn more:**

- An article on UX Design discussing how [generative AI](https://uxdesign.cc/transforming-ux-with-generative-ai-7b06ea329286) is transforming user experience
- A technical deep dive on LinkedIn about [building AI models](https://www.linkedin.com/pulse/building-ai-models-hyper-personalization-technical-deep-deepak-gupta-tohuc/) for hyper-personalization


Hyper-personalization represents the future of product development, delivering personalized experiences that adapt to each user's needs. In this model, everyone will have their own version of the internet, shaped by AI interfaces that understand their preferences, goals, and personal context.

Product design commentary #7: Hyper-personalization - how AI improves user experience personalization


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


**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


Hey peeps! Ever heard of DCA (Dollar-Cost Averaging)? It's like the hottest strategy in town, and for good reason - it can seriously boost your chances of crypto success. This article is your one-stop shop for all things DCA. I'll break down what it is, the different ways you can do it, and some mistakes to avoid so you can DCA like a pro.

![](assets/dollar-cost-averaging.webp)

## What is the deal with DCA?

Dollar-Cost Averaging (DCA) is a simple yet powerful investment strategy that can help you minimize risk and maximize long-term returns. With DCA, you **invest a fixed amount of money into an asset** (crypto, stocks, funds, etc.) **at regular intervals, regardless of the current market price**. The goal is to accumulate as much of the asset as possible over time. This strategy is suitable for all investors, especially beginners.

In simpler terms, it's about throwing some money into crypto at regular intervals, no matter if the price is mooning or going down. This way, you average out the cost over time and snag some sweet profits in the long run.

While not a new concept, DCA has been proven effective for decades in traditional markets like stocks and gold. In the high-potential crypto market, DCA has become even more popular. The mentality of "buying more when the price is down" is very common among crypto enthusiasts, especially when the market has been skyrocketing in recent years. While "bottom fishing" can be tempting, DCA is the key to safe and effective investing in a volatile market like crypto.

## How DCA works

To better understand how this investment strategy works, let's look at an example:
Suppose an investor decides to invest $3,000 over 6 months by buying $1,000 of a specific asset for the first **3 months** and applying the DCA strategy. However, if you want to see the powerful impact of cost averaging, check out the difference between cost averaging and not using the strategy (when you invest the entire $3,000 in month 1).

The scenario would be as follows:

![](assets/dollar-cost-averaging_1.webp)

From March onwards, you can see that DCA has increased in value compared to not having a strategy. **This is because the more money you invest at once, the more risk you are exposed to market fluctuations.**

- When investing without a strategy, the $3,000 is subject to the entire decline of March + April and has to take the rest of the time to recover.
- With the DCA strategy, you can minimize the loss by 20% and take advantage of it to catch the bottom and collect more assets.

To implement DCA, follow these steps:

1. Choose the right investment asset for DCA
1. Decide on the investment amount per period
1. Identify your maximum acceptable loss
1. Choose an investment frequency (weekly, monthly,…)
1. Define entry, profit-taking, and stop-loss points

> **Note**: While DCA can be a good strategy, there can be more transaction fees compared to a one-time investment.

## DCA in practice

In theory, DCA helps you buy an asset at different prices, thereby minimizing the risk of market fluctuations. However, in practice, traders and investors apply DCA in many different ways, specifically as follows:

**DCA in a Bull Market**

This strategy is a way of investing in a rising market by buying a fixed amount of an asset at regular intervals, such as every month. This means that you will buy more of the asset when the price is low and less of the asset when the price is high. The average purchase price will increase over time.

- **Pros:** Buy with the mindset of "making a profit". You aim to buy low and sell high for maximum profit. While buying at higher prices increases your average cost, there's still room for profit if the price keeps rising. This approach lets you potentially maximize your gains.
- **Cons:** Buy more at higher prices can hurt your profit potential. Remember, the crypto market is known for big, unexpected crashes, especially after periods of strong price increases.

Since 2021, this has perhaps been the strategy adopted by large investment funds, such as MicroStrategy, BlackRock, and Fidelity, if you often follow articles on the allocation of capital flows from investment funds.

**DCA in a Bear Market**

DCA in a bear market is the opposite of DCA in a bull market. When falling market, investors buy more of an asset when the price is low and less when the price is high. The average purchase price will decrease over time.

- **Pros**: You can buy assets at lower prices, which could mean higher profits when the market recovers. And regular investing helps you avoid trying to time the market, which can be risky.
- **Cons**: The risk of this method is that hard to know when to buy. It's tough to know when the market will hit its lowest point, so you might buy too early or too late. Prices could keep falling, even if you're buying regularly.

[El Salvador has been consistently "buying the dip"](https://www.thestreet.com/investing/el-salvador-buys-the-dip-again#:~:text=At%20500%20coins%2C%20this%20purchase,150%20bought%20in%20September%202021.) in Bitcoin throughout 2021-2022, driven by the belief of its leaders in Bitcoin's growth. CoinDesk estimates that El Salvador currently holds 2,381 Bitcoin in its treasury, worth a total of $147 million. Most recently, the country said that if it sold all of its Bitcoin now, it would make a profit of over 40%, or $41.6 million.

**DCA for the Long Haul**

A simple way to invest that's perfect for people who want to put their money away for the long term and don't want to worry too much about the ups and downs of the market. It's like putting money in a savings account, but instead of just earning interest, you're also buying shares of an asset, like stocks or cryptocurrency.

- **Pros**: Don't need to be an expert to use this strategy. You can start investing with even a small amount of money. The market has always gone up in the long run, so this strategy can be a good way to grow your wealth over time.
- **Cons**: The price of your investment could go down in the short term, so you could lose money. If you lack knowledge and experience, you will be easily scared by price changes. This can cause you to sell your investments when the market goes down.

Crypto prices can go up and down quickly, making this strategy tricky to use. Still, some traders have pulled it off in the short term to buy at the best prices.

**Flexible DCA**

The flexible DCA strategy takes regular DCA to the next level. You can adjust your investment amount based on the market's ups and downs. So, if the market is falling, you can invest a little more to buy more when prices are low. And when the market is rising, you can invest a little less to avoid buying at high prices.

- **Pros**: You can change how much you invest based on the market and your own finances. This strategy can work for both beginners and experienced investors.
- **Cons**: To make the most of this strategy, you should have some basic understanding of the financial markets.

**Comparison table:**
| Bull Market | Bear Market | Long Haul | Flexible |
| --- | --- | --- | --- |
| Invest in a rising market | Invest in a falling market | Believe that the market will always trend upwards in the long run | Invest based on the market
| Buy a fixed amount of it at **regular intervals** (daily, weekly, monthly,…) | Buy **more of an asset** when the price is low and less when the price is high | Buy a fixed amount of it over a **period** of 3-5 years | Adjust your amount based on the market's ups and downs
| The average purchase price will **increase** over time | The average purchase price will **decrease** over time | Invest without worrying about market ups and downs | The average purchase price will **increase** or **decrease** gradually depending on market trends |

### Can DCA be applied to anything?

Hell no! While DCA is a simple and easy-to-understand strategy, it's not a magic bullet for beating the market. Many investors combine DCA with portfolio diversification to reduce risk.

**DCA is best suited for low-risk assets such as:**

- Bitcoin
- Ethereum
- S&P 500 Index Fund
- ETFs
- Retirement funds (e.g., 401(k))

**Common mistakes when using DCA:**

- **Leverage trading:** Leverage trading (such as margin, futures, etc.) is already inherently risky, as traders use more money than they have. Combining it with DCA amplifies this risk. It's recommended to only use DCA for spot trading.
- **Low-liquidity altcoins:** Even Bitcoin, with its high trading volume, experiences significant price fluctuations. Low-liquidity altcoins pose even greater risks. These altcoins may be poorly designed or pump-and-dump schemes, requiring thorough research before investing.
- **Altcoin/BTC pairs:** While experienced traders may profit from this approach, altcoin/BTC pairs expose you to two layers of volatility: altcoin/BTC pair fluctuations and BTC/USD fluctuations. This can lead to double losses if you use your losing BTC to buy a falling altcoin/BTC.
- **Meme coins:** Meme coins are essentially overpriced jokes. View them as a portfolio diversification tool rather than a DCA strategy target.

Bear in mind that before you start DCAing during a downturn, ask yourself: "How much risk can I handle?" Only DCA with money you can afford to lose, and be prepared for the possibility that some of it might not come back.

Overall, DCA is a long-term investment strategy. Don't get discouraged by short-term market fluctuations. Stay disciplined and consistent with your investments, and you'll be well on your way to achieving your financial goals.


Dollar-Cost Averaging (DCA) is a simple yet powerful investment strategy that can help you minimize risk and maximize long-term returns. With DCA, you invest a fixed amount of money into an asset (crypto, stocks, funds, etc.) at regular intervals, regardless of the current market price. The goal is to accumulate as much of the asset as possible over time. This strategy is suitable for all investors, especially beginners.

Dollar Cost Averaging (DCA)


Do you ever feel overwhelmed by the myriad of design tools and options in PowerPoint, or the countless books and tutorials dedicated to beautifying a single sentence on a 100-inch screen?You're not alone! As a designer myself, I used to get caught up in the "beautification" trap, spending hours tweaking layouts, colors, fonts, and more, only to realize that the content of my presentation was the key factor.

My search for a simpler, more efficient solution led me to Deckset, a Markdown-based presentation app for Mac. With Deckset, creating slides becomes easier than ever. You simply write your content using Markdown - a simple, easy-to-learn markup language, and Deckset automatically converts it into beautiful presentations.

Imagine being able to focus entirely on your message without having to worry about complex design tools. Deckset is my "savior" that has freed me from the burden of slide design, allowing me to dedicate all my time and energy to creating quality content.

I’ve also uploaded three resources which you may find helpful:

- [Deckset documentation](https://docs.deckset.com/English.lproj/getting-started.html) to learn more syntax for formatting text.
- [The Deckset guideline](https://drive.google.com/drive/folders/1bakuk7-BRTaOlqVu5Jbk_QRbR42Ym2g6?usp=drive_link) to apply the theme that you can use to adapt your Deckset to DF's branding.
- [Download IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans) to set up the font used in the DF theme on your Mac.

So let’s get started.

## Install Deckset

![](assets/design-less-present-more-with-deckset_design-less-present-more-with-deckset_image5.webp)

To install Deckset, first download the [software version](https://drive.google.com/file/d/16aOzaQ6YxySsGEjCwVVDSVbt3dSYSdAT/view?usp=drive_link) compatible with your operating system from the Drive. Once the download is complete, run the installer and follow the on-screen instructions to complete the installation process.

## Import theme

- **Step 1:** Open Deckset and select **New Presentation**.
- **Step 2:** Select **Import Theme** from the **File** menu.
- **Step 3:** Select the theme file you want to add. Theme files are usually in **.dstheme** format.
- **Step 4:** Deckset will automatically install the theme and add it to the list of available themes.
- **Step 5:** Select the theme you want to use and start creating your presentation.

## Add content to slides

The beauty of Deckset is, it lets you focus on what truly matters, the content of your presentation! Don't worry about fiddling with design elements; Deckset gives you a handy preview of each slide. Want to see a full view? Just double click on it. Made a typo or have more ideas? Click "Edit" and Deckset will open your presentation in your markdown document (like VSCode).

Here's the cool part: you get a tiny Deckset preview window floating beside you as you edit. Even better, the preview updates live as you make changes! This makes editing text a breeze and lets you experiment with quotes, code, and other content types to see how they translate into Deckset's stylish themes. It's a small feature, but a powerful one that builds confidence in your editing and lets you explore the unique styles your presentation can take.

Deckset also provides a variety of tools to add content to your slides, including:

**Images:**

```plain-text
![inline/left/right 100%] (image.png)
```

**Videos/Audio**

```plain-text
![] (video.mov)
![] (audio.mp3)
```

**Code block:**

```javascript
$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201,
  },
  success: function (data) {
    $("#weather-temp").html("" + data + " degrees");
  },
});
```

**Table:**

```plain-text
| Header 1 | Header 2 | Header 3 |
| --- | --- | --- |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
```

**Custom theming**

You can customize the formatting of your content using the tools on the toolbar.

![](assets/design-less-present-more-with-deckset_design-less-present-more-with-deckset_image2.webp)

## Present your presentation

When you're ready to present, simply click **Play** or **Rehearse** on the toolbar. Deckset will switch to full screen and you can navigate between slides using the arrow buttons or keyboard shortcuts.

![](assets/design-less-present-more-with-deckset_design-less-present-more-with-deckset_image3.webp)

Deckset takes Markdown presentations to the next level with presenter mode. This mode provides a clean interface, showing the current and upcoming slides alongside the elapsed time. Even better, [presenter notes](https://docs.deckset.com/English.lproj/Presenting/presenter-notes.html) embedded within your Markdown text will appear below the slide in this view. It’s everything you could have wanted from a simple Markdown presentations experience.

## Save your file

Once you have finished presenting, select **File** > **Export Presentation...** to save your presentation. You can save your presentation as a **.md** file or export it to other formats such as **PDF, PNG**, or **JPEG**.

**A set of export files to upload to Dwarves Drive will include:**

- **PDF file:** This is the primary file format for documents, and it can be opened on any device with a PDF reader.
- **Markdown file:** This is a text-based file format that can be used to create and edit documents. It is a popular format for technical documentation and README files (optional).
- **Image folder:** This folder will contain all of the images that are used in the document. The images should be in a format that is supported by Deckset, such as JPEG, PNG, or GIF.

![](assets/design-less-present-more-with-deckset_design-less-present-more-with-deckset_image4.webp)

> **Note**: Markdown file and image folder must stay together to avoid missing images in your final presentation.

While Deckset doesn't allow you to customize everything to your heart's desire, such as adding custom quotation marks around block quotes, for example. Sometimes, I also wish for more flexibility in slide design.

However, Deckset is still a great tool that helps me create beautiful presentations quickly and easily. It allows me to have a moderate level of control, focusing on the content without getting distracted by complex design details.

Therefore, even though Deckset is not truly perfect, I still hope you will like it. Give Deckset a try and share your experience with me!


Present more with Deckset


Markdown uses symbols and stuff to make your text look fancy. It's like learning a new skill, game, or design program - there will be bumps in the road before you're a pro. This article will show you some common mistakes people make when writing Memo posts with Markdown and how to fix them. Here's what we'll cover:

![](assets/level-up-your-markdown-memos_image0.webp)

## Mixed-up headings

Headings might seem like a pain, but they actually make your writing awesome! Imagine your document as a house – headings are like the signs on each door, telling everyone what's inside. Using headings in order creates a clear structure, like a well-organized house. Readers can easily find the main points (like the kitchen!), understand the overall flow (living room to bedroom!), and jump straight to interesting sections (the game room!). Ordered headings also make your writing look sharp, keeping readers engaged.

There are two main types of headings:

```bash
# Heading Title (H1)
Also known as the main title or headline of a page. H1 tags are the largest tags, and there can only be one H1 tag per article on a page.

## Headings
These are titles that represent the content of each paragraph and include H2, H3, H4, H5, H6, etc., arranged in descending order. A page will have multiple heading tags for the content.
```

Here’s an example of one common mistake is using heading 3 for main headings instead of heading 2. This can make the heading levels unclear and difficult for readers to distinguish between content sections. Additionally, abusing bolding for content sections can also reduce the effectiveness of headings and make them almost "sink" into the content.

To fix this, use heading 2 for main headings and heading 3 for subheadings. This will create a clear hierarchy and make it easier for readers to understand the structure of your document.

![](assets/level-up-your-markdown-memos_image1.webp)

**Heading structure for Memos:**

To create a heading in a Memo, you use the `#` symbol. The number of `#` symbols you use will determine the level of the heading. The more # symbols you use, the lower the heading level.

You should follow the following heading structure:

- heading 1: for the main title of the memo (`title:` located at the first line of the markdown)
- heading 2: for subheadings (`##`)
- heading 3: for more detailed headings (`###`)
- heading 4, 5, 6: for sub-subheadings (`####`...) (optional)

Aside from the main points mentioned, there are a few other **things to keep in mind** when using headings: Headings shouldn't be SHOUTING (all caps) - they should be clear and easy to read. Keep your heading colors consistent throughout your writing, and use different colors only for hyperlinks or notes to make them pop. Finally, skip the numbering or lettering within headings - make them short and clear.

## ToC ignoring headings

![](assets/level-up-your-markdown-memos_image2.webp)

Table of content (ToC) acts as a "map" to help readers grasp information in the most clear way. To fully display all headings in "On this page", the following must be observed:

- Use the correct heading level for each section and subsection in the article
- ToC only shows the first two heading levels: `## header 2` and `### header 3` (not showing `# header 1` )
- Use `## header 2` for main sections and `### header 3` for subsections
- Limit the use of heading `#### header 4` to ensure readability of the article
- Avoid using text formatting like `**` or adding links directly within headings can cause ToC errors.

Following these rules will help you create a scientific, easy-to-read Markdown article that fully displays all headings in the ToC of the memo.

Example:

```bash
## Meetings start on time
Paragraph
## Meetings happen in regular hours
Paragraph
## Meetings should have a video option
Paragraph
## Prerequisites for successful meetings
Paragraph
```

Result:
![](assets/level-up-your-markdown-memos_image3.webp)

> **Tip:** the outline view in the bottom of the File Explorer is a great way to review your document's header structure and outline in VSCode.

## Nesting list disorder

Nesting list disorder occurs when the numbering in a nested list is incorrect, making it difficult to follow and distinguish between different levels of the list.

There are two main causes of nesting list disorder:

- **Incorrect syntax:** Using incorrect syntax for nesting lists (e.g., using the wrong numbers or symbols) can cause the list to be numbered incorrectly.
- **Manual editing:** Manually editing a list (e.g., adding or removing items) can disrupt the numbering order.

![](assets/level-up-your-markdown-memos_image4.webp)

After you've built your fancy list, take a quick minute to double-check it. Scan through and make sure the numbers are counting up (or down) the way they should. A quick proofread can save you a headache later.

For example:

```bash
1. First list item
   1. Ordered nested list item
2. Second list item
   - Unordered nested list item
```

Result:

1. First list item
   1. Ordered nested list item
2. Second list item
   - Unordered nested list item

## Task list glitches

In the process of crafting task lists, it is not uncommon to encounter specific glitches that can hinder their functionality. These glitches can be categorized into two main areas:

**Syntax errors:**

- Missing `-` or `*`: Each line in a task list must start with a `-` or `*` character.
- Incorrect use of `-` and `*`: `-` and `*` characters cannot be mixed in the same task list.

**Formatting errors:**

- Numbering should be used `#` to number tasks.
- Indentation should be used to distinguish between task levels.

For example:

```bash
## Task List

### Task 1

- [x] Subtask 1
- [ ] Subtask 2

### Task 2

- [ ] Subtask 1
- [ ] Subtask 2
```

## Screenshots that flop

We all know a picture is worth a thousand words, and screenshots are like tiny picture warriors fighting for clarity. But not all screenshots are created equal.

- **Display images with incorrect aspect ratio:** Design your images in a horizontal rectangular frame with an aspect ratio of `21:9`, `16:9`, or `4:3`. Avoid using vertical rectangles as it will enlarge the image and affect the layout of your document.
- **Low resolution:** A blurry or pixelated screenshot can be frustrating and impede understanding. Make sure the screenshot resolution is high enough to clearly.

Lots of people use different screenshot tools, kind of like having a favorite app for every task. For instance, on my Windows, I rock ShareX, while on Mac, [Cleanshot](../guides/take-better-screenshots-on-mac.md) is my go-to. Because different tools offer different features! The point is, if you need more than the basics, there's a whole world of screenshot tools out there to explore. They cater to all sorts of needs, from quick captures to fancy edits.

Remember, a well-made screenshot can be a superhero in presentations, tutorials, or any situation where you need crystal-clear visuals. Think of it as a shortcut – a way to explain something complex with a simple picture. So go forth and conquer the world of screenshots – you've got this!

> **Tip**: You can use [**Backr**](https://getbackr.vercel.app/) tool to set stunning backgrounds and create visuals that grab attention for your Memo posts.

## Buried in links

While links are super helpful, including too many can throw a wrench in your reader's journey. A long list can be visually overwhelming, making it tough to find the key info they're after. Plus, with a bunch of links, it's easy to lose track of which ones they've already clicked. So, use links strategically to avoid information overload and keep your reader focused.

![](assets/level-up-your-markdown-memos_image5.webp)

**Use hyperlinks instead of plain text links**

Hyperlinks allow readers to hover over the link to see the destination URL before clicking. This helps them decide whether the link is relevant to them and avoid clicking on unwanted links.

In addition, you should use links sparingly and only link to important and useful information.

References for links support two formats:

- External links: `[text] (http://example.com)`. Shows all links to `http://example.com`.
- Internal links: `[text] (.file.md)`. Shows all links to `file.md`

## Code Blockception

Nested code errors can occur when you use block code within another block code. This can happen when you're trying to format code within a code block, or when you're trying to include code within a blockquote.

To avoid nested code errors, you can use triple backticks ``` in a fenced code block, wrap them inside quadruple backticks ````.

`````plain-text
````
```
Look! You can see my backticks.
```
````
`````

If you're going for a plain-text look, go ahead and use `plain-text`. But if you want to add a little somethin' somethin', you can use code highlighting formats like `javascript`, `bash`, `markdown`,… It's totally up to you!

For example:

````plain-text
```plain-text
Look! You can see my backticks.
```
````

## Horizontal rule overload

Horizontal rules (use three or more stars `***`, hyphens `---`, or underscore `___`) can be a great way to break up your text and make it easier to read. But too many can make your text look cluttered and hard to follow.

Common mistakes to avoid:

- **Double trouble in the title:** Make sure you only use one horizontal rule in your title. Too many can make it look messy.
- **Horizontal rule overload:** Use horizontal rules sparingly. Too many can make your text look choppy and hard to read.

![](assets/level-up-your-markdown-memos_image6.webp)

Remember, horizontal rules are a versatile tool that can be used to improve the readability and visual appeal of your writing. When using horizontal rules, be sure to use them consistently throughout your writing and they will be a masterpiece!

## Blah text in callouts

Callouts are like little spotlights for your writing. They help you shine a light on important information or give your readers some extra insider info. However, when using callouts, you may encounter some common mistakes that can affect the effectiveness and readability of your content.

Here's a closer look at some of these mistakes:

**Not changing the text color for notes**

![](assets/level-up-your-markdown-memos_image7.webp)

Using the grey text formatting for your callouts can blend them in with the background, making them less noticeable and defeating their purpose.

**Fix it:** Want your callouts to shout "Hey, look at me!"? Use black or a contrasting color to make them pop against the background. This will help your readers easily identify important information.

**Not using spaces to break for sub-lines**

This is the simplest and most common way to break lines in a callout. Add the `> >` character at the position where you want to break the line in the callout content.

You can break callouts in multiple levels.

```plain-text
> Can callouts break the line?
> > Yes!, they can.
> > > You can even use multiple layers of breaking.
```

Result:

> Can callouts break the line?
>
> > Yes!, they can.
> >
> > > You can even use multiple layers of breaking.
