To guide better decisions, I propose the AI Intention Matrix—a framework to help teams make more efficient use of resources—particularly in minimizing token costs and compute waste. Every call to a large language model carries a cost, both literal and technical. Features that unnecessarily default to high-precision, full-automation modes may drain tokens on outputs users don’t need or trust.

The matrix is built on two axes: Augmentation ↔ Automation and Satisficing ↕ Optimizing. By clarifying whether a feature needs to optimize for quality or merely satisfice, and whether it should act autonomously or with oversight, product teams can scope AI functionality more responsibly. This reduces over-engineering, lowers serving costs, and most importantly, ensures that AI is actually useful—not just impressive.

Axis 1: Augmentation vs. Automation

Augmentation means using AI to assist and enhance human capabilities – the human remains in the loop, guiding or approving the AI’s outputs. Automation means using AI to replace or perform a task autonomously with minimal human intervention. This axis defines the level of human involvement in the feature.

AI Augmentation (Human-in-the-Loop): Here, AI works as a smart assistant or co-pilot. The system might provide recommendations, insights, or draft outputs, but a human user is ultimately making decisions or final edits. Augmentation is common when tasks are complex, context-dependent, or benefit from human judgment. It shines in scenarios where nuance or ethical considerations are involved, or the AI isn’t yet 100% reliable and needs oversight . Having humans in the loop can increase trust and accountability. For example, a social media platform might use AI to flag harmful content, but human moderators make the final call . This approach is invaluable when “decisions carry significant ethical or legal consequences” or when “the technology is not yet mature enough to operate reliably without human input” . The downside is that requiring human involvement can limit speed and scalability – it may create a bottleneck if the AI could handle high volumes faster than a person could review.

AI Automation (Fully Autonomous): In this mode, the AI system acts on its own to complete tasks or make decisions without needing a person’s constant input. Automation is ideal for well-defined, high-volume or real-time tasks where human speed or availability is a limiting factor. It works best when the AI can achieve a reliable level of accuracy on its own, and when the scale or frequency of the task would overwhelm human operators . Classic examples include spam filters that automatically sort emails, or an algorithm that processes payroll every month without human touch. In “humans on the loop” setups, people might monitor automated systems and only intervene on exceptions – think of a credit card fraud detection system that auto-blocks suspicious transactions but alerts an analyst for borderline cases. Going fully autonomous can dramatically improve efficiency and scalability, but it requires confidence that the AI will perform correctly with little oversight. There’s also a risk of automation complacency: if users get too comfortable letting the AI run things, they may be slow to catch failures . Thus, teams must carefully decide if a task is safe and appropriate to automate, or if keeping a human in the loop adds necessary safety and meaning.

It’s important to note that augmentation vs. automation isn’t always a strict binary. Many successful solutions blend the two – automating certain sub-tasks while leaving final decisions or creative control to humans. “Automation can’t be reduced to a simple binary between ‘manual’ and ‘automatic.’ Instead, it’s about finding the right balance between what we’d find useful to automate versus tasks where it might remain meaningful for us to participate.” In product design, this means asking: Will users want oversight here? Do they enjoy doing this part themselves, or would they rather the AI handle it?

Understanding this axis helps teams position their AI features correctly. If users value control or craftsmanship in a process (for instance, many people enjoy the act of editing photos or writing text), a purely automated solution might backfire by removing the human element. In such cases, offering AI augmentation – suggestions the user can accept or tweak – preserves the user’s agency and enjoyment. Conversely, if a task is tedious and time-consuming (like sorting through thousands of log files for an anomaly), automation can unlock huge efficiency gains and free the user for higher-level work .

In summary: Augmentation keeps the human at the center with AI as a tool, while automation puts the AI at the center with humans supervising or out of the loop. Neither is inherently better – the choice hinges on the context of use, the stakes, and user preferences. Next, we’ll look at the second axis that intersects with this: the quality and goal of the AI’s output.

Axis 2: Optimizing vs. Satisficing

Not every AI-powered feature needs to produce a perfect result. Sometimes “good enough” is indeed good enough. The second dimension of our matrix concerns the quality bar and goal for the AI’s output.

Optimizing (Highest-Quality Output): On this end, the feature is aiming for the most accurate, highest-quality, or optimal result possible. There is little room for error or mediocrity. An optimizing AI feature is often used in high-stakes scenarios or where quality is the key value: think of an AI system diagnosing a medical condition, where a missed detail can be life-threatening, or an AI that generates legal contract language, where precision is critical. In these cases, the product team is effectively saying: “This needs to be as good as (or better than) a human expert would do.” Optimizing usually requires significant effort – more sophisticated models, more training data, rigorous evaluation – to push error rates as low as possible.

Satisficing (Good-Enough Output): On this end, the feature is satisfied with an output that is “adequate” or meets a basic threshold, especially if achieving anything more would cost disproportionately more time or resources. The term satisficing (a combination of satisfy and suffice) was coined by Nobel laureate Herbert Simon to describe decisions that aim for a satisfactory solution instead of the optimal one . In design terms, a satisficing AI feature delivers a result that does the job for the user’s needs, even if it’s not flawless. This often makes sense for use cases where speed, efficiency, or cost are more important than perfection. For example, an AI that quickly drafts a rough blog outline in seconds might be more valuable to a content writer than an AI that takes hours to craft the “perfect” article – because the draft only needs to be a starting point for the human writer to build upon. Satisficing focuses on pragmatism: “aiming for a satisfactory or adequate result, rather than the optimal solution”, especially when finding the perfect solution would “necessitate a needless expenditure of time, energy, and resources.” In many cases, diminishing returns kick in – a slightly better result may not justify a massively more complex implementation. Users themselves often prefer a quick answer now over a perfect answer later.

To sum up this axis: optimizing features strive for top-notch output and might be needed in high-stakes or competitive quality use cases, whereas satisficing features settle for “good enough” which often enables speed, scale, and user convenience. Both approaches can create value – the key is matching the approach to what users actually need. With the two axes defined, we can now combine them to form a matrix and examine the four quadrants that result.

The 2×2 Matrix

When we plot Augmentation ↔ Automation against Satisficing ↕ Optimizing, we get a matrix with four quadrants: 1) High Stakes Copilot, 2) Everyday AI Assistant, 3) Autonomous & High Precision, 4) Autonomous and Low Stakes. Each quadrant represents a distinct strategy for an AI-powered feature.

Quadrant 1: Augmentation + Optimizing (High-Stakes Co-Pilots)

In this quadrant, AI is augmenting the user, and the quality bar is set extremely high. These are AI-as-co-pilot features for high-stakes or expert tasks. The logic is that the AI can enhance human performance – by providing insights, accuracy, or speed – but you keep a human in charge because the decisions are critical. The combination allows for a “second pair of eyes” or the crunching of vast data, while human judgment handles nuance and final calls.

Product example (Healthcare): Imagine a feature in a radiology software platform: as the radiologist examines an X-ray or MRI, an AI algorithm runs in parallel, highlighting areas that look suspicious (maybe a shadow that could be a tumor or a subtle fracture line). The doctor reviews these highlights and either confirms or dismisses them. The AI must be highly accurate in what it flags – too many false positives, and it wastes the doctor’s time or erodes trust; false negatives (missed issues) are even worse. So the system is tuned for optimizing sensitivity and specificity. This augmented workflow doesn’t replace the doctor (and indeed, doctors wouldn’t accept an automated diagnosis from the AI alone), but it optimizes the outcome: the patient benefits from the combined intelligence of doctor + AI. The AI effectively expands the doctor’s capabilities – maybe it can detect patterns across millions of images (something a human can’t do in a lifetime) – while the doctor provides contextual judgment and accountability.

Design considerations: Features in this quadrant require building user trust in the AI assistance. Transparency helps – e.g. showing why the AI is suggesting something (explainable AI) – so the human can validate the reasoning. Because the human is the final arbiter, the UI should make it easy for them to review and adjust the AI outputs. Another practical tip: teams often introduce such features gradually. For example, the AI might first operate in a “silent” mode to prove its accuracy (showing suggestions that don’t actually get acted on without approval) so that users see its value before fully relying on it. This mitigates the risk of AI overreach. When successful, Augmentation + Optimizing features can deliver the best of both worlds: human expertise elevated by machine precision.

Quadrant 2: Augmentation + Satisficing (Everyday AI Assistants)

The second quadrant is arguably where many of the “cool” AI features for productivity and creativity reside today. Here, the AI is again a helper to the human (augmentation), but we’re fine with the AI’s output being a rough draft or initial suggestion. The goal is to boost efficiency, spark creativity, or handle grunt work – not to get it perfect on the first try. The human user is expected to review, tweak, or iterate on what the AI provides.

Product example (Productivity - Writing): A real-world example is Gmail’s Smart Compose feature, which suggests next words or phrases as you type emails. It’s an augmentation (you’re writing; it’s just helping) and definitely satisficing – the suggestions are often mundane, and that’s fine because they handle boilerplate quickly. If the suggestion isn’t what you wanted, you simply ignore it and keep typing. When it works, it might save you a few keystrokes (like completing “Let me know if you have any questions” after you typed “Let me kn…”). It’s fast and cheap. Nobody expects Smart Compose to craft a novel or a mission-critical memo; its value is in easing small moments of writing friction. This kind of low-stakes augmentation has been very well-received by users because it doesn’t impose or intrude – it’s just there to help, speeding up mundane sub-tasks.

Design considerations: For Augmentation + Satisficing features, the key is to make the human-AI interaction seamless and low-friction. The user should feel in control and able to override the AI easily. Since the AI isn’t always right, the interface should make it easy to edit or try again. For example, in a writing assistant, you might offer alternate suggestions or a way to prompt the AI for a different angle if the first output wasn’t useful. It’s also important to set the right user expectations: communicate that the AI is there to assist and draft, not deliver final perfect answers. When users understand that mindset, they’re more forgiving of errors and can leverage the tool effectively (like treating it as brainstorming). From a development standpoint, features in this quadrant can often be delivered incrementally – you can launch a beta that maybe works 70 percent well, and that’s acceptable because users will simply ignore the 30 percent that isn’t helpful. This is a great space to experiment in, as the cost of an AI mistake is usually just a minor inconvenience, not a catastrophic failure.

Quadrant 3: Automation + Optimizing (Autonomous Precision)

This quadrant is the realm of fully automated systems that operate with little to no human input and are held to very high performance standards. These are the kinds of AI features (or even entire products) where you basically say, “AI, you’ve got the controls – just make sure you get it right.” They tend to appear in situations where decisions or actions need to be made rapidly or at scale beyond human capabilities, and where getting it wrong would have serious repercussions. In other words, you wouldn’t automate it unless you were quite confident the AI can meet or exceed human-level outcomes consistently.

Product example (Enterprise SaaS - AIOps): Consider a cloud services platform that offers automated incident detection and response. The feature uses AI to monitor millions of log events and metrics across servers. If it detects a critical anomaly (say, a spike indicating a likely server crash or a security breach attempt), it automatically takes action – for instance, isolating part of the network or restarting a service – to prevent a problem. This is automation: it doesn’t ask an operator for permission in the moment, because delays could be disastrous (every second counts if a service is down or an attack is underway). But because these actions affect uptime, data integrity, and security, the decisions must be highly accurate. The AI needs to optimize for true positive detection of real issues while minimizing false positives. If it were too sensitive and kept “crying wolf,” it could unnecessarily disrupt operations; if it were too lax, it might miss incidents. Achieving this balance is an optimizing problem. In practice, teams developing such features might implement extensive testing and even redundancy (for example, one AI model flags an issue and another validation step confirms it before action, to reduce errors). They might also allow some configurability – e.g., letting the client set what thresholds must be met for the AI to trigger actions (essentially defining what “good enough to act” means in their context).

Design considerations: Automation + Optimizing features are the most sensitive and risk-prone, by nature. They demand rigorous validation before and after deployment. It’s wise to implement monitoring and fallback mechanisms: if the AI encounters an out-of-bounds scenario or its confidence is low, it should fail safe (e.g., hand off to a human or a simpler safe mode). From a product management perspective, you should question whether a given idea truly needs to be fully automated and high-accuracy from day one. Sometimes, starting in the Augmentation + Optimizing quadrant and later moving to full automation is safer. For example, an AI could first just recommend actions to an operator (augmentation) and once it proves consistently correct, transition to taking those actions automatically. This phased approach builds trust and catches issues early. Also, consider liability and user trust: if your autonomous AI makes a mistake, who pays the price and how will you communicate it? Many companies limit features in this quadrant to internal processes or extremely well-controlled environments, precisely to avoid public-facing errors. When done right, though, an Automation + Optimizing system can deliver superhuman efficiency and quality – like an ever-vigilant guardian handling things before anyone even notices a problem. It’s the holy grail for certain operational tasks, but it must be pursued with caution and responsibility.

Quadrant 4: Automation + Satisficing (Autonomous Utility)

The final quadrant covers features where the AI runs autonomously and a good-enough result is truly good enough. These are typically the mass-personalization and scale-oriented features that have proliferated in the internet age – scenarios where doing something approximately right for millions of users beats doing it perfectly for a handful. Here, the cost of a mistake or a suboptimal result is low on a per-instance basis. Often users might not even notice if the AI isn’t spot-on, or they have easy ways to ignore or correct it. The advantage is that these features can reach massive scale or handle mind-numbing volumes that no human team could, thus providing value that would otherwise be unattainable. In each case, the AI is left to its own devices to make lots of micro-decisions, and while it aims to be useful, it doesn’t have to be perfect every single time.

Product example (E-commerce - Recommendations): Perhaps the most famous example of this quadrant is e-commerce recommendation engines (“Customers who bought X also bought Y” and personalized product suggestions). These systems generate recommendations for every user visit in an automated fashion. No human is picking those items – it’s all AI driven by algorithms analyzing purchase data. Are the recommendations always the ideal thing the user wants? Certainly not. But if even some of the suggestions are relevant, they enhance the shopping experience and sales. The success of this approach is evident: Amazon’s recommendation engine is credited with generating roughly 35 percent of Amazon.com’s revenue . That’s billions of dollars from an autonomous feature that is essentially good enough at matching products to users’ interests. Shoppers might scroll past a few irrelevant suggestions, but because the system improves with data and often does surface appealing items, it more than justifies itself. The errors (irrelevant recommendations) have a tiny cost – maybe a moment of the user’s time – whereas the scale of personalization adds huge business value.

Design considerations: For Automation + Satisficing features, coverage and recovery are key design aspects. Since the AI is not perfect, you need to think: how will the system handle the cases it can’t solve well? In a recommendation system, the “failure” is simply that a user ignores a bad recommendation – which is usually fine, but you might still monitor metrics like click-through to ensure the overall quality stays above a certain threshold. Essentially, you define what “good enough” means in measurable terms (e.g., X percent of users click a recommendation, or the chatbot resolves Y percent of inquiries), and ensure the feature meets that bar and improves over time. It’s also important to communicate the purpose appropriately. Users often don’t even realize when an AI feature is “satisficing” – they just see the output. But if there’s a chance of confusion or over-expectation, a hint of the feature’s role can help. For instance, an AI-generated caption might come with an edit option and a note “auto-generated caption” – signaling that it might not be perfect and inviting the user to adjust if needed.

From a development view, this quadrant is attractive because it can deliver high ROI: fully automated means it scales effortlessly, and “good enough” means you can iterate quickly without aiming for perfection at launch. Many MVPs for AI features start here – do something useful in an automated way, prove value, then refine. However, one must ensure that “low stakes” is truly low stakes. If an autonomous feature could occasionally do something that really upsets users or causes harm, then it’s not actually low stakes and belongs more in the optimizing realm with safeguards. The matrix helps flag those distinctions.

Focus on What Matters

In an age overflowing with AI hype, the hardest question isn’t “What can we automate?”—it’s “What’s worth automating?” The AI Intention Matrix offers a practical lens: Are you putting AI where it improves the experience—or just adding complexity? By thoughtfully placing a concept on that map, we ensure we’re considering the right questions: Are we keeping the user in control where they want to be? Are we pushing the tech beyond its reliable limits? Will this AI truly improve the user experience, or are we adding complexity for little gain?

Use this matrix as a guide to avoid AI overreach – those situations where enthusiasm might lead us to fully automate something that users would prefer as a partnership, or to demand perfection where a speedy result matters more. It can also highlight when NOT to use AI. If a feature idea doesn’t clearly benefit from some intelligence on these axes, perhaps a simpler solution is best. As the Google PAIR guide suggests, introducing AI should be justified by a meaningful improvement to the user experience, otherwise it can even degrade the experience .

Conversely, use the matrix to spot the gold – the AI opportunities that will delight users and drive value. Those might be augmentative features that make users feel like super-humans with an AI sidekick, or automations that invisibly handle tedious tasks at scale. Make sure to match the ambition with what your team can deliver and what the technology can support. It’s totally fine (and often wise) to start with a constrained, “good enough” AI feature that addresses a real user need, and expand from there as you learn. A well-scoped success beats an over-scoped failure.

In the age of AI, it’s tempting to believe we should build “AI for everything.” But wisdom lies in discernment. Some things should be left to humans, and some can be trusted to machines. The best AI features either empower the user or fade into the background to handle the drudgery – and knowing which of those you’re aiming for is half the battle. By deliberating along the two axes of the AI Intention Matrix, product teams can better navigate the infinite design choices AI opens up.

Subscribe now

The rise of dark mode

Have you noticed that almost every product now supports dark mode? Dark mode refers to a user interface ‘theme’ that uses a dark color scheme instead of a light one. From social media to complex enterprise software, modern users now expect dark modes to be supported in all their digital experiences. To back this up with some numbers, around 82 percent of users prefer dark mode, and 64 percent expect the experience to auto-adjust to dark mode based on user preferences or time.

In the past, most products (websites) had a single (light) theme, which was fine because most users interacted with software within a stable desktop environment. However, modern users are now using their devices in darkened airplanes, in movie theaters, or in bed at night where light mode is less suitable. In these conditions, dark mode is helpful as it reduces the luminance emitted by device screens (making it easier to see in dim lighting and less distracting for others), while still meeting minimum color contrast ratios.

While implementing dark mode may seem like a simple task, there are several important factors to consider. In this article, you will learn how to implement dark mode on top of an existing design system with three-tiered design tokens.

Atomic design and design tokens

To create a consistent and flexible dark mode theme for your interface, it’s important to understand the principles of atomic design in design systems, design tokens, and how to create a multi-brand design system.

Let’s start by explaining ‘Atomic Design’, a framework invented by Brad Frost for developing scalable design systems. It’s based on the idea that a product’s design can be broken down into smaller, reusable components called atoms which can be combined to form more complex components, such as molecules and organisms, and ultimately entire templates and pages.

In 2014, Salesforce designer Jina Anne introduced the concept of a ‘design token’ which Brad Frost later integrated into the atomic design system. Design tokens are “smaller than atoms”, and are commonly used to define various attributes such as color, text, fonts, spacing, elevation, animation, corner radius, and more. These tokens ‘variables’ are defined in a central place for both designers (Figma’s style panel) and developers (in CSS) and kept at parity. These tokens can then be used to style components (atoms to organisms) within the design system.

To extend your design system to support multiple themes and brands, it’s important to understand how to leverage the three tiers of design tokens.

• Tier 1 tokens (also known as ‘global’ or ‘reference’ tokens): T1 tokens are context agnostic and aren’t tied to a specific use case. Instead, they can be used globally or referenced by T2 tokens. When building multiple themes or brands, all tokens should exist at a T1 level. Example: $blue-400.

• Tier 2 (also known as ‘semantic’, ‘alias’, or ‘decision’ tokens): T2 tokens map to T1 tokens and have design intent and relate to a specific context, i.e., product theme, light mode or dark mode, or brand. Example: mainBackgroundColor: $blue-400

• Tier 3 (also known as ‘component-specific’ tokens): T3 tokens map to T2 tokens and define all variables and values for a particular component. T3 tokens are often used when developers need to override specific values in predefined UI components. Example: mainButtonBackgroundColor: mainBackgroundColor

When implementing components, developers should reference the most specific token whenever possible (i.e., use a T3 token if it exists, even if the T1 token has the same value). This is important because if we wanted to change the color of a specific class of buttons across the product without impacting the other components we could just change the specific T3 token. However, if we referenced a T1 token, then all T2, and T3 components referencing that T1 would change.

Naming design tokens

I won’t go into too much detail about design tokens. But with the three-tiered structure, it’s important to have a conversation with your team on a naming structure that makes sense. There’s an excellent guide written by Lukas Oppermann on naming design tokens here.

UI themes with T2 tokens

The three-tiered token architecture allows us to control a product’s theme (or brand) at the T2 level without impacting the core components. Converting components to dark mode becomes much simpler if all we need to do is create sets of T2 tokens that control the T3 tokens for each component in a different theme.

In the diagram below, the ‘blueprint brand’ button represents the base component with default design tokens. Brands A, B, C, and D all have their own set of T2 tokens. When we switch between brands (or light mode and dark mode) all we’re doing is swapping out the T2 token set which then updates all the T3 tokens to match the T2 theme

Lightmode to darkmode conversion

Technical details aside, converting your product theme from light mode to dark mode is more complicated than you’d think. It isn’t as simple as just inverting the colors; there are many aspects to consider such as elevation, color choices, contrast, and accessibility.

Elevation

In modern interfaces, design systems use ‘elevation’ levels to communicate a sense of depth and visual hierarchy. Elements in the foreground (closer to the user) stand out more than elements in the background. 

Elevation in light mode is represented using shadows; however, in dark mode, shadows aren’t as visible. Instead, we use ‘surface illumination’; the lighter a surface’s elevation the closer it is to the ‘light source’, and thus the lighter the surface is. 

Lightness is often expressed through the use of a semi-transparent layer on top of the component’s surface (background). When creating elevation levels, it's best to have no more than 4–5 as more levels create potential accessibility and contrast issues. 

True black vs. neutrals

It’s also important to call out that dark mode themes use a range of dark grays rather than true black (000000). Dark gray surfaces express a wider range of colors, elevation, and depth (and allow us to see drop shadows better if we choose to use them).

In addition, dark gray surfaces also reduce eye strain (especially in low-light environments), as light text on a dark gray surface has less contrast than light text on a black surface. Contrary to popular belief, too much contrast can be a bad thing.

The only scenario where you might want to use true black (and maybe borders instead of elevation) is if OLED battery power saving is a concern. Devices with OLED screens benefit from the ability to turn off black pixels to display true black, which consumes less power than displaying white or bright colors. 

Studies have shown that dark mode can save around 40 percent of battery power on phones and tablets with OLED screens. Unfortunately, there is no noticeable impact on non-OLED screens.

Colors in dark mode

When adapting colors for a dark mode theme, it’s important to avoid using saturated colors. On dark surfaces, saturated colors won’t pass WCAG’s accessibility standard of at least 4.5:1 for readable text. Saturated colors also produce optical vibrations against dark surfaces and create visual strain for the user. Instead, opt for desaturated colors as a more legible alternative.

I’ve written an advanced article on the HSB (hue, saturation, brightness) color model if you’d like to try to create your own dark mode palette. But it’s easier to use Figma plugins like ‘Supa Palette’ that can auto-calculate the color values for a palette in both light and dark modes.

Conclusion

In conclusion, as technology continues to evolve, so do user expectations and needs. In this article, we covered several important factors to consider when implementing dark modes, such as atomic design and design token architecture, and the nuances between light and dark themes. Supporting dark mode in your design system is no longer just a nice-to-have feature, but a necessary consideration for your users who interact with their devices in various settings. So, whether your users are in a dimly lit bar or a brightly lit park, rest assured that your design system has got them covered.

Introduction

Ah, feedback — the necessary evil of the design process. Like a gift from your well-meaning grandparents, you have to accept it with a smile, even if it’s not quite what you were hoping for. While “how to ask for feedback” and “how to give feedback” have been done to death, little attention is given to the art of managing feedback. But as a product designer, feedback helps you produce better solutions and make informed decisions.

Have you ever left a feedback session feeling overwhelmed by a laundry list of small changes but no real progress? In this article, we’ll explore some tips on how to triage feedback like a pro and take your designs to the next level.

Parkinson’s Law of Triviality

Why does it seem like nearly everyone has an opinion on design? Turns out, this is actually due to a phenomenon known as Parkinson’s Law of Triviality (also known as the “Bike-Shed Effect”). This term came from C. Northcote Parkinson’s book where he used the example of a committee that is tasked with approving the design of a nuclear power plant and a bike shed.

Parkinson observed that while the committee members were well-informed about the technical aspects of the nuclear power plant, they spent a disproportionate amount of time discussing and debating the design of the bike shed. The bike shed was a simple, concrete problem that everyone could understand and have an opinion on, whereas the technical details of the nuclear power plant were complex and difficult to understand.

In other words, people tend to offer feedback on subjects they feel they understand, regardless of their actual expertise. This often leads to a focus on minor, superficial issues and a glossing over of more important and complex ones. For example, in a big feedback meeting, you might not see non-technical stakeholders having strong opinions on complex issues like system architecture, but everyone seems to have an opinion on the color of a button.

Now, this isn’t to say that design isn’t complex. On the contrary, design is a highly nuanced field. However, at face value, everyone can comment on the aesthetics of a mockup, but not everyone can comment on interaction design, information architecture, or design system implications. So how can we steer stakeholders away from superficial feedback and encourage them to provide valuable feedback that drives the product forward? The answer lies in how you 1) ask for feedback, and 2) frame your design.

Feedback vs. Alignment

It’s important to understand that feedback and alignment are two different concepts that serve distinct purposes in the design process. Feedback involves gathering opinions and ideas from various stakeholders to refine and enhance the design. At the same time, alignment focuses on ensuring that everyone shares the same vision and goals for the project. Both are important but serve different purposes in the design process.

To move beyond superficial feedback, I’ve come up with three best practices on how to move past superficial feedback:

• 1) Be intentional about who you want feedback from and when you want it

• 2) Be specific about the feedback you want

• 3) Frame your work based on points 1 & 2.

Asking the right group for feedback at the right time

To start, let’s talk about how to be intentional about who you want feedback from and when you want it. When there are too many people in a session, it’s common for the most vocal person to dominate, or for a significant portion of the group to start multitasking and disengage.

As a general rule, it’s best to avoid having a big reveal meeting with mixed stakeholders for feedback. Instead, opt for multiple feedback sessions with small groups (4–5 people or less recommended) of stakeholders with related disciplines.

It’s also important to consider when you want feedback and from whom. In the early stages, I tend to seek feedback from other designers, user researchers, product managers, and data scientists, while in later stages, I seek feedback from content, marketing, legal, and other relevant stakeholders. For example, you might hold a feedback session with stakeholders from marketing, brand, and content design in one session, and another session with just engineers. This approach ensures that everyone is actively engaged and can share their feedback more openly.

Writing feedback prompts

Let’s move on to discussing how to ‘be specific about the feedback you want’. First of all, if you’re using a generic feedback prompt like “what do you think?”, you’re setting yourself up for failure and encouraging stakeholders to provide ‘any’ feedback (which often ends up being superficial). Assuming you’ve already arranged a feedback session with a small group of stakeholders, you should create feedback prompts tailored to your audience.

There are four key points to communicate when asking for feedback: 1) the specific problem you’re trying to solve, 2) the most valuable type of feedback at this stage, 3) the feedback that isn’t useful at this stage (i.e., visual design feedback during wireframing), and 4) the minimum viable context (i.e., constraints, requirements).

For instance, if I’m seeking feedback from other designers on an interaction design issue, I might use a prompt like “I’m redesigning the checkout process to boost conversion rates (1 — specific problem). I’m looking for feedback on how to reduce the cognitive interaction costs associated with this user flow (2 — desired feedback). At this stage, I’m focusing solely on interaction design and haven’t considered visual design or content design, so I don’t need feedback in those areas at this time (3 — what isn’t useful). Our goal for this project is to launch a series of experiments within the quarter, focusing on small high ROI tweaks instead of a complete redesign (4 — context). A well-crafted feedback prompt directed to the appropriate audience should elicit much better feedback and avoid the pitfalls of Parkinson’s Law.

Adjusting design fidelity for feedback

The last consideration for getting effective design feedback is how to frame your design work to solicit the desired feedback. In the past, designers typically shared low-fidelity designs at earlier stages of the process due to the time-consuming and expensive nature of high-fidelity mockups.

However, with the advent of robust design systems and the productivity improvements made by tools like Figma, designers now often share high-fidelity work regardless of the situation. Unfortunately, high-fidelity work often includes many superficial visual elements that distract from the more important underlying aspects that actually need feedback.

To increase the quality of feedback we receive, we need to adjust the fidelity of our designs. However, it’s important to understand that design fidelity is not just about the visual aspects of the design (from sketch to high-fi mockup). In fact, there are actually 5 dimensions of fidelity:

• Visual: How realistic does it look?

• Interaction: How realistic does it feel (micro-interactions, states, gestures)?

• Breadth: To what degree is this the whole or just a part (an entire product vs. a single flow)?

• Depth: At a given level of breadth, to what degree is the user constrained?

• Content: How real is the stuff and is it contextual to the user?

To adjust these dimensions, you might:

1. Use low visual fidelity and high breadth fidelity when working with product managers at the start of a project to facilitate scoping and requirements conversations.

2. Focus on interaction, depth, and content fidelity when testing a voice UI concept (like with Alexa) to simulate how users engage with a novel interaction model for a specific use case (such as asking about the weather).

When you adjust the fidelity of your designs, you can ensure that feedback is directed toward the aspects that currently require feedback. This process often involves removing elements rather than adding new ones. By doing so, you can help your stakeholders focus on the core elements that require feedback and avoid getting sidetracked by details that aren’t relevant at the current stage.

One trick I often use for in-progress design work that looks high-fidelity (i.e., leveraging design system components) is to grayscale the entire mockup. You can greyscale a mockup easily in Figma by 1) drawing a rectangle over the entire frame, 2) moving it to the top of the layer stack, 3) changing the rectangle’s color to black, and 4) changing the blending mode to ‘color’. These small tweaks make it obvious that the work is still in progress and helps people avoid getting distracted (or too excited) at the beginning. In addition, when the content hasn’t been thought out yet, I’ll use the ‘Flow’ font meant for wireframing, or when the content is still a work in progress I’d change the font to ‘Comic-Sans’.

In addition, you should also be mindful of the number of design options you present to different audiences. While offering multiple design options to stakeholders can be beneficial in soliciting feedback and exploring different design directions, presenting too many options can be overwhelming and counterproductive (i.e., Hick’s Law).

When presenting to non-design stakeholders who may not be familiar with the design process, it’s usually more effective to present a limited number of options that represent different design directions. On the other hand, when among fellow creative professionals, it can be more appropriate to offer a larger number of options to spark discussion and explore a wider range of design directions. Ultimately, the number of design options presented should be tailored to the specific audience and their respective areas of competence.

How to triage feedback

After you gather feedback from stakeholders, your next step is to triage large volumes of feedback effectively and still drive product progress. To do this effectively, you should avoid two common pitfalls: being too defensive by countering every piece of feedback and feeling pressure to act on all feedback.

- Find & Share on GIPHY
Discover & share this Animated GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.giphy.com

In the past, I used to “die on every hill” when facing opposing feedback from stakeholders. But one of my former managers gave me valuable advice: sometimes, all you need to say is “thank you for your feedback, and I’ll consider it carefully for the next iteration”. By doing this, you can avoid or reschedule potential debates until they become relevant in the future. In some cases, it’s better to simply document feedback and acknowledge it without necessarily acting on it. This allows you to show that you have heard the feedback and are taking it into account. In most cases, the stakeholder would’ve forgotten their feedback by the next session (unless that piece of feedback was critical, but not relevant at the current stage).

To focus discussions on the most relevant feedback, I suggest asking everyone to spend the first half of the session silently writing comments in Figma. This prevents the loudest person in the room from dominating the discussion. In the second half, choose specific comments (not all) to discuss live. This allows the designer to focus the discussion on the most helpful topics. A helpful tip I give stakeholders is to rephrase their feedback in the form of a question. For example instead of “make the button blue”, it should be “why did you choose blue for the button color”? This small tweak makes the feedback seem less prescriptive (i.e., a task), and more of a suggestive prompt.

In addition, the question format allows the designer to explain their rationale and often leads to stakeholders agreeing with them after learning the context. As the designer, you should lead the discussion around the comments that would be most helpful to you, rather than passively letting another stakeholder take up all the time talking about something that may not be relevant to you. I call it ‘steering the conversation.’

Conclusion

While feedback is valuable during the design process, not all feedback is equal. You should focus on the feedback that is most relevant and aligned with the current stage of the project. Rather than acting on every single piece of feedback, view feedback as optional inputs and sources of inspiration for your problem-solving process. Very rarely do I take feedback at face value (especially from non-designers); however non-designer feedback is great for inspiration for diagnosis if you read between the lines.

In conclusion, treat feedback like a buffet; take what you need and leave the rest. In the end, remember that feedback is not a scorecard, it’s a tool to help you refine and improve your design. So, don’t get bogged down in debates or take everything at face value. Stay focused, stay selective, and let feedback guide you toward a better solution.

Do you remember when Facebook and Reddit did massive UI redesigns and there was a massive internet backlash? Or maybe you were one of the many who stubbornly stuck with Windows XP when Windows Vista came out. Change can be difficult, but as products continue to evolve, sometimes drastic UI redesigns are inevitable. So how can designers introduce users to change with minimal thrash?

Humans are creatures of habit and usually hate change. The well-studied psychological phenomenon known as the “Mere Exposure Effect” (or “Familiarity Effect”) can help us understand why this is the case. This effect suggests that people tend to develop a preference for things simply because they are familiar with them. In the context of user interfaces, this means that users often become attached to the current interface and may be resistant to major UI redesigns, even if the new version is objectively “better” in terms of performance or usability.

Incremental Changes vs. Major redesigns

When it comes to making changes to the user interface, we often face the challenge of deciding between a major redesign or incremental changes. While incremental changes can be made through AB testing and experiments, a major redesign requires significant coordination and resources but has more potential impact. So, when should you choose one approach over another?

Generally, it’s recommended to choose incremental changes over a major redesign for most situations. If things are working well and there’s a reasonable baseline metric, small improvements through AB testing and experiments can be more effective than betting everything on a huge redesign.

However, there are cases where a larger redesign is necessary. But before you go down that path, it’s important to ensure there is solid evidence that a redesign will achieve trackable business goals. Too often, designers jump to flashier changes without addressing the less-glamorous aspects such as content, information architecture, or interaction design, which are often the root of the problem.

You should opt for a major redesign if the gains from making incremental changes are minuscule or non-existent. If the current design is underperforming in certain KPIs compared to benchmark metrics, it could also signal that a radical redesign is necessary. For example, if the information architecture of an e-commerce site is broken, no amount of visual tweaks will help customers find the right products and checkout. In such cases, no amount of small tweaks will solve the core problems impacting those metrics.

In the case of deciding to go with a major redesign, there are three techniques: 1) progressive change, 2) highlighting benefits, and 3) tutorials and tour-tips which will ease the transition for users to migrate to the new version of the product.

Progressive Change

Gradual changes can be an effective way to introduce a new design and help users become familiar with it. By making gradual changes, users are less likely to feel overwhelmed and have a smoother transition. One approach to implementing gradual changes is by introducing changes to one part of the user interface at a time. For example, when redesigning the navigation menu, the first change could be a simple information architecture change involving relabeling and re-ordering navigation items before moving on to visual changes. As a guiding principle, I would avoid launching information architecture changes (moving a feature’s entry point) and visual changes together in one update. The difference in the experience would be too jarring, and the mental interaction costs of translating the old interaction model to the new one would put user retention at risk.

The principle of progressive change should also be adopted for introducing new features to users. Instead of publishing massive changes involving multiple new features, it’s much less overwhelming to introduce them one at a time (or as they become relevant for the user’s use case). By introducing these new features gradually, users can learn how to use them one at a time and become familiar with them before the next feature is introduced. This increases the chances of users fully using features relevant to them (rather than never discovering certain features buried in massive updates).

It should also be noted, if there is a larger UI redesign in the near future, introducing a new experience or a V2 with significant upgrades using the new UI is a great way to get users accustomed to the new interface. If the new experience is well received, there’s a high chance of users preferring it due to the ‘Halo Effect’, and opting into upgrading the rest of their interface.

An interesting example of progressive change is Wix’s evolution from the Wix Editor to Editor X. As part of their evolving product strategy, Wix built an AI-assisted website builder experience which came with a massive UI redesign that would eventually permeate the rest of the experience. Instead of forcing users to migrate to a new UI or forcing them to use Editor X, Wix gave users the option to try out Editor X while maintaining access to their classic Wix Editor UI.

“There is no price difference in using Wix Editor X or just the regular Wix Editor. However, the Wix Editor X interface is completely different. It will take you some time to learn all the new features and their capabilities.”—Wix Product Team

Therefore, in order to use Editor X with the new AI features, they had to interact with the new UI. However, since it was initially presented as a ‘new product’ rather than a ‘v2’, adoption was much smoother and users who became familiar with Editor X opted into refreshing their classic experience with the new UI as well.

Highlighting Benefits

In order to successfully introduce a new design or upgrade to existing users, it’s important to understand why people are resistant to change. Many people are satisfied with a solution that’s “good enough” (i.e., satisficing) and prefer to maintain the status quo rather than taking actions that may change their current situation (‘Default Bias’). Therefore, simply offering a choice between the “new” and “old (but good enough)” is not enough to encourage users to adopt the new interface.

To bridge this gap, we need to look at what motivates users to make a decision. The behavior model developed by BJ Fogg provides valuable insights into this. The model identifies three critical elements that drive behavior: 1) motivation, 2) ability, and 3) prompt. If any one of these elements is insufficient, the target behavior (i.e., opting into a UI refresh) will not occur.

When it comes to asking the user to upgrade to the new experience, the “prompt” usually comes in the form of a modal or banner. The “ability” requirement is negligible as it’s as simple as clicking the call-to-action button.

However, what ultimately determines whether or not users will upgrade is their level of motivation. This is the same reason why some people are willing to spend hours waiting in line for a coveted brand like Supreme, but wouldn’t do the same for a more mainstream retailer like T.J. Maxx. Even though the “cost” of waiting in line is the same, people are much more likely to take action at high motivation levels.

To increase users’ motivation to upgrade to a new interface, it’s important to communicate the value propositions that will be most relevant and compelling to them. The two most common and effective benefits are faster loading times and access to certain beta features.

However, it’s important to note that not all benefits are created equal. While things like improved information architecture or better alignment with the brand may be beneficial to the business, they are unlikely to be compelling reasons for users to upgrade. As such, it’s best to avoid mentioning these benefits and instead focus on the value propositions that users care about.

Tutorials and Tour-tips

Providing a smooth onboarding experience to a new design is critical to ensure that users don’t become frustrated or confused when using the new version (this goes double if there are navigational or information architecture changes).

Transition experiences like tutorials or walkthroughs are standard approaches to helping onboard users onto redesigns. When introducing new features, video walkthroughs tend to be the best option for complex features with a skill curve, while progressive interactive tour tips are best for introducing simple features. To help users discover new features, it’s also a good idea to highlight new features using a blue pulse dot or a ‘new’ badge.

When moving a feature to a different location, it’s important to provide a redirect link at the old feature’s location for a period of time after launch. This is helpful as users who have not adapted might mistakenly navigate to the old location due to muscle memory. A great example of communicating navigational changes is Youtube’s ‘comments have moved’ snack bar. It’s located where comments used to be and provide a scrolling anchor that brings the users up to the new location of comments.

Another way to help users adjust to the new design is by providing temporary access to the old design. This is particularly helpful during the beta testing phase when you’re still fixing bugs and making improvements. By allowing users to switch back and forth between the old and new designs, they can gradually become more comfortable with the new version and eventually make the full transition.

Temporary access to the old design can also provide valuable feedback on what users like and dislike about the new design. By tracking where users switch back to the old design, you can gain valuable insights into what aspects of the new design users are struggling with. This information can be used to make further improvements and ensure that the new design meets users’ needs and expectations.

Conclusion

To wrap up, it’s important to keep in mind that users are generally resistant to major changes in interface design, largely due to the Mere Exposure Effect. If incremental improvements don’t suffice and a major UI redesign is necessary, it’s crucial to approach the transition with intentionality. To ensure a smooth transition, it’s recommended to 1) introduce gradual changes, 2) highlight benefits, and 3) offer tutorials to help users adapt to the new experience.

Ready to level up your design skills and reach your full potential? Subscribe to “The Ambitious Designer” newsletter for weekly doses of product thinking, design concepts & frameworks, and career insights. 

Defining Interaction Cost

The foundational concept behind interaction design is “interaction cost,” which is often used to measure a product’s usability. Nielsen Norman defines “interaction costs” as the sum of mental and physical efforts that users must exert to reach their goals.

In general, we want to keep interaction costs as low as possible. However, this is difficult, as the more use cases your product covers, the harder this becomes.

Supporting more use cases and functionality adds complexity to your product’s information architecture (IA) and navigation. A use case is a sequence of steps, starting with a user’s goal and the result when that goal is achieved.

A more complex IA will inherently increase the number of clicks required to accomplish a user’s goal. For example, an iOS clock app has the following alarm use case goals: turn on the alarm, create a new alarm, and edit the alarm.

The rule of thumb focuses on reducing the interaction costs for your target user’s primary use cases. Whenever a product accommodates too many use cases (e.g., enterprise products with a million dropdown menus and features), it becomes harder to use. Choose a specific user and use case to focus on when building a brand-new product.

Physical and Mental Interaction Costs

Most junior designers have this misconception that interaction cost equals the number of clicks required for a user to complete a task.

However, it goes much deeper than that. Interaction costs can be classified as mental interaction costs (MIC) and physical interaction costs (PIC), which I’ll explain below.

Find the Critical User Flows First

A best practice is to identify the primary use cases (i.e., red routes) and reduce their interaction costs at the expense of secondary and tertiary use cases if necessary.

You can use a Red Route Analysis (RRA) to assess which use case interaction flows are most important to your primary users.

Red routes tend to be critical, encompass end-to-end tasks with multiple steps, are often used, built for high volume usage, provide the most value, have clear success criteria, and tie to product metrics.

For instance, in the Uber app, the rider’s red route would be requesting a ride, while their normal route would be adding a payment method.

Tesler’s Law

According to Tesler’s Law of Conservation of Complexity, all systems have an inherent complexity that cannot be removed or hidden.

Good design ensures as much of the complexity burden is on the system rather than the user.

You should begin by reducing the interaction costs within the primary use cases and shift the complexity burden towards the least important use cases.

Tesler argued that a designer and engineer should spend an extra week reducing an application’s complexity rather than making millions of users spend an additional minute.

Be careful not to simplify interfaces to the point of abstraction. A common pitfall is reducing the PIC at the expense of the MIC; I’m looking at you, Apple.

When the system has handled as much of the inherent complexity as possible, you should shift the rest of the complexity away from the primary use cases to the secondary and tertiary use cases.

Most digital products have complicated settings for this reason. In most cases, settings are usually tertiary use cases and very rarely used.

Imagine if you always saw the settings screen instead of the home screen and needed to click several times to get to the screen you needed instead. You’d probably be frustrated at the unreasonable interaction costs.

Mental Interaction Costs (MIC)

Mental interaction costs (MIC) are often overlooked by junior designers who only pay attention to physical interaction costs (PIC).

Common MIC that you may have noticed in products with poor usability include complex navigation, dense instructions, unconventional mental models and interaction patterns, etc.

Attention and Memory

The two most important components of MIC are attention and memory.

When a task requires excessive attention or memory to complete, it will have a proportionally high MIC — decreasing usability.

Some common elements that increase attention costs or divert attention include pop-up banners, models, attention-grabbing visuals, and motion unrelated to the user’s current task. Users are easily distracted. Make sure you’re not pulling their attention elsewhere when they are trying to complete a task.

Evaluating Attention

If you want to evaluate how much attention MIC your interface has, consider doing an eye-tracking study (ETS). You can use ETS to infer not only where users look but what they’re thinking.

The ETS examines two relevant eye movements in particular: “fixation” and “saccade.” Fixation occurs when a user’s pupils linger over an interface element long enough to process it. A Saccade occurs when the eye is in motion — darting between various areas within your interface.

If your ETS reveals many task-irrelevant saccadic movements, it’s likely due to a distracting interface. Your ETS results can help you understand if users are missing critical elements within the interface, what’s distracting, and what’s unnecessary.

Working memory

There is an extensive classification for all the different types of memory.

For our purposes as a designer, working memory (part of short-term memory) is the most relevant. The shortest type of memory is known as working memory, which typically only lasts a couple of seconds during a task.

In other words, our working memory is responsible for the information we can hold in our heads while we engage with other cognitive processes.

Miller’s Law states that the average person can only keep 5–11 items in their working memory at a time. The working memory required to complete a task within your product is proportional to the MIC burden you impose on your users.

Conversely, at no point should your task require the user to hold more than seven items in their working memory at any moment.

In rare scenarios where you require the user to hold more than 11 items in their memory, use “chunking” to reduce their mental burden. Chunking is when individual pieces of information set are broken down and then grouped into a meaningful whole.

For example, we remember phone numbers as XXX-XXXX rather than XXXXXXX. It’s easier to remember the number in two chunks rather than a series of seven individual units.

Another factor related to consider related to attention and memory is “Hick’s Law.” The law states, “the time it takes to make a decision increases with the number and complexity of choices.

Avoid overwhelming users with excessive choices, and highlight the best option for them whenever possible. Break complex tasks into smaller steps, i.e., using progressive disclosure when appropriate.

Physical Interaction Costs (PIC)

I won’t go into too much detail on PICs because most designers understand them well.

Common PIC factors include reaching distance and target width (Fitt’s Law), number of user inputs and actions required to complete a task, etc.

Fitt’s Law states that the time to hit a target (e.g., clicking on a button) is a function of the distance from your input device and the target’s hit-box width.

For example, clicking on a button on the desktop would take much longer if your mouse cursor was far away and the button was tiny.

An excellent method to assess PIC is “task analysis” and examining usability metrics such as “task time (TT).”

The root of TA is looking at the number of tasks required to complete the user’s goal, the frequency of those tasks, the physical requirements, and the task time.

TA and usability metrics are advanced topics that warrant an entirely separate note, so I’ll save it for next time.

Common Pitfalls to Avoid

According to Nielsen Norman Group, some of the most common aspects of a product that result in increased interaction costs include the following:

• Excessive reading and scrolling

• Looking around to find relevant information user

• Comprehending information presented to the user

• Physical user inputs

• Page loads and waiting times

• Attention switches

• Memory load

Situational Interaction Costs

The pitfalls mentioned above may be more or less critical depending on the user. For example, dyslexic users find reading more challenging than the average user (pro tip: use a dyslexic-friendly font like “Dyslexie”).

Users with motor impairments might find clicking much harder than reading. Even the user’s device can play an important role. For instance, a page load on a mobile device may take forever if the cellular coverage is slow.

Interaction Paths and Motivation

In some situations, there are multiple possible paths a user can take to accomplish their goal. Users decide which path to take based on the concept of “expected utility,”; defined as expected utility = expected benefits — expected interaction costs.

In other words, users weigh the benefits and costs of each action and choose the path that has the best balance of benefits versus costs.

Users will gravitate toward the path that has the lowest estimated interaction cost. Even if there’s a lower-cost path, if that path is unintuitive or unfamiliar, they will end up choosing the path they are more familiar with due to lower MIC.

Users with a high motivation (e.g., due to your marketing or branding efforts) are more likely to put up high interaction costs to complete their goal. For example, if Apple’s website had high interaction costs, users may still be motivated enough to complete their tasks.

However, if users wanted to purchase a generic product, and the checkout process had a high interaction cost, they will buy it from a competitor instead.

For more details, take a look at Nielsen Norman Group’s example of how to assess the interaction cost of a use case, “finding out where the word ‘ceremony’ comes from.”

Conclusion

Interaction cost is a vital skill set for any modern product designer. I encourage you to go beyond the superficial interaction design considerations and delve deeper into the numerous PIC and MIC factors.

Of course, we should strive to reduce the interaction costs as much as possible, but when push comes to shove, we should make trade-offs to ensure the primary use cases have the least friction.

An excellent first step is to create a mental model of laws, frameworks, and tests to evaluate your design’s interaction costs.

Ready to level up your design skills and reach your full potential? Subscribe to “The Ambitious Designer” newsletter for weekly doses of product thinking, design concepts & frameworks, and career insights. 

Introduction

Have you ever felt tricked into spending more money or agreeing to something you didn’t actually want? If so, you may have fallen victim to a dark pattern. Dark patterns are design strategies that intentionally deceive or manipulate users into taking actions they might not otherwise take. They are often used to trick users into spending more money and consenting to something they wouldn’t have agreed to otherwise.

While dark patterns might beef up the revenue numbers in the short term, there are many negative long-term impacts that businesses often overlook. The usage of dark patterns raises serious ethical concerns; by intentionally deceiving or manipulating users, businesses expose themselves to many legal and regulatory risks. Recently, Epic Games (the maker of Fortnite) had to pay $520 million to settle allegations of using dark patterns to trick games into making unintentional in-game purchases.

Even with the increasing awareness of dark patterns, companies may implement them in their product design despite best intentions. Dark pattern designs can occur because they seem like easy wins. However, it’s worth noting that products that focus on sustainable, ethical, and long-term design solutions tend to outperform their short-sighted competitors in the long run. Therefore, it is crucial for product teams to remain vigilant and proactive in avoiding such design patterns. In this article, we’ll explore the ethical alternatives to revenue-generating dark patterns, such as sneak into basket in e-commerce, hidden costs during checkout, price comparison prevention in pricing pages, roach motel in account deletion, and forced continuity in auto-renewing subscriptions.

Sneak into Basket

The ‘sneak into basket’ dark pattern adds items to a user’s cart without their knowledge or explicit consent. This is often used to increase the average order value (AOV) and generate more revenue for e-commerce businesses. It relies on the assumption that many users will not notice or bother to remove the additional items from their cart to make users spend more than they intended.

However, this dark pattern can backfire; it makes the user feel manipulated and may lead to negative reviews and a tarnished reputation. It can also result in increased cart abandonment rates, which could result in lower net revenue overall.

In the Sports Direct e-commerce example above, the site added a magazine and ‘free mug’ for $1 during the checkout process without the customer’s consent. Other real-world examples of the ‘sneak into basket’ pattern include airlines that pre-select travel insurance or priority boarding options, e-commerce sites that add additional products to the user’s cart, and mobile apps that automatically opt users into additional paid subscriptions.

Offering discounts and promotions to users who add certain items to their cart or after a cart minimum has been reached is a more ethical way to increase the average order value (AOV) of a business without resorting to deceptive practices. This tactic encourages users to voluntarily add more items to their cart by offering them incentives. This way, users are aware of the offer and can make an informed decision about whether or not to take advantage of it.

Hidden Costs

The ‘hidden cost’ is a design technique that intentionally obscures the full cost of a product or service. This dark pattern is often used in e-commerce or subscription-based services, where the full cost of the product is not immediately apparent, leading users to believe that the product is more affordable than it actually is.

For example, an e-commerce site may offer a product for a low price, but add high shipping or handling fees during the checkout process. Another example would be a subscription-based service that advertises a low monthly fee but hides additional charges, such as activation or cancellation fees. Through obscurity, businesses believe that they can attract more users and generate more revenue without disclosing the true cost of the product. However, once users become aware of the hidden costs, the business may suffer irreversible reputational damage.

Designers can avoid using the ‘hidden cost’ dark pattern by focusing on building transparent pricing models that disclose all costs and fees associated with the product or service upfront. In the case of Airbnb, where the hosts set cleaning fees, incorporating measures like limiting additional fees to a certain percentage of the base cost and making such information more transparent can prevent bad actors from damaging the business’s reputation.

In response to the massive internet backlash, Airbnb made conscious improvements to price transparency in 2022 to display the total price upfront. This allows listings with fair ethical pricing structures to stand an equal chance compared to deceptive listings that have low base rates and high hidden costs.

Roach Motel

The ‘roach motel’ dark pattern makes it simple for users to enter or sign up, but almost impossible for them to exit or cancel. This dark pattern gets its name from the Roach Motel cockroaches bait device; their iconic tagline was, “Roaches check-in, but they don’t check out!”

At one point Amazon and LinkedIn were criticized for using this technique to maintain a high retention rate of users. Once users had registered, they had to contact customer care as the platform didn’t have any account deletion mechanism in place. While this practice may increase customer retention in the short term, it ultimately creates abandoned ‘zombie accounts’.

In the Amazon account deletion example above, users are forced to navigate through a series of intentionally confusing and unclear steps to get the contact information required to delete their account. This not only makes the process more difficult for the user, but it also significantly reduces the likelihood of that customer ever returning.

Limiting customer churn and keeping retention high is important, but it’s important to understand some degree of natural customer churn is a common and expected reality for any business (2–8 percent is considered ‘good’). The best practice is to implement ‘churn surveys’ and ‘customer resurrection’ initiatives instead of inflating your retention metrics with zombie accounts. A churn survey is designed to gather feedback from customers who have churned (i.e., canceled their subscription, stopped using the product, or deleted their account). The survey may include questions about the product’s features, pricing, user experience, customer service, and overall satisfaction with the product. The information obtained through a churn survey can help the team make improvements to retain more customers in the future.

Resurrection initiatives meant to re-capture churned customers are a critical part of customer retention and can take various different forms. For the best results, each resurrection initiative should be tailored for each individual user. For example, a meal subscription service might target a churned customer who canceled due to pricing concerns with a ‘resurrection campaign’ showcasing their more affordable subscription tier and offering a welcome back promotion, such as a $120 discount, if the customer returns.

While resurrection initiatives can be a powerful tool for re-acquiring churned customers, it’s essential to ensure that they are tailored for each individual user based on their churn reason. Generic campaigns that fail to address specific churn reasons tend to be unsuccessful and could even alienate them further.

Price Comparison Prevention

The ‘price comparison prevention’ dark design pattern is used by businesses to prevent customers from comparing the prices of their products with other competitors. This comes in the form of hiding prices, making it difficult to find product details, or creating product bundles that make it challenging to compare prices with similar products from other competitors. For instance, some supermarkets sell packaged products without showing the price per weight, making it impossible to work out whether it’s cheaper to buy loose items or packaged items.

This practice is often combined with the controversial practice of charging different prices (aka ‘price discrimination) to different customers for the same product or service based on their willingness to pay. Businesses use various methods to price discriminate, such as offering discounts to certain groups, charging different prices based on time of purchase or location, or using custom pricing algorithms.

While these tactics can result in customers paying higher prices and choosing the product based on a false perception of its value, it can lead to a loss of customer trust. In the worst-case scenario, it can even result in customers choosing other competitors who offer more transparent pricing, leading to a loss of potential revenue, and harming the business.

Value-based pricing is an ethical alternative to price discrimination. It presents customers with different or additional offerings for a higher price point, rather than charging different prices for the same offering. To effectively implement this pricing strategy, businesses should identify higher-margin offerings that can be upsold to premium customers at a fair value.

For example, a service-based business might charge $5k to most customers with a 1-week deadline, but charge $25k to deliver within 24 hours. In this case, the businesses willing to pay an extra 20k are getting a positive return on investment (ROI), as the extra value comes from time saved. Value-based pricing ensures that customers receive fair value for what they pay, which can help build trust and long-term relationships.

Forced Continuity

The ‘forced continuity’ dark design pattern refers to the practice of automatically enrolling customers into an auto-renewal subscription (often charging the full annual fee at renewal). Businesses using this dark pattern tend to offer a free trial or low-cost introductory offer to attract customers, while simultaneously requiring the customer to provide payment information upfront. If the customer forgets to cancel the subscription before the trial period ends or is not aware of the automatic renewal, they may end up paying for a service they did not want or use.

Lensa, a photo editing app, is an example of a freemium mobile app that uses forced continuity. As a customer, you are offered a seven-day free trial, but upon expiration of the trial, you are then pushed into a recurring auto-renewal subscription that is advertised as $4.99. However, the subscription is actually charged on a weekly basis, rather than monthly, and to receive the advertised price, users must purchase a full year’s subscription upfront. This deceptive pricing practice misleads customers into believing they are signing up for a monthly subscription at a low cost, only to be charged much more frequently and for a much larger upfront fee.

It’s important to clearly communicate the terms and conditions, including information about automatic renewals and cancellation policies, and allow customers to opt-in to a subscription rather than automatically enrolling them. A great example of this is Blinkist implementing more transparent pricing resulting in 23 percent more trial signups, 55 percent fewer customer complaints, and a 74 percent push notification opt-in.

Another alternative is to offer ‘subscription pausing’. This option allows customers to temporarily stop their subscription without completely canceling it. For the customer, it provides the ability to take a break from using the service without losing access to it entirely. For the business, it can help prevent customer churn by retaining the customer, who can resume their subscription at a later time. Here, both sides can come out as winners.

Conclusion

In this article, we explored revenue-generating dark patterns such as: sneak into basket, hidden costs, roach motel, price comparison prevention, and forced continuity. While these tactics may increase short-term revenue for businesses, they will ultimately harm the user experience and damage the trust and loyalty that businesses rely on to build long-term success.

Businesses that are transparent, honest, and fair in their design and marketing practices build long-standing trust with their customers. By avoiding the use of dark patterns, businesses can cultivate a loyal customer base and drive sustainable growth over the long term. As designers, it is our mandate to focus on creating positive user experiences through ethical designs leading to value creation.

Ready to level up your design skills and reach your full potential? Subscribe to “The Ambitious Designer” newsletter for weekly doses of product thinking, design concepts & frameworks, and career insights. 

Subscribe now

I also have a Youtube channel helping designers with career coaching and interview prep. If you’d like to schedule a 1–1 coaching session with me, you can book an appointment.

Introduction

Data tables are the backbone of any effective user interface, providing a powerful tool to present complex and multifaceted datasets in a compact and digestible format. But despite their importance, designing a data table is more complex than you’d think. It may seem like a simple task, but there are countless tiny details that often go unnoticed and can make the difference between a user-friendly, intuitive table and one that’s confusing and frustrating. In this post, we’ll dive deep into the best practices for designing data tables, exploring the key considerations and insights that can elevate your designs to the next level. With the knowledge you’ll gain here, you’ll be able to create data tables that look great and provide a seamless user experience.

What is a table and what is it used for

A data table is a UI component that presents data in a grid format, where columns represent the different fields of the data, and rows represent the records. They are commonly used in business and financial applications, data-rich websites, and software with complex data structures.

Data tables are not suitable for every type of data presentation. They can be overwhelming and confusing when the number of columns and rows is too high, or when the data has a complex hierarchy. In general, when working with smaller amounts of data, or fewer records, it’s more beneficial to use cards instead.

A well-designed data table provides clarity on the information presented and helps users achieve their goals. There are four common goals associated with data tables: 1) find records that fit specific criteria, 2) compare data, 3) edit a single row’s data, and 4) perform bulk actions on multiple records at the same time.

Note: this article is an expansion of nnGroup’s ‘data tables’ article.

1) Find records that fit specific criteria

Users often have different objectives and approaches when it comes to searching for specific information in a data table. There are three scenarios to consider here; scenario 1: the user knows the exact name or details of what they are looking for and will use the search function. Scenario 2: the user is looking for several records that match specific criteria, and therefore might use filtering or sorting options to narrow down their search results. Scenario 3: the user is unsure about what they’re looking for and will just scan the table to find the information they need.

Designing a data table that can support these three scenarios involves several important details. First, the first column of the table should clearly identify each record with a human-readable identifier, as this makes it easier for users to search for a specific record. Imagine staring at an empty search bar trying to remember the 16-digit project ID.

Second, the columns should be ordered in a way that reflects the importance of the data to the user, with related columns placed next to each other to reduce the need for users to move their gaze between distant columns.

Last of all, when there’s a lot of data, there needs to be some form of filtering and sorting. Filter and sort are two common operations that are used to manipulate data in a table. The main difference between the two is the purpose they serve and the way they affect the data. Both filters and sorting can be applied together to achieve a more refined view of the data.

Filtering is a feature that allows users to reduce the amount of data displayed by specifying certain criteria. When a filter is applied, only the rows that meet the specified criteria are displayed, while the rest of the data is hidden. For example, if you have a table of patient information, you might want to filter out all records that aren’t ‘male’ and ‘less than 50 percent in treatment progress’. In general, filters should be ‘global’ meaning they should exist somewhere outside of the table and allow the user to apply multiple filters at once. It’s also important to have a clear active and inactive state for filters, so users understand when the filter is active.

Sort, on the other hand, changes the order in which the data is displayed in the table without reducing the amount of data displayed. Sorting is applied to a single column and can be sorted in ascending or descending order based on the values in the selected column. For example, if you have a table of patient information, you might want to sort it by descending order for the ‘most recent visit’ column. Therefore, sorts should be ‘local’ and embedded within the headers of each column.

2) Compare data

Comparing data helps users detect relationships between different variables, find outliers, and generate insights. However, when dealing with large, complex data tables, users often encounter two common issues: 1) locating relevant information, and 2) making information adjacent for comparison. Therefore, as designers, we should make it easier for users to locate relevant information and make it easier to bring data points of interest close together for comparison.

To address the first issue of ‘locating relevant information’, large data tables should 1) give users the power to pin certain rows and header columns, and 2) create visual anchor points for scanning and comparison. Pinning in the context of a data table refers to locking the position of the header or row in place while the rest of the table scrolls. Pinning a column or row allows users to position two records or columns next to each other, even if the original header or column would otherwise be hidden after scrolling.

This reduces the mental interaction costs of comparison by limiting the amount of eye movement and working memory load. In the example above, the subtle use of a drop shadow on the first pinned column looks like it’s floating “above” the rest of the table’s data to assist with spatial orientation and reinforce the horizontal scrolling affordance.

In terms of visual anchor points, it’s important to use light horizontal borders between each row. For denser tables with smaller row heights, the best practice is to use alternating background fills or ‘zebra stripes’. One last thing to consider is that most tables with checkboxes on each row have a hover state to indicate interactivity.

However, even when building a table without checkboxes, it’s still important to have ‘hover-triggered highlighting’ for each row. This is based on a proven reading technique called ‘finger-reading’, where the reader uses their finger (or a pen) to track the lines of text. Our eyes do not follow the flow of the text naturally; we default to ‘saccades’ when reading. Think of it as our eyes rapidly ‘jumping’ from word to word. However, with a visual anchor, our eye movements shift towards ‘smooth pursuit’ which is less erratic and better for focus and comprehension.

To address the second issue of ‘making information adjacent for comparison’, it’s important to build features that allow users to hide and reorder columns. In the example below, this feature is exposed using a dropdown modal with all the table columns in order. Each column has a toggle switch to show and hide that column, as well as a ‘drag handle’ icon allowing users to drag to rearrange the order.

3) Editing a single record

Editing a single record (row)’s data has historically been a challenge for complex or dense data tables. There are a number of design patterns suitable for this user task.

The first pattern is ‘edit in place’, the user clicks the ‘edit’ button on a row to change it from ‘read’ mode to ‘write mode’. This pattern works best if the table is narrow with no horizontal scrolling required to view the entire record. It’s important to note that all records should not be editable by default (i.e., a spreadsheet); otherwise, it’d be easy for users to accidentally make unintended edits.

The second pattern is ‘contextual overlay’, which includes ‘modal editing’ and ‘side panel editing’. This pattern is more common for dense data tables with many columns (input fields). Modal editing opens a pop-up on top of the data table with all the record fields editable in a form. This pattern is generally not recommended as users typically reference and copy data from similar records rather than editing from scratch (as this helps them with recognition over recall). The alternative ‘side panel editing’ opens a side panel with the editable fields. Ideally, the side panel should ‘push’ the table and ‘squish’ it instead of opening it as an overlay.

The last pattern is ‘accordion expansion’, where the user can expand the row to expose the editable fields. However, this could be potentially confusing to see duplicate labels. However, this is probably one of the best patterns for use cases where users typically edit a very small number of rows. A downside to this pattern is that users tend to not clean up after themselves (close accordions when they’re done with them) and may end up with cluttered displays unsuited for other core table tasks. More importantly, users will have difficulty referring to records that are not in immediate proximity to the one being edited.

4) Bulk actions

Bulk (or batch) actions refer to the mechanism of selecting multiple records (rows) and then performing a command or action on all of them. Bulk actions usually refer to ‘deleting’, ‘moving’, or performing specific tasks (e.g. e-mail, edit permissions, etc.) for the selected records rather than editing (although there are some scenarios where bulk editing makes sense). In most cases, the multi-record selection is done using checkboxes in the first column. For larger datasets, users will often filter the data before using the header checkbox to ‘select’ all the filtered rows.

After selecting at least two records, a contextual ‘bulk action bar’ appears. This contextual bulk action bar can replace the column headers (to save vertical space), appear above or below the column headers, or float in front of the table.

List of miscellaneous tips

So far we’ve covered the four most common user goals associated with data tables and their best practices and nuances. However, there are still a ton of micro-tips that are more straightforward that I’ll list below:

1. Use legible font families (avoid decorative or serif font families)

2. Create separation using spacing, alignment, and lines

3. All text in each row cell and header should be left aligned

4. Use vertical lines for each cell in a row when there are a lot of columns or similar content in adjacent cells (i.e., a text field next to a text field)

5. Use fixed headers (that remain in place when the user scrolls) for data tables with lots of columns

6. Use bold or all-caps text for column headers for contrast

7. Use contrasting colors for links so users know what content is clickable

8. An HTML element <caption> should be placed after the opening table element provides context for screen readers.

9. Avoid duplicating prefixes and suffixes in each cell; add the prefix or suffix in the header instead

10. Right-align numeric columns; unlike text, numerical values are much easier to compare and contrast when right-aligned according to the position of the decimal

Ready to level up your design skills and reach your full potential? Subscribe to “The Ambitious Designer” newsletter for weekly doses of product thinking, design concepts & frameworks, and career insights. 

Subscribe now

I also have a Youtube channel helping designers with career coaching and interview prep. If you’d like to schedule a 1–1 coaching session with me, you can book an appointment.

Introduction

Have you ever found yourself getting frustrated with a website or app because it just doesn’t seem to understand what you want? The good news is that we may not be far from a future where all experiences are dynamic and tailored perfectly for each unique user. We’ve already been using AI to generate dynamic content and product recommendations. But with recent advancements in AI, I thought it’d be worth exploring the current state and possible future of using AI to create truly dynamic user experiences.

AI models rely on ‘inputs’ to provide an ‘output.’ For our purposes, ‘inputs’ refer to user behavior within a product (which can be tracked through events like clicks, scrolls, time delays, and conversions). ‘Outputs’ is how the experience changes for each unique user. The challenge is determining which events and metrics to track and how to interpret them. With the right inputs, AI can enhance the user experience in several ways, including 1) recommendation AI, 2) predictive AI, and 3) adaptive AI.

Recommendation AI

The most widespread implementation of AI is generating recommendations and curating content. Curating content that users see when shopping or browsing home feeds involves using ranking and recommendation algorithms to surface the most relevant and engaging content for each individual user.

Ranking algorithms use AI to determine the order of content we see (and sometimes influence the timing). Products with a home feed typically start with a chronological ranking (most recent posts in order) and eventually switch to an algorithmic feed. However, algorithmic feeds have received criticism for favoring businesses and ads over the content the user follows. Following Instagram’s shift to an algorithmic feed in 2016, they’ve since released an option to switch back to a “chronological feed” due to the backlash.

On the flip side, TikTok has proven how effective a truly accurate recommendation AI is at engaging and retaining users. So why can’t other platforms clone TikTok’s feed ranking and tailored content strategies? The main problem lies in how bad pre-TikTok content feeds were designed to capture user sentiment. Let’s consider a standard social feed unit; there’s the main content (image, video, text), some information about the user profile posting the content, some basic metrics (comments, likes, shares, etc.), and some user actions (like, favorite, share, comment). In this design, the sentiment signals we can capture are all explicit “actions” on each feed unit. Explicit actions require user input, which means we can’t even gather a holistic picture of sentiment since not all users will perform those actions.

On the other hand, TikTok can capture more sentiment signals that reflect most (if not all) of its users. This is due to the TikTok being full-screen for each individual piece of content. Therefore, all sentiment signals map to one piece of content instead of 3–4 pieces like traditional feeds.

Everything you do is a (mostly implicit) sentiment signal. Positive sentimental signals include: watching most or all of the video (implicit), letting the video loop (implicit), sharing the video (explicit), clicking on the profile or music tag (explicit), and following the creator (explicit). Negative sentiment signals include: swiping up to skip to the next video (while this is explicit, it is also a mandatory user behavior). Based on this structure, all users will provide some implicit sentiment signals in addition to the standard explicit signals other platforms have. This makes TikTok’s recommendation AI much more powerful because they have ten times the ‘inputs’ compared to its competitors.

There are other creative uses of recommendation such as Netflix’s dynamic thumbnail. In 2014, Netflix conducted some consumer research that indicated the video thumbnail was the most important factor in a user’s decision to watch something. Since each user has unique preferences, it doesn’t make sense to use the same thumbnail for all users if we wanted to maximize conversion and watch time. Their brilliant solution involved creating a recommendation algorithm that takes in user ‘inputs’ like current location and watch history to select the best thumbnail (output).

As we move towards more AI-powered experiences, consider how algorithms “see” your users become more and more critical. Designers of the future will have a much more important role in creating interfaces that help algorithms effectively capture user behavior (inputs) and identify opportunities for AI-tailored experiences (outputs).

Predictive AI

The growth of AI has opened up new opportunities for enhancing the user’s experience through predictive AI. By anticipating what users might require or desire in the future, products can display relevant interfaces that correspond to their current tasks.

One of the earliest forms of predictive (non-AI) user experience is predictive search and autocomplete. When a user begins to type an input, the interface suggests potential endings and presents them as options that the user can choose from. Although this is a simple example, it’s the best way to illustrate how predictive AI should function: invisible until needed.

For instance, Gmail’s “smart composer” function is a great example of predictive AI in action. When composing an email, users can press the ‘tab’ key to auto-complete the sentence they are writing. This feature significantly reduces the time and effort required to manually finish a sentence — which adds up to significant time savings if you think about how much you’d normally type otherwise.

As predictive AI continues to advance, we can expect to see significant improvements in Conversational User Interfaces (CUI). A CUI is a type of interface that enables computers to interact with users through natural language, such as Siri or automated chatbots. One of the primary benefits of CUI is that there is no learning curve for users and no navigational difficulties.

However, a common issue with CUIs is the interaction cost of forcing users to formulate their own questions and responses. Traditional chatbots have some basic logic for responding to user inputs, but they are still limited in their ability to have natural, non-scripted conversations. However, with the growth of predictive AI, we can expect to see advancements in Conversational User Interfaces (CUI) that allow for more seamless and natural interactions.

CUIs powered by predictive AI would be able to proactively resolve issues or provide contextual actions to users. This means that, instead of waiting for users to encounter a problem and then seeking support, the system can anticipate potential friction points and address them before they arise. For example, a predictive AI-powered chatbot could automatically suggest solutions to all problems (not just scripted ones).

Adaptive AI

Last of all, and perhaps the most ambitious and future-facing application is adaptive user interfaces. To some extent, this already happens with location and user persona-based interfaces. For example, most companies already design separate websites and apps for different locales based on the significant differences in market preferences across countries and cultures.

For instance, Chinese users tend to prefer cluttered ‘super-apps’ (i.e., WeChat) whereas western audiences prefer minimalist single-use case apps. There are also differences in how languages are shown in interfaces. For example, Latin-based languages read from left to right, Arabic languages read right to left, and German text tends to be 35 percent longer than English text. Without AI, the best we can do is to create adaptive experiences for large distinct markets (i.e., different countries, kids' versions, different consumer demographics, etc.). With AI, we have the potential to create adaptive interfaces unique (output) to each user that can evolve based on their in-product behavior (input).

The first non-AI example of adaptive UI I’ve found was the concept of “progressive reduction”. Progressive reduction is based on the premise that a user’s understanding of your product’s interface improves over time and your application’s interface should adapt to your user.

In the example above, their ‘Signpost’ button has three versions: 1) beginner (button with icon and label), 2) intermediate (an icon button), and advanced 3 (icon). If a user becomes proficient enough at the Signposting feature (based on usage) they start seeing ‘intermediate versions’ of various UI elements. If the user has a long period of dormancy or starts to struggle with the feature, their UI regresses back to the ‘beginner version’.

The notion of creating ‘tiered complexity’ versions of each component is interesting as we already do this to some extent. Many complex and more technical products have ‘power user features’ that eventually unlock or get surfaced. However, what if AI could take this a step further? For example, what does your email inbox look like? Do you have thousands of unread messages, or do you like to keep your inbox tidy? Let’s say based on your inbox maintenance behavior we gathered inputs about your personality; specifically your ‘conscientiousness’ and ‘neuroticism’ levels.

Once we gather enough of these behavioral signals, we can then show users a unique version of the interface based on their personality. Let’s use this notification badge as an example. Version A with a blue pulse dot indicates that there are new unread messages without showing the exact number. This pattern might be better for users who have high ‘neuroticism’ and might be more anxious seeing the exact number count on a red background. On the other hand, someone with more ‘conscientiousness’ might appreciate seeing the exact number count as they prefer being more disciplined and structured.

The future of design systems could include complexity ‘levels’ and ‘personality variants’ for components. There are probably limitless dimensions designers could explore based on user behavior. So, while current design systems focus on consistency and raising the minimum UI quality bar, the future of design systems should be about providing constrained options that correspond to specific user behaviors. With the help of AI, the possibilities are endless and the future of user interfaces is sure to be exciting and truly personalized.

Conclusion

In conclusion, the future of AI in creating dynamic user experiences is a promising one, with many new and exciting possibilities to be unlocked. As AI models continue to improve, they will be able to provide a more seamless and tailored experience to users by interpreting user behavior in real time.

Recommendation AI, such as TikTok, is already demonstrating the benefits of having accurate and comprehensive sentiment signals and data to provide engaging content. Predictive AI, such as Gmail’s “smart composer,” can save users significant time by augmenting their abilities; CUI can cover all the neglected experience edge cases. As AI continues to advance, Adaptive AI can be used to surface custom interfaces uniquely tailored for each user. However, it’s critical to remember that AI is only as good as the data it’s fed, and designers will play a crucial role in capturing user ‘inputs’ and translating them into dynamic ‘outputs’.

Ready to level up your design skills and reach your full potential? Subscribe to “The Ambitious Designer” newsletter for weekly doses of product thinking, design concepts & frameworks, and career insights. 

Subscribe now

I also have a Youtube channel helping designers with career coaching and interview prep. If you’d like to schedule a 1–1 coaching session with me, you can book an appointment.

The value equation

Did you know you see over 10,000 ads every single day? In the digital age, making your product stand out in the sea of competition is extremely difficult. The best approach is to figure out how to create value for your customers. But how do we define and measure value? A common misconception is that value equates to price. Good value means cheap, and bad value means expensive.

In actuality, the value equation proposed by Alex Hormozi paints a much clearer picture. The equation is composed of 4 parts: 1) the dream outcome you’re promising, 2) the perceived likelihood of achieving that outcome, 3) the time it is likely to take to achieve that outcome, and 4) the degree of effort required.

The top part of the creation ‘adds value’ and the bottom part of the equation ‘removes value’. A lot of businesses tend to be more biased towards adding value rather than reducing aspects of their business that removes value. This is actually the opposite of what we should be doing. It’s oftentimes much cheaper to fix gaps in the customer’s journey than it is to promise and deliver more.

For example, let’s say you own a company to make coffee machines. Adding value would be investing in research & development, creating more high-tech features, and improving the product’s reliability. All of these are costly engineering efforts. Instead, spending efforts on reducing the effort required like designing the product’s unboxing, setup, and onboarding experience is likely to also create a lot of value for a proportionally cheaper cost. In this article, I’ll break down the value equation and share specific examples of how to increase your product’s value across every dimension.

Dream outcome

The ‘dream outcome’ part of the value equation refers to how well your value proposition resonates with a problem your customer base has. Problems can be classified as “painkiller” or vitamin (although most startups focus on painkiller problems, vitamin problems can still make viable and profitable businesses). The best framework I’ve come across for understanding core problems is “JTBD (Job to Be Done)”. Assuming you understand what problem you’re solving and for whom, the best lever to focus on is your content strategy. This means the headlines and marketing content you use across all your ad campaigns and web pages should be framed around communicating your dream outcome.

For example, ‘Everydae’ is a learning platform. Their landing page headline is “Meet the world’s most sophisticated micro-learning platform”, which is not great for two reasons. First, there’s no problem being mentioned, finding the “world’s most sophisticated microlearning platform” is not a JTBD. Second, there’s no unique value proposition (being the “best” doesn’t count).

Making a few assumptions, a much better headline would be: “Earn your spot at your dream college with just 15 minutes of studying a day”. The JTBD is “I want to get admission to my dream college”, and the value proposition is “I can achieve this with less time and effort if I use this platform”.

Here’s another example. Look at how a simple headline change drastically changes the perceived value of this product. The original headline just explained what the product is, but the new headline explains how it creates value and reflects their customer’s dream outcome.

The perceived likelihood of achieving that outcome

The ‘perceived likelihood’ part of the value equation refers to the likelihood of your business delivering on your value proposition. There are several factors that can influence the perceived trustworthiness of your product. The first tactic is evidence through metrics. In the example below (highlighted in orange), evidence is established through volume metrics: “millions of merchants worldwide”, and “$444b+ USD global economic activity”.

The second tactic is to show social proof, which often comes in three forms: 1) volume or users (or customers), e.g., “…millions of entrepreneurs”, 2) prestige of your customers (e.g., Crate&Barrel, Clek, Cluse, etc.), and 3) through testimonials, reviews, and success stories.

Perceived likelihood of success is a critical factor for customers choosing between products. If you had to get a haircut, would you choose an expert who’s cut hair 10,000 times or a trainee who’s cut hair less than 10 times? The dream outcome (a good haircut) is the same, but the perceived likelihood of achievement is higher with the expert, therefore his services would always be perceived as more valuable.

Time required

The ‘time required’ part of the value equation refers to “time-to-value (TTV)”, which is defined as the amount of time it takes for a customer or user to gain some sort of value from your product. It’s important to call out that the TTV isn’t the time to ‘dream outcome’, but rather the time to (any) value. Therefore, you should figure out how to deliver some form of value as early as possible in the customer’s journey. Ideally, you want to deliver value at specific increments, preferably, after they’ve completed desired actions (e.g. setting up their profile, creating UGC).

Throughout the entire pre-TTV customer journey, you should constantly look for opportunities to provide incremental value. Luckily, there are many opportunities within common time delays such as shipping times (physical goods), download times (digital goods), setup time, training time, implementation time, etc.

An example of condensing TTV for products with natural time delays is the “play as you download” functionality for mobile games. Normally, a video game like Genshin Impact would be a couple of GB and take up to 30 minutes to download. This would normally significantly decrease the perceived value of the game. However, with “play as you download” they can show a much smaller file size in the app store and then prompt the user to download the rest of the game as a patch after they’ve completed the first section of the game.

There are several common time delays in most B2B and B2C purchase flows. In B2B transactions, common time delays include credit checks, approval processes, and contract negotiations. In B2C transactions, common time delays include payment processing, shipping or delivery, and customer verification. Focusing on countering these time delays in the customer’s journey can be an easy way to add value for your customers. In some cases referencing speed in call-to-action (CTA) buttons, e.g., “Register in 5 Minutes” or “Get Started Now” have even improved click-through rates (CTR).

Effort required

The ‘effort required’ part of the value equation refers to the amount of friction required to successfully start using your product or service. There are two important factors to consider: 1) reducing customer friction, and 2) countering potential objections.

In terms of reducing customer friction, you must first understand the most common interaction costs associated with sign-up, setup, and switching. A great example of countering the ‘effort required’ switching costs objection of buying an iOS device as an Android user is the “Move to iOS” app.

Common mitigations for ‘effort required’ include 1) highlighting the ease of setup or installation, 2) showcasing simple and intuitive user interfaces with demos and mockups, and 3) countering objections around requirements (i.e., Get started — it’s free).

Another aspect of ‘effort’ is actually how the pricing model of your product or service is communicated on your landing page. In this context, you can consider money as a form of ‘stored effort’. Therefore highlighting things like generous refund policies, free trials, money-back guarantees, try-to-buy, etc. also has an impact on reducing the perceived effort required. In the Webflow landing page example above, the text underlined in yellow addresses various ‘effort required’ objections.

These tactics remove some of the risks for the customer and increase the perceived likelihood that the product or service will meet their expectations. It also has the added benefit of activating the ‘Endowment Effect’, which is a concept in loss aversion psychology in which people tend to value things more highly simply because they own them. Therefore, when a customer uses a product or service for a period of time during their trial, they become more attached to it and are more likely to purchase it in the future.

Countering potential objections is a common approach to structuring landing pages; each section corresponds to a customer objection. Imagine what the most indecisive, hesitant, and skeptical customer might ‘object’ to when you attempt to sell them your product or service. You might hear things like: “it’s too expensive”, “will this actually work?”, “how long until I start seeing benefits?”, “do you offer refunds?”, etc. Your headlines and marketing content should all be framed around countering a specific objection your customer may have. This is why every landing page has multiple conversion points: in the hero section (for prospects who are sold by the headline), on the sticky navigation bar (for prospects who are sold midway), and at the bottom of the page (for the skeptics finally convinced).

Conclusion

In conclusion, instead of attempting to “improve the product” in general, you should examine your product along the four components of the value equation. The first component, the dream outcome, refers to the customer’s “Job to Be Done (JTBD)”. This is the state that your customer wishes to achieve, i.e., studying at their dream college vs. using the world’s most sophisticated microlearning platform. The second component, perceived likelihood of achieving the outcome, refers to the customer’s trust in the ability of the product to deliver on the promised dream outcome and value proposition. The third component, the time required to achieve the outcome, refers to your product’s “time-to-value (TTV)”. Finally, the fourth component, the degree of effort required, refers to the amount of friction before their TTV and if their objections have been handled. After completing this exercise, you should consider making a list of ideas for each component. Afterward, execute them based on ideas that have the highest return on investment (highest impact, lowest cost).

Ready to level up your design skills and reach your full potential? Subscribe to “The Ambitious Designer” newsletter for weekly doses of product thinking, design concepts & frameworks, and career insights. 

Subscribe now

I also have a Youtube channel helping designers with career coaching and interview prep. If you’d like to schedule a 1–1 coaching session with me, you can book an appointment.

As a designer, making the leap from junior to senior positions can be challenging. However, by understanding the key skills and attributes that are often sought after in senior-level designers, you can increase your chances of getting promoted. Through my experience mentoring designers and helping them advance in their careers, I’ve noticed certain patterns in the traits and abilities of those who have successfully made the transition to a senior role. 

As design roles continue to evolve and expand beyond traditional UX, the skills and attributes sought after by hiring managers have also shifted. Among the core technical abilities valued by employers are proficiency in visual design, interaction design, and product thinking. As a junior or intermediate designer, you may focus on honing your execution skills and collaboration abilities. In fact, the technical skill gap between intermediate and senior designers is less prominent than you’d think. Instead, as you progress to a senior level, it’s more important to develop strong product thinking and communication skills.

Beyond product thinking, you also need to demonstrate your capacity to handle ambiguous and large-scoped projects. With the right development and practice, you can become a well-rounded senior designer who is equipped to handle any challenge that comes your way.

In this article, I’ll share these insights and provide actionable steps for developing the skills and mindset needed to move up in your field.

Communicating business value with product thinking

Product thinking is essentially a designer’s ability to connect user goals with business goals. One of the most important aspects of product thinking is the ability to communicate the ‘business value’ of a design decision to your stakeholders. Talking about user empathy and usability sounds abstract and confuses non-designers. Therefore learning the ‘common language’ of business value gives you a massive competitive advantage in influence and ownership.

Nearly every single project a business invests in has the underlying goal of either profit or growth. Profit is broken down into ‘increasing revenue’ and ‘decreasing costs’. Growth is broken down into ‘customer (user) acquisition’ and ‘customer (user) retention’).

The best product thinkers are able to clearly connect the work they do with one of these four ‘major business goals’. To do this effectively, it’s important to have a basic understanding of metrics, and know how to iterate on your designs to improve those metrics. Let’s begin with an overview of ‘macro-conversions’ and ‘micro-conversions’.

B2B vs. B2C business goals

B2B (business-to-business) and B2C (business-to-consumer) companies have different business goals that they focus on. Therefore, you may want to focus on creating business value based on the type of company you work for. 

Broadly speaking, B2B companies tend to focus on profit since they typically have much larger customer lifetime value (LTV). They often measure success using annual recurring revenue (ARR) and acquisition is typically done through sales instead of growth and marketing (so less design influence here). On the other hand, B2C companies tend to focus on growth, i.e. acquiring and retaining customers and users.

Understanding metrics

All product metrics can be classified as either macro-conversions or micro-conversions. Macro-conversions refer to the major actions that a user takes within your product, such as making a purchase (which connects to the revenue business goal) or signing up for a service (which connects to the acquisition business goal).

Micro-conversions, on the other hand, refers to smaller actions that a user takes on a website, such as viewing a product page, adding an item to a shopping cart, or filling out a contact form. These smaller micro-conversation actions are the steps that lead up to a macro-conversion. Micro-conversions can give insight into how users interact with a product (i.e., friction and drop-off points) before completing a macro conversion.

From a designer's point of view, it’s normally difficult to influence macro-conversions directly without considering the associated micro-conversions. In other words, designers should focus on framing their design rationale around improving micro-conversions and connecting them to macro-conversions and ultimately the overarching business goal.

Example

For example, if you have an e-commerce website, a macro conversion would be a user making a purchase while a micro conversion would be viewing a product detail page. Let’s say you’re tasked with designing the product detail page for Walmart’s e-commerce experience. From user research, you’ve deduced that users have trouble making purchase decisions for expensive products with many SKUs.

Based on that insight, you have 5 ideas on how to improve the ‘micro-conversions’ of reducing ‘bounce rate’ and increasing ‘add to cart’ click-through rate. Take a moment and imagine how you would convince your team to implement your suggestions despite potentially expensive engineering costs.

Here’s how I would hypothetically connect my ideas: If we…(list ideas)

1. …add ‘best seller’ and ‘reduced price’ tags to relevant product pages

2. …add a feature to allow customers to zoom in on the product photos

3. …add context about free shipping if eligible

4. …add context about the product rating and reviews

5. …add context about our return policies if eligible

…then customers will be able to make a purchase decision faster and add the product to the cart because it addresses the most common customer concerns and hesitations uncovered from our user research sessions

…which will reduce page ‘bounce rate’ and increase “add to cart” ‘click-through rate’ (micro-conversions)

…which will increase the ‘checkout conversion rate’ and ‘average cart total ($)’ (macro-conversions)

…which will ultimately increase the company’s revenue (business goal)

Stringing this all together, you can use this as a template: “If we [idea] then customers will be more likely to make a decision faster and add the product to the cart because [specific rationale], we will improve [micro-conversions], which will improve [macro-conversions], and ultimately help us with [business goal].

The next level

Once you’ve developed your product thinking and communication skills to a sufficient level, the next step is to demonstrate your ability to handle more scope and ambiguity. In most tech companies, your seniority is correlated with the scope and ambiguity of the projects you work on.

As you move up the ranks in a tech company, you will be responsible for solving more ambiguous problems and be responsible for a wider scope. This is what Kun Chen referred to in his article about the differences between ‘levels’ at tech companies. Let’s break down exactly what scope and ambiguity mean for designers.

Expanding scope of ownership

The degree of scope refers to the level of responsibility and ownership within a project. At a junior to intermediate level, your scope may include designing a single screen or feature, such as a sign-up screen, to a multi-screen flow such as an onboarding experience. It can also include designing for different platforms, such as iOS, Android, and web. 

At an intermediate to senior level, the focus shifts to how the design decisions impact other teams and the user journey as a whole. The designer starts to identify opportunities for collaboration and eliminate duplicate work and may be responsible for large product areas or entire products.

At senior to staff levels, the designer’s responsibility and scope expand to looking at problems from a holistic systems level. They are responsible for understanding the specific situation and constantly expanding their scope and sphere of influence by looking at design problems from higher degrees of abstraction. For example, at this level, a designer may be responsible for the overall user experience across all channels of a product, and not just a single screen or feature.

Working on more ambiguous projects

The degree of ambiguity refers to how open-ended and non-prescriptive the tasks are. At a junior to intermediate level, tasks typically have clear requirements and scope. For example, redesigning a sign-up flow with specific requirements and constraints.

As you progress to an intermediate to senior level, you’ll no longer get explicit requirements for your projects. Instead, you’ll be given specific problems to solve or specific metrics to drive, such as increasing sign-up conversion rate by 10 percent or driving 50,000 new users through the sign-up flow this quarter.

At the senior to staff level, you are expected to identify problems and opportunities, propose a vision, and solicit internal support. For example, you might conduct your own investigations and discover that there is an 80 percent bounce rate on a critical page that you’re driving traffic to through ad spend. Once you identify an opportunity to create significant business value, you would then rally internal support around your vision and lead the entire project. At this level, you are expected to take ownership of the problem and push for alignment, instead of being told what to do.

How to get started

So now you’re probably wondering how you can expand your scope and work on more ambiguous problems at work. One way to do this is by partnering with product managers as a thought partner. When working with junior designers, product managers often have to come up with ideas to achieve certain business goals, which they then translate into specific requirements for designers.

For example, if a product manager asks you to redesign a sign-up page to make it more aesthetic, by understanding the core problem behind the request, you can propose a better solution instead. Using your UX knowledge (i.e., understanding of interaction costs), you could suggest improving the messaging throughout the entire sign-up conversion funnel, which would likely be more impactful in increasing sign-ups.

Another way to expand your scope is by leading cross-team initiatives. This can be done by identifying related or adjacent projects from other teams and aligning everyone’s vision to reduce duplicating work. Using the example above, if you discover that the pages before the sign-up form have high bounce rates, you could conduct research and form a hypothesis that the problem may be due to a combination of slow loading times, confusing messaging, and unclear call-to-actions. You could then present your findings to the teams responsible for those parts of the experience and coordinate efforts to solve the root cause of the problem, instead of implementing a superficial solution.

Conclusion

In conclusion, as a product designer, it’s essential to develop the foundational skills required to be able to handle more scope and ambiguity, which are ultimately the key factors in determining your seniority level in a tech company. Instead of mindlessly grinding your technical skills or trying to hit all the checkboxes on an internal promotion rubric, it’s much more worthwhile to develop these skills as they would allow you to thrive in any environment.

Please share this article with other designers who might find it helpful!

Share

Subscribe now

I also have a Youtube channel helping designers with interview prep and product thinking. If you’d like to schedule a 1–1 mentorship session with me, you can book them here.

Helpful readings

• Learn how to structure product experiments as a designer

• Learn about interaction costs for articulating micro-conversion rationale

• Learn how to improve retention by reducing TTV and the Hook Model

• Learn how to increase acquisition by writing better content for your landing pages

Introduction

Have you ever felt excited to try a new product or service, only to have your motivation dampen after seeing a long tedious onboarding process? 

As designers, it’s not only our responsibility to craft visually appealing and intuitive interfaces, but also to tap into the psychology of motivation and engagement to help users achieve their goals within our products.

In this article, we’ll uncover the secret to keeping users on track and motivated with a deep dive into the psychology of perceived progress. From progressive disclosure to the Zeigarnik Effect and beyond, you’ll learn how to harness the power of cognitive biases and psychological principles to create a sense of accomplishment and drive users to completion. 

But first, let’s uncover the underlying reasons for why we all struggle to stay motivated when facing time-consuming tasks.

The Stanford Marshmallow Experiment

One important aspect of motivation is how well an individual handles ‘delayed gratification’. To understand this concept better, let’s look at the Stanford Marshmallow Experiment.

In this experiment, children were presented with a marshmallow (small short-term reward) and were told that if they could resist eating it for a period of time, they would be rewarded with a second marshmallow (larger long-term reward). 

In the results, 54 percent of the children failed, while the remaining children who were able to wait for the second marshmallow were found to have better life outcomes, such as higher SAT scores and lower rates of obesity.

Unfortunately, humans have a cognitive bias to prefer immediate over delayed gratification, meaning we tend to favor short-term rewards over long-term ones. So when users have the intention to use a product to achieve their goals, we can help them with the following design techniques.

Progressive Disclosure

The first technique is known as ‘progressive disclosure’. Progressive disclosure involves breaking a large task into smaller, more manageable steps (typically leading with the most critical or relevant steps). Progressive disclosure reduces the mental interaction costs for complex tasks.

This is supported by the fact that the ‘activation energy’ required to complete a large task is generally higher than the activation energy required to complete a series of smaller tasks. This is because larger, more daunting tasks can be overwhelming and can make people feel unmotivated or hesitant to even start. In contrast, smaller tasks are often less intimidating and can be more manageable for users to undertake.

Goal Gradient Effect

Imagine you’re a mountain climber, reaching for the summit with every step. But with each step, the peak seems to move farther away. It might feel like you’re stuck and making progress feels impossible. However, as you get closer to the mountain peak, it becomes more attractive and draws you in, and pushes you to reach the summit. This phenomenon is known as the ‘Goal Gradient Effect’; which states people get closer to a reward, their motivation towards achieving their goal increases.

This is why having users complete smaller tasks (with smaller incremental rewards) is more motivating than completing a large task with a large reward. Short-term rewards motivate us more compared to long-term, future ones. This concept has even made its way into management science; for example, Nucor restructured its entire bonus incentive structure to be based on monthly targets instead of annual ones.

This means two things: 1) we should break up large complex tasks into smaller tasks, and 2) we need to provide small incremental rewards along the way. For breaking up large tasks into smaller tasks, you should always turn progress bars into segments or individual steps.

You can also get creative with making a large number of small tasks feel like smaller groups of tasks (i.e., chunking). For example, let’s say you need to collect 10 inputs (e.g., name, email, profile preference, etc.) as part of onboarding. Instead of asking for all 10 inputs up front, you should ask for email (doubles as their login username) and password. Then, you can surface another couple of inputs as part of an ‘onboarding checklist’, and then use progressive disclosure to introduce the remaining inputs when they are contextually relevant.

One of the most interesting design patterns I’ve seen is Discord’s ‘unclaimed account’ feature, which is a brilliant way to eliminate the first step of ‘account creation’ friction. In addition, this also increases the user’s motivation to complete the sign-up tasks because they’ve already tried out the product.

The Endowed Progress Effect

By now, I’ve hopefully convinced you to use progressive disclosure to break up your large complex tasks into smaller tasks and to provide incremental rewards along the way to activate the Goal Gradient Effect. 

Now, there’s a bit of a trick to designing the first step of a task’s progress bar. The best practice is to actually give users a ‘freebie’ as a head start, which provides them with a sense of immediate progress.

Let’s imagine you’re at a coffee shop and they give you the choice of either A) a ten stamp loyalty card with no free stamps or B) a twelve stamp loyalty card with two free stamps. Which card would you take? If you answered B, then you followed the same behavior as most other people. Even though both rewards require the same number of stamps, you chose the option with the artificial head-start because it came with the illusion of progress.

Incremental rewards in products can take the form of ‘intrinsic rewards’ and ‘extrinsic rewards’. Intrinsic rewards are those that come from within the user, such as a sense of accomplishment or satisfaction from completing a task. Extrinsic rewards are those that come from outside the user, and tend to be more tangible (i.e., checkmarks, bonus points, badges, etc.). Advanced designers can take advantage of these principles to design an intentional progression with a gamification loop leading up to the ‘tipping point metric’ in ‘time-to-value (TTV). 

The reason we do this is because of the ‘endowed progress effect’, which is a phenomenon where people perceive a task as being more valuable or worthwhile when they have made some progress towards completing it. Therefore, you should always start your progress bars and checklists with the first step auto-completed.

Peak-End Rule

Imagine you’re at a comedy club, and the first comedian of the night is terrible. You can’t help but check your watch every five minutes, wishing for their set to end. But then, the next comedian comes on stage, and they have you laughing so hard that you’re practically in tears. Finally, the last comedian of the night takes the stage, they’re still pretty funny.

According to the peak-end rule, you’re more likely to remember the experience of the comedy club as a positive one, because at the peak of the experience was the second comedian who was hilarious, and at the end of the experience was the third comedian who was still pretty funny. Even though the first comedian was terrible, they would not be remembered as much and don’t weigh as much as the peak and the end of the experience.

The peak-end rule is a cognitive bias that states people tend to remember the most intense point of an experience (the ‘peak’) and the end of the experience more than the average level of the experience. This means you really want to design your last step to leave a good impression since it influences how people remember and evaluate your product (which is crucial after sign-up and onboarding).

Some ideas of how to implement this principle into your designs include 1) a ‘gift’ when the user tries to exit the site or open another browser tab, 2) encouragement notifications at certain milestones, and 3) a sense of excitement and anticipation for their next session. The timing may be difficult to pull off, but timing around the ‘time-to-value’ would be a good place to start.

Task Abandonment and Re-activation

Now let’s say we’ve done all we can, and despite our best efforts, the user abandons their session before completing all their tasks. We can motivate users to finish their tasks in their next session by understanding the ‘Zeigarnik effect’ and the ‘Ovsiankina effect’. Luckily, if we’ve done everything right with our segmented progress bars, the first effect should already be triggered. The Zeigarnik effect refers to the tendency for people to become more motivated to complete an incomplete task (or remember to come back) once they have started it.

The Ovsiankina effect refers to the phenomenon in which people are more motivated to complete a task if they feel that it is aligned with their values and goals. For example, when a user signs up for Duolingo to learn a new language, they might have a specific goal in mind such as “being able to have a conversation with a native speaker” or “being able to read a book in the target language”.

If Duolingo collects this information during onboarding, and later on in the user’s journey if the system detects that the user’s motivation is low (e.g., a period of inactivity), it can leverage the Ovsiankina effect to improve our push notification with more targeted messaging. Instead of a generic reminder to “Learn 5 new Spanish words today”, it could remind the user of their initial goal for learning Spanish.

By gathering the user’s ‘why’ behind their goal and aligning the in-product tasks with the user’s goal and values, designers can create sources of intrinsic motivation to help users complete tasks related to their goals. 

Uber’s Income Targeting and the Arbitrary Endpoint Trap

Of course, these techniques can also be leveraged in other ways. Let’s take Uber’s ‘income targeting’ as an example, and how the hidden ‘arbitrary endpoint trap’ mechanism works. Uber’s income targeting is a feature that allows drivers to set a financial goal for themselves at the start of every workday. So in other words, this pattern encourages the driver to set an arbitrary, but ambitious and achievable goal for themselves. It’s a brilliant (but questionably unethical) way to increase their supplier liquidity (drivers) by getting them to voluntarily ‘round up’ the number of trips they complete in a day.

Duolingo also features this exact same pattern in a more ethical way that aligns user goals with business goals.

The ‘arbitrary endpoint trap’ refers to the phenomenon that occurs when people set arbitrary goals for themselves, and then lose motivation to continue working towards those goals once they are reached. So although these Uber drivers might occasionally ‘round up’ and complete a few additional trips to hit their income target, they would be much less likely to continue after they’ve reached their goal.

To get around this, it’s important to design natural ‘end-of-session hooks’ that would keep your product top of mind, or better yet have them opt into push notifications and emails. A brilliant execution of this is the egg incubator feature in Pokemon Go. Each of these ‘egg slots’ acts as both arbitrary endpoint traps and end-of-session hooks. As you get closer to hatching an egg, you’re likely to keep on walking with the app open to hatch the egg to receive your ‘variable reward’.

However, at the end of your session, when you notice another egg is close to hatching as well, something interesting happens. You’ll subconsciously feel a need to check the app again in a few hours for another potential variable reward. This creates a positive feedback loop where the end of one session motivates the user to start another session. Of course, this is much easier executed in video games, and much more difficult to orchestrate in a consumer product.

Conclusion

By keeping the principles and techniques we discussed in mind, designers can create more motivating and satisfying experiences for users, leading to increased engagement and retention. It’s important to remember that the design process is not just about making a product aesthetically pleasing, but also about understanding how to effectively guide and motivate users toward achieving their goals.

As a society, we are constantly seeking ways to differentiate ourselves from others and assert our social status. This desire for status has always been present in human nature, but in today’s digital age, it has taken on a whole new level of importance in consumer social products and social media. Some of the most powerful digital products ever built use ‘Network Effects’ to create addictive artificial status games.

Online social platforms like Twitter, Instagram, Facebook, and even video games have become an integral part of our daily lives. Despite all the positives, these platforms have also given birth to artificial ‘status games,’ where users compete for attention and validation through likes, comments, and followers. While participating in these status games may seem harmless, they can have unintended consequences for our mental health and well-being.

After reading Eugene Wei’s famous Status as a Service (StaaS) article and reflecting on what I learned designing consumer experiences at Facebook and consulting for several consumer startups, I wanted to write about my takeaways on designing for ‘status’ and how to do it in a more ethical and sustainable way.

Status Games and Social Capital

Most (if not all) people are involved in multiple status games at a time. A status game is a competition in which people seek to increase their social status or perceived value within a particular group or community. The amount of social capital an individual has compared to others within a status game determines their social status.

Social capital varies between different platforms and is only relevant to users who participate in that particular status game. For example, on Twitter, social capital refers to the number of followers a user has, while in a video game, it might refer to a player’s level or rank.

For social status to have meaning, there have to be some individuals with more of it, and some individuals with less of it. While intangible and hard to measure, as social creatures, we can feel the transfer of social capital status and the social status of individuals within a status game.

Younger people tend to be more engaged in artificial status games on social media because it offers more opportunities for them to increase their status (since they may not have as much real-world status or wealth). This can be powerful and addictive because it fulfills our intrinsic desire to find and connect with a group of peers as a high-status member.

Designing the Transfer of Social Capital

Within the context of social platforms, individuals must put forth some sort of effort or show ‘Proof of Work (PoW)’ in order to gain social status. Using social media platforms as an example, users might follow a user (transfer social capital) because they like their content (PoW).

Proof of Work must require some sort of ‘skill and effort’ in order for it to be rewarded to those who deserve it. For example, let’s look at why Prisma (a photo filter app) failed to pivot to a social network while Instagram succeeded. Prisma failed to transition into a social network because there was no ‘skill-based’ proof of work since anyone could create a masterpiece by clicking a button. Therefore, there was no reason to follow one Prisma user over another. As a result, since nobody could accumulate followers there was no transfer of social capital, and therefore no status game that could be played. On the other hand, Instagram had lots of success because although there were filters, it couldn’t elevate a poor photo into a masterpiece and the burden of proof of work was still on its users (hence there was a status game that could be played).

By carefully considering how PoW within a platform should be rewarded, you can control how social status is transferred and what behaviors should be rewarded or punished. With a bit of intentionality, designers can create environments that are more positive and positive for users.

Network Effects

The larger a particular group or community is, the more attractive its social capital and afforded status is to existing and aspiring members. This is often seen with social media platforms, where the more people that are on the platform, the more attractive it becomes for others to join and participate. Platforms leverage network effects to accumulate users and elevate the attractiveness of the status game it offers. Network effects refer to the phenomenon where a platform becomes more valuable as more people use it.

Network effects can make the competition for social capital and status even more intense. For example, if a particular social media platform has a large user base, there may be more competition among users to get likes, comments, and followers.

Segmentation of Status Games to Improve UX

One way to improve the user experience of status games in social media is to segment the status game into smaller segments. This can be done by creating different levels or tiers within the status game, each with its own set of rules and rewards.

Video games do a fantastic job at this by segmenting their status games into smaller chunks to make them more accessible and engaging for a wide spectrum of players (i.e., using levels or ranks within the game).

For example, in a first-person shooter game, players may start at a beginner level and work their way up through the ranks by improving their KDA (kill-death ratio). As they progress, they may unlock new weapons, perks, or other in-game rewards. This can help to keep the game interesting and engaging for players, as they have a clear sense of progression and can see their progress reflected in the game.

On the other hand, imagine a video game without segmented status games where experienced players would easily dominate new players due to a lack of a progression system. In such a game, all players would be on an equal footing, regardless of their skill level or experience. This can create a number of problems for new players, who may feel overwhelmed or discouraged by the more experienced players. Without any way to progress or earn rewards within the game, new players may feel like they have no way to catch up or compete with the more experienced players. This can lead to a lack of engagement and enjoyment for new players, as they may feel like they have no chance of success within the game.

This is exactly how existing social media platforms are designed. Users with large followings tend to get even more engagement, while those who have smaller followings struggle to get noticed.

As a designer, we should consider how social platforms can also segment their status games in similar ways. Some examples of segmented status games include: 1) creating different ‘tiers’ based on account age or follower count (example: newbie, intermediate, and advanced forums), 2) creating different verticals each with their independent status game (example: Subreddits on Reddit), 3) allowing users to create their own status games within the platform (example: Discord communities), 4) time-based status game resets (example: timebound challenges and leaderboards).

Indicating Status on Social Media

Designers create indicators of social status and accumulated social capital using visual cues to communicate a person’s social status within a given community. Some common examples of these indicators include:

• A large number of followers or likes

• Access to exclusive tags like ‘Top Writer on Medium’

• Tagging users in high-status events or features like ‘Featured on ______’ or ‘Top profiles for ______’

• Verified account checkmarks

This not only serves as a way to reward high-status users, but it also gives others something to aspire to, creating a positive feedback loop that encourages participation and engagement.

The Negative Impact of Status Games

While status games in social media can provide a sense of accomplishment and a way to connect with others, they can also have negative impacts. One potential negative effect is the creation of a hierarchy within a community, where some users have higher status than others. This can lead to feelings of inadequacy or exclusion among those with lower status and can contribute to a negative social environment.

Another issue is the potential for users to engage in unethical or harmful behavior in order to increase their status. This could include cyberbullying, spreading misinformation, or exploiting the platform’s rules in order to gain an advantage.

Another consequence to consider is the phenomenon known as ‘Tall Poppy Syndrome,’ in which people who achieve high levels of success or recognition are often met with resentment or jealousy from their peers. This can lead to a negative social environment where people are discouraged from trying to stand out or achieve success, as they fear being cut down by others.

Creating Positive and Ethical Status Games

To make status games more positive for users, there are several approaches to consider. The first approach is to design for ‘status equality,’ which involves creating a level playing field for all users and avoiding the creation of too many ‘winners’ or ‘losers.’ For example, Instagram has experimented with hiding the number of likes on posts. Another approach is to reframe ‘status mobility’ with a focus on personal improvement rather than competition with others. For example, imagine a weight-loss community can focus on celebrating each user’s relative improvement rather than ranking users based on objective measures of fitness.

The second approach is to encourage ‘status generosity,’ where users are recognized and rewarded for helping and supporting others rather than just focusing on their own status. This can foster a more positive and collaborative social environment. For example, imagine a forum where instead of using status indicators like ‘most active’ or ‘top contributor’ you have tags for ‘most helpful’.

The last approach is to promote ‘status sustainability’ which involves creating a system that rewards behaviors that are sustainable in the long term. Particularly on social media, instead of creating an environment where users feel pressured to post daily or create ‘perfect content’ we could do the opposite. An example of this is the introduction of ‘stories’ on Instagram and other social media where users could post temporary ‘imperfect’ content with reduced pressure without sacrificing opportunities to connect with other users on the platform (i.e., story replies and likes).

Conclusion

Overall, designing for status in consumer social products and social media is a complex and multifaceted task. But by considering the various ways in which people seek to increase their social status, and by finding ways to encourage positive and healthy behaviors, designers can create platforms and products that foster a more positive and supportive social environment.

So the next time you log onto your favorite social media platform or fire up that new social game, take a moment to consider the role that status plays in your experience. And remember, while it’s natural to want to stand out and receive recognition, it’s important to do so in a way that is respectful and considerate of others. After all, we’re all just trying to feel accepted in our own little corner of the internet — let’s do it in a way that benefits everyone.

Additional Reading

• Status as a Service (StaaS), Remains of the Day (Eugene Wei)

• How to Play the Status Game, Modern Wisdom Podcast (Chris Williamson)

• The Status Game: On Human Life and How to Play It: On Social Position and How We Use It, Will Storr

Products with a ton of features tend to make the user experience worse for most people. Despite this, most products (especially enterprise ones) eventually end up with “feature bloat.” 

While feature bloat might not necessarily make you lose your top enterprise customers (they’re the ones who requested all these features anyways), it alienates the vast majority of your normal, non-power users. This can create a vacuum of innovation that emerging competitors can take advantage of (e.g., Atlassian vs. Trello, which ultimately led to an acquisition) 

Users and stakeholders always advocate for new features, but they rarely tell you to remove a feature. This doesn’t mean removing features won’t improve the product. 

The pain of losing a feature is immediate, but the benefits aren’t apparent until later down the road. In this article, I’ll explain why feature bloat is bad and how to remove features without pissing off your users. 

“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away”.

—Antoine de Saint-Exupery

More Features can be a Bad Thing 

Excessive features often lead to poor information architecture (IA), which makes it harder for new users to experience their first “aha moment,” which ultimately increases the time to value (TTV) and impacts user retention. 

IA can be understood as the hierarchical relationship and connections between parts of your product. Good IA is critical as it makes in-product navigation easy and intuitive. Unfortunately, many product teams recklessly tack on new features onto their IA without considering the ripple effects it has on the end-to-end experience. 

The “aha moment” is the point at which your users experience true product value for the first time; TTV is how long it takes them to reach that point. This is critical, as users who experience their “aha moment” have a much higher retention rate. 

These three related concepts can make or break your product’s new user retention. Users who experience their “aha moment” at an earlier point tend to have a much higher retention rate.

Coffee Machine TTV Example

Let’s take a look at coffee machines as an example. The TTV would be the time between unboxing the machine and getting their first sip of coffee (the “aha moment”). 

Traditional coffee machines come with thick instruction manuals, tons of gauges, buttons, switches, and levers. Most new customers would get frustrated at the amount of time and effort required to get a simple cup of coffee. 

On the other hand, Keurig has just a couple intuitive steps: open pod slot, place pod in, close slot, and press button. 

Even if other coffee makers produce better coffee, it’s needlessly complex for most users, and it takes them forever to experience their “aha moment” (if at all). 

Good products adopt a similar mindset. Users who use your product hire it for a specific “job” (according to JTBD). Most of those users are satisficers (we often incorrectly assume our users are maximizers); as long as the job is accomplished at a “good enough” level, they’re content. 

As your product grows, features are often added to accomplish secondary and tertiary goals some of your users might have (or to help power users). While this might be perceived as “improving the product,” it usually has the opposite result. Instead, focus on other more productive areas of the product to work on; I like using the Kano model as a framework for this. 

This does not mean we should just ruthlessly gut all features not related to the core JTBD. We need to consider how removing features impacts some of our users. Enter: “Hyrum’s Law” or the “Law of Implicit Dependencies.”

Hyrum’s Law

A Google engineer “Hyrum Wright” once said, “with a sufficient number of users of an API, it does not matter what you promise in the contract: all observable behaviors of your system will be depended on by somebody.”

Although he referred to API design specifically, we can extrapolate his thought to extend into the realms of product and design. Reworded, “Hyrum’s Law” can be interpreted as “at a certain scale, anything your product offers will be (correctly or incorrectly) used by someone out there.  

FeedbackPanda Hyrum’s Law Example

An interesting example of this comes from FeedbackPanda, a tool for student feedback templates. The team tried to deprecate an extra unused input field that allowed users to enter a particular ID associated with their students. 

Within minutes, they received several angry customer complaints. Turns out, a lot of teachers used the ID field as a private note about each student like, what their favourite color was, and now it was all gone. 

Instead of a knee-jerk reaction to add the feature back, you should evaluate the feature in detail using the following decision tree.

Evaluating Features for Removal 

I consider three factors when my team and I debate whether or not we should remove a (non-prerequisite or core) feature. Features that should be removed fall beneath your team’s designated “minimum usage” threshold or ones that do not correlate with higher retention rates. 

In the FeedbackPanda example, the feature does meet the usage bar and does correlate with higher retention; however, the feature is not being used as intended. Therefore the team should redesign the feature to match its use case. When redesigning features, you should be careful of modifying the IA as a feature’s usage and value are closely related to its location. 

The use of the student ID field is unintended. The user’s intent wasn’t to enter a student ID but rather to use it as a private freeform note area. Therefore the obvious solution would be to implement a notes feature. 

If your team does decide to revise a feature you planned to remove, make sure to implement tracking to measure its usage and consider whether or not it negatively impacts the TTV. Furthermore, the revised feature exists on the same screen (ideally in a similar location). In this example, the notes screen would no longer be as valuable if moved to another part of the product. 

Removing Features vs. Sunk Cost

Sometimes removing a feature has some pushback from stakeholders. In most cases, the marketing or sales team is resistant to removing features because it might hinder their ability to close new clients (more features = more perceived value). 

Although sales teams are evaluated based on the volume of sales, businesses aren’t. The health of a business is often measured using APRU (average annual recurring revenue per user). The “annual” and “recurring” part of APRU implies the importance of having a healthy retention (which is linked to all the concepts I discussed earlier). 

On the other hand, some stakeholders think resources spent adding the feature are a sunk cost, but we shouldn’t let the Sunk-Cost Fallacy cloud our thinking. 

Sunk-Cost Fallacy is the tendency to follow through on an endeavor if we have already invested time, effort, or money into it, whether or not the current costs outweigh the benefits. Consider that most of the cost for a feature is not in the initial development but in the long-tail of time after it is launched (maintenance, customer support, documentation, etc.). 

A responsive and straightforward product with a temporarily disgruntled customer is better than a slow and complex behemoth that allows every customer to do everything. Don’t be afraid to champion the removal of certain features over implementing new ones. 

“If you design for everyone, you delight no one. That leads to mediocre products”. 

—Alan Cooper

Don’t forget to subscribe to get all the updates!

Subscribe now

Join our private mentorship group, watch some helpful videos about design career, interviews, and growth on my Youtube channel, and book 1-1 mentoring sessions with me here.

If you found this useful, please consider sharing it with a friend or on social media. It’ll motivate me to write more and keep this going!

Share

I often reference Jakob Nielsen’s 10 general principles (heuristics) of interaction design when teaching interaction design in my free private mentorship group. 

The first (and most important) principle is “visibility of system status”, which states: “The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.”

In other words, the user needs to (1) understand the current system status and (2) receive feedback (e.g., error, success, loading) from the system about their actions. These factors allow users to plan their following action (i.e., gulf of evaluation & execution) and create confidence in their decisions. 

Appropriate and immediate feedback

Appropriate feedback matches the user’s actions with their mental model of how the system works and instills confidence in their actions, i.e., if you hover over a button, you’d expect to see a state change. 

Immediate feedback tells the user that their action has been registered and helps instill confidence, i.e., when you click on navigation, and it takes a while to load, you’d expect to see a loader. 

In this Eye-Tracking Study (ETS) from NNg, the user clicks on a button and is unsure whether a new page is loading because there is no feedback. The hollow red circle shows where the user is fixating on the screen. The user looks back and forth between the button (to see if there was a state change), and the top of the screen (to check for a progress indicator) to no avail. 

When appropriate and immediate feedback is missing, users get frustrated and lose confidence in their actions resulting in unnecessary physical (repeated clicks) and mental interaction costs.

Feedback classification

1) Acknowledgement of input

This form of feedback tells the user that their input is being accepted and registered by the system. Without “acknowledgment of input,” the user will question if the system registered their action and often conclude that something is broken. 

For example, when a user enters their credit card number in the input field, the field should show each number as it’s being entered.

2) Format validation 

This form of feedback tells the user that their input is in the correct format. In the credit card example, perhaps the input field only registers numbers as valid input (so when the user attempts to enter a letter, the system does not register it and optionally shows an error message). 

3) Progress indicator (current system status)

This form of feedback tells the user the current status of the system. If the user performs an action, it also reflects the state of processing their user input and expects a delay if applicable. 

A non-action example would be the iPhone storage screen showing the current status of the storage “16.2 GB of 64 GB used”. If the user deleted many podcasts, the status would need to spend some time recalculating the current status. It might show a progress indicator, reflecting the user’s action of deleting podcasts to free up storage.

Progress indicators can be either “determinate” (specified finite wait time) and “indeterminate” (unspecified wait time) and illustrated using either (1) linear loaders and (2) circular loaders (both with unique design patterns).

4) Success and error

This form of feedback tells the user if their input was valid (successful) or invalid (unsuccessful). In the credit card input example, the field would return a success state if the card number was valid and an error state if the number was invalid. 

The modal below is an example of a bad error state because it’s unclear what caused the error and doesn’t tell the user how to fix it. 

All error states should come with a clear error message explaining the error and giving the user instructions on how to fix the mistake. In general, these error messages should be “in-line” (in context, underneath the component) rather than “global” (i.e., list of errors in a banner).  

Real world example: elevators

In the real world, the principle of feedback is everywhere; it helps us make better decisions and avoid frustration and uncertainty. 

Let’s consider the experience of using an elevator. When you press the “up” or “down” button, you’re telling the system your goal and expect the button to light up (acknowledgment of input).

When you look at the LED panel, you expect to see the current floor the elevator is on (progress indicator). The panel would also indicate an appropriate “out of service” status message when the elevator is broken. 

We often take “feedback” for granted, so let’s consider the experience without these affordances. Imagine an elevator with one button and no LED panel. You’d press a button (which doesn’t light up) and hope an elevator might come (within an undetermined amount of time).

In this experience, we wouldn’t know if the elevator registered our button press (since it didn’t light up), we wouldn’t know how long to wait (since there’s no panel), if the elevator is working (since there’s no status indicator), and whether or not it’d be better to take the stairs (what floor it’s on & if it’s in service or not). 

Closing thoughts

Most of us interact with systems on autopilot and don’t notice these subtle feedback cues that help us with decision-making and instill confidence in our actions. Next time you design something, make sure you’ve created your experience with appropriate and immediate feedback in mind. 

Don’t forget to subscribe to get all the updates!

Subscribe now

These emails might end up in your spam or promotions tab. To fix this, drag the emails back to the inbox or add ambitiousdesigner@substack.com to your contact list or send a reply. 

If you found this useful, please consider sharing it with a friend or on social media. It’ll motivate me to write more and keep this going!

Share

Did you know every second Walmart shaves off their e-commerce website improves its conversion by two percent (860 million out of 43 billion dollars per year)? 

Studies show that a mere 0.5-second delay results in a 26 percent in user frustration and an 8 percent drop in engagement. Let's face it; slow sites impact purchase intent and user trust. 

The lucky few have the luxury of lightning-fast 4G LTE connections, but most of the world still relies on 3G (<15 Mbps) network speeds. We need to start designing for realistic internet speeds. Welcome to the world of performance design.  

Measurable vs. perceived performance

There are two methods to address performance: (1) reducing the measurable (actual) wait times vs. (2) creating the illusion of shorter wait times. 

We can learn a lot about the power of perceived performance from a story about an old New York building where tenants complained about "excessive" elevator wait times. The building manager could not develop a feasible solution to reduce the wait times (measurable performance). 

After some deliberation, one of his staff came up with the ingenious solution of installing mirrors to alleviate the boredom of waiting. Despite no improvements to measurable performance, all the complaints disappeared! 

The Houston airport had a similar problem due to complaints about excessive wait times at baggage claims. Despite hiring more staff to increase the measurable performance, the complaints existed. Similar to the elevator scenario, people were upset at unoccupied time and boredom rather than true performance. 

Their ingenious solution was to move the arrival gates farther from the baggage claim, so people had to walk longer, eliminating all the unoccupied time and the complaints. 

These stories aren't meant to discount the importance of measurable performance but instead call out that sometimes the root problem is behavioral. 

When evaluating which performance to improve, consider the context of the use case. Sometimes the perceived performance is more important than the actual "under the hood" performance measured in milliseconds. 

Improving perceived performance

Skeleton screens

When loading a new page instead of using spinners, opt for skeleton screens instead. Users will expect a 1:1 mapping between the skeleton screen and the content once it’s loaded. This is known as the principle of natural mapping. 

The skeleton content (rendered as blocks) should be replaced with actual content (images, text, etc.) as the page loads. The skeleton content should be in the same position and have similar dimensions as the actual content once it's loaded. 

When there's a mismatch between the skeleton and real content, the page will "jerk" as it scrambles to rearrange itself. This creates the impression that the page is not well built and reduces user trust.

Instant page transitions like this reduce the perception of waiting through movement. The best skeleton states implement a low left-to-right “shimmer” animation across the placeholder blocks to reinforce this principle. 

To learn more about skeleton screens, I recommend reading Bill Chung’s guide (which includes interesting research findings & user tests). 

An interesting finding from an old AB test I ran: when mobile users encounter "native" loaders (standard loaders in their OS), they tend to blame their device instead of the app or website. 

Smooth animations

Poor animation in an interface also hurts perceived performance. Animations that are not well designed, too complex, and don't move as expected impose higher mental interaction costs (MIC) on the user. 

Animations should be smooth and rendered at 60 fps, which is required to eliminate the perception of stuttering. This is even more critical in animations that respond to a user's action; even a slight lag between touch and response makes the experience feel "sluggish." When applicable, use momentum-based scrolling (smooth scrolling mimicking real finger motions) instead of fake scrolling (unnatural scrolling with abrupt stops). 

Protip: To achieve 60fps animations, leverage CSS transformations accelerated using a hardware graphics processor such as position (translate), scale, rotation, etc. For newbies, I wrote an intro to UI motion design here. For more technical designers (who can code), look into building progressive web apps (which cache parts of the interface) with app shell models and service workers. 

Benevolent deception and the illusion of labor 

There are some unique scenarios where you want to insert an artificial progress bar or loader to instill confidence in the user's actions. This practice is known as "benevolent deception," where products insert a fake loader for the user's benefit.  

Humans tend to have a natural heuristic where fast = simple or cheap, and good things are worth the wait. 

For example, TurboTax creates a static fake loader animation after the user submits their tax information to "double-check their return for every possible tax break..." The fake loader helps build users' confidence in the product they just entrusted with their financial information.

Other times, this technique builds excitement and instills a feeling of accomplishment. In the mobile version of the Ticket to Ride board game, the final scores are tallied one at a time, with the user's scores tallied last. 

A quick reveal of the final scores would kill the experience. Instead, you get a stirring, climactic end to a game you've invested a good deal of your time playing. Consider that dopamine is released in anticipation of the reward (rather than when the reward is given). Dopamine is not about pleasure; it's about the anticipation of pleasure.

The "fake" loader or excessive animation is a common design practice known as "labor illusion." Studies show that users trust and value important results (e.g., tax returns) more after waiting for them (even if the results can be computed instantly). 

Pacing tricks

There are several interesting techniques to improve the perception of loaders. For progress bars, implementing "gradient ribbings" that move backward (while the bar progresses forwards) reduces our perception of wait time. 

Another trick for reducing perceived wait times for determinate linear loaders is to accelerate progress near the end. Ever get frustrated when a progress bar is 99 percent, but the last 1 percent takes forever to complete? 

Users tend to be more forgiving of pauses and extended wait times at the start of a progress bar. In contrast, when there are pauses near the end of progress bars, it becomes more evident and frustrates users focusing on it. 

For indeterminate circle loaders, increasing the number of pulsations or revolutions also reduces the perception of wait times. When a progress bar pulsates, it acts like a metronome counting the "tempo" of the progress time.

Conclusion

In conclusion, while designing fast loading experiences and reducing waiting times is a good practice, it's essential to consider when it makes sense to improve perceived performance (i.e., skeleton screens, smooth animations, and pacing tricks) over measured performance. 

In some scenarios, the root problem isn't the actual loading time but rather the user's waiting behavior. Other times, the product experience might benefit from the "labor illusion" and benevolent deception. It's up to us, as designers, to consider the situation and do what's best for our users.  

Don’t forget to subscribe to get all the updates!

Subscribe now

These emails might end up in your spam or promotions tab. To fix this, drag the emails back to the inbox or add ambitiousdesigner@substack.com to your contact list or send a reply. 

If you found this useful, please consider sharing it with a friend or on social media. It’ll motivate me to write more and keep this going!

Share

When I first learned about design, the difference between RGB, CMYK, HSB, HSL confused the heck out of me. Color models can be confusing and overwhelming for new designers. After experimenting, I believe HSB is the best model for designers to work with. 

The HSB (hue, saturation, brightness) color model (pictured above) looks intimidating. However, HSB the most intuitive and valuable color model for product designers. 

Design programs have options for the designer to switch between color models. The same color is expressed in different ways based on the color model. For example, red is “FF0000” in hex code, “255, 0, 0” in RGB, and “360, 100, 100” in HSB. This all looks nonsense to the untrained eye, but you’ll find HSB easy to understand once we break it down into individual components. 

Hue

When we think “color,” we’re really thinking of “hue.” Hue is measured in degrees between 0º and 360º (since this color wheel “circle” has 360º and the hue is somewhere on the circle). The basic colors are arranged along with the color wheel in 30º increments.

I use RGB (and CMY) as anchor points to help me remember how many degrees each basic color is. For RGB: red is 0º (or 360º) and equidistant from red is green at 120º, and blue is 240º. 

For example, if I needed Orange, I’d know it’s between 0º (red) and 60º (yellow); therefore, it has to be 30º. Understanding how the color wheel degrees are arranged lets you estimate what a color looks like based on its HSB. 

In design software, hues are represented with the hue slider. See how it starts and ends at red? The hue slider is just the color wheel flattened into a strip. 

Practical Usage of Hue in UI Design

Changing the hue allows you to generate variations of that color. In UI design, a “boring” color palette is often associated with hues (at 100 brightness and saturation) that are exact matches with the color wheel anchor points (primary, secondary, and tertiary colors). For more visual interest (without changing saturation and brightness), increasing or decreasing the hue by 5 to 25º makes the color feel more interesting and unique. 

Saturation

Saturation refers to the “richness” of a color. Saturation is measured as a number between 0 and 100. A saturation of 100 creates the richest possible color for that hue; 0 creates the gray version of that color.

In the color picker UI, saturation corresponds to the x-position of the loupe (technical term for the little knob). Higher  saturation = move right (increase x-position); lower saturation = move left (decrease x-position). As you can see, changing just the x-position of the loupe changes the saturation number in the HSB box. 

Practical Usage of Saturation in UI Design

Saturation is to balance contrast in UI designs. For accessibility reasons, we always want our text to have a strong contrast ratio with its background. According to WCAG, designers should strive towards a 4.5:1 context ratio whenever possible. 

However, this doesn’t mean we want strong contrast and bold colors across the entire UI. If we make everything bold, everything becomes high contrast, and the user won’t know where to focus their attention. When using many colors in a UI, adjust the saturation to prevent overpowering more important elements in your visual hierarchy. 

Brightness

Brightness refers to the “brightness” of a color (duh). Brightness is also measured as a number or percentage between 0-100. 

In the color picker UI, brightness corresponds to the y-position of the loupe. Higher  brightness = move up (increase y-position); lower brightness = move left (decrease y-position). As you can see, changing just the y-position of the loupe changes the brightness. 

Black and White Exceptions

To recap, HSB stands for hue, saturation, and brightness, represented as (0-360º, 0-100, 0-100). Two less obvious rules for HSB is: 

• Black in HSB = (any number, any number, 0), meaning brightness = 0 creates black regardless of the hue and saturation 

• White in HSB = (any number, 0, 110), meaningful brightness = 100 and saturation = 0 creates white regardless of the hue 

These exceptions are easy to understand once you look at the saturation-brightness matrix in the color picker UI. As we move the brightness number down to 0, it creates black regardless of the hue and saturation (x-position). On the other hand, as we move the saturation number left to 0 and the brightness up to 100 (to the top left corner), it creates white. 

Generating Monochromatic Palettes

In classic color theory, a “tint” is a mixture of a color with white to create “lighter” versions of that color; a “shade” is a mixture of a color with “black” to create  “darker” versions of that color. We often need to generate a monochromatic palette when designing interfaces (similar to the Material palette below). 

Since black and white are not opposites in HSB, we can’t simply add white & black to a color. New designers make the mistake of adding white and black boxes on top of the colors to create tints and shades for their monochromatic palette. This works fine for tints but produces dull shades. To create rich and vibrant shades of a color, instead of “adding black,” you should “remove white” by increasing saturation and decreasing brightness. 

Luckily, Material design has a color tool to automatically calculate the correct tint and shade for each color (select “custom” instead of “material palette”).

Practical Tweaking Tips for HSB

Here’s a quick reference guide for how to tweak a color’s HSB based on common (non-design) feedback I hear: 

• “Make it pop” = colors are not bold enough, or do not contrast enough with their surroundings, increase brightness and saturation, choose contrasting colors that aren’t together on the color wheel

• “Feels dull” = increase saturation

• “Make it feel more professional” = decrease saturation (consider choosing another color) 

• “Make it more fun” = increase saturation and brightness (consider choosing another color)

• “It’s too hectic or distracting” = tweak saturation values to create a more balanced color palette

• Learn more about how to use color in Toptal’s UI color guide

This Week’s Event

RSVP for this week’s group mentoring session: a two-hour critique and redesign of a newsletter’s home page.

RSVP

Don’t forget to subscribe to get all the updates!

Subscribe now

These emails might end up in your spam or promotions tab. To fix this, drag the emails back to the inbox or add ambitiousdesigner@substack.com to your contact list or send a reply. 

If you found this useful, please consider sharing it with a friend or on social media. It’ll motivate me to write more and keep this going!

Share

The average American has 80 apps installed and checks their phone every 12 minutes. On average, people tend to only use 9 specific apps daily. These apps are “sticky” and are rooted in their habits. The remaining 62 percent of apps are rarely used because they aren’t “sticky” enough. 

Stickiness refers to the natural retention mechanisms built into your product—the “how” and “why” your users will stick around. Sticky products lead to more user sessions and longer session durations resulting in strong long-term user retention and engagement. The “Hook Model” is a helpful way to think about stickiness in your product.

Hook Model

The Hook Model leverages proven behavioral psychology principles to build “habit-forming products.” 

Habitual products have strong long-term retention rates (which, as we know, is a massive indicator of product-market fit). The hook model is a repeated four-step process consisting of (1) trigger, (2) action, (3) variable reward, and (4) investment. 

Trigger

The trigger starts the habit and propels the user towards action in your product (thus beginning a new session). Triggers are calls to action that can be classified as “external” and “internal.”

External triggers include push notifications, app icon badges, emails, user-generated content on a feed, etc. Internal triggers are more ethereal and feel like an “urge” to use your product. Users associate external triggers with internal emotions. For example, when you see a friend’s photo in a feed (external trigger), it activates an intrinsic desire for social connection (internal trigger), which prompts you to use your favorite social media. 

Action

Triggers have a chance of compelling a user to initiate an action. However, whether or not the trigger succeeds is dependent on the user’s motivation and ability. B.J Fogg’s “Behavior Model” describes this as B=MAP: behavior = motivation*ability*prompt. This means for a prompt (trigger) to induce an action, there must be sufficient levels of motivation and ability. 

For example, let’s say you got a push notification for Instagram (trigger) that read “[your friend] posted a new photo.” You simply tap on the notification to view the photo immediately, which is an effortless action (high ability or “easy to do”). So even if your motivation was lukewarm, you still completed the action. Now imagine Instagram signed you out of your account for some reason, and you didn’t remember your password. Suddenly it’s much harder to complete the action (low ability or “hard to do). You probably give up on your task. Now imagine instead of your friend posting a photo, the notification read, “[your crush] sent you a direct message.” You’d probably do everything you could to log in and see the message as soon as possible. In this scenario, the ability didn’t change, but your motivation increased, which allowed the trigger to succeed. 

Variable Reward

To understand variable rewards, we need to go back to B.F Skinner’s theory of “Operant Conditioning.” The theory states: actions that are reinforced (positive or negative) are repeated more often, thus leading to habits. He “proved” this using the famous operant conditioning chamber experiment. This is the classic “carrot and stick” motivation. If you want people to do something, reward them; if you want them to stop doing something, punish them. 

We now know “carrot and stick methods” are extrinsic motivators, and only suitable for compliance. True engagement comes from intrinsic motivation, which comes from a combination of (1) autonomy, (2) competence, and (3) relatedness, according to “Self Determination Theory.” 

For a product with poor retention, using extrinsic motivators to build a habit-forming product makes sense. Fostering intrinsic motivation can come after the users are retained. The important insight from Skinner’s research is “variable rewards” being the most potent reinforcement method. The anticipation of an unpredictable reward is what unleashes the surge of dopamine we all crave. 

“Variable rewards are the most powerful tools companies implement to hook users.”

Similar to how slot machines are addictive because every pull has a chance to win the jackpot, every (well designed) notification has a chance of showing the user something exciting.  Instagram becoming one of the most widely used products in the world is no coincidence. There are tons of variable rewards built into their core experience (examples to follow).

Classification of rewards

Rewards have motivated us for 200,000 years, but their fundamental classification hasn’t changed much. Nearly everything we do is driven by either: (1) rewards of the tribe, (2) rewards of the hunt, and (3) rewards of the self. 

Rewards of the tribe are our desire to be accepted, important, attractive, and included within our social environment. For example, when you post a photo on Instagram, the reward is getting likes and comments. This reward grants us a feeling of connectedness and makes us feel accepted, important, or attractive. Have you ever wanted to “check Facebook” to see how many likes you’ve gotten on your recent photo? This is your internal trigger for the variable reward (number of likes). 

Rewards of the hunt is our desire to acquire things. In the past, humans were motivated to acquire food, but we’re driven by our desire to acquire wealth and information in modern times. For example, when you scroll through your Instagram home feed, there’s the variable reward of finding a piece of valuable information or discovering a relevant product or service. 

Shopping and commerce startups have also leveraged this by adding variable rewards to deal hunting. Take Wish’s “daily spin reward” as an example. 

Rewards of the self is our personal desire for gratification and achievement. Humans enjoy the feeling of progress and mastery. This is why we feel great after a workout or accomplishing a task (also explains the massive 45.8 billion productivity market). For example, Instagram’s core experience is relatively minimal, but there’s a lot of less obvious features and tricks for the experienced users. Mastery over these advanced tricks may (variable) lead to better social vanity metrics (reward).

Email as an example

Over 3.8 billion of half the global population uses email often. Do you know someone who checks email obsessively? They may be forgiven because email is addictive due to all three variable rewards built into its core experience.  

Our social obligation to answer emails and connect with our friends & family is related to the rewards of the tribe. The chance an email may provide critical information about new opportunities is connected to the rewards of the hunt. Lastly, the productive feeling of clearing our inbox is related to rewards of the self. These reward factors combined with the Hook Model give designers the tools to create a habitual product that retains its users. 

Investment

As users continue to use your product (invest), their experience should be continuously improved. User investment includes actions that cost time, data, effort, social capital, and even money. In exchange, your user’s investments should make the next trigger more engaging, the action easier, and the reward more exciting. The investment phase increases the odds that the user will make another pass through the hook cycle in the future. 

In other words, your user’s “switching costs (or switching barriers)” should become higher and higher. Switching costs are the costs a customer incurs due to changing brands, suppliers, or products. Cost doesn’t necessarily mean money but can also take the form of effort or time-based costs. Many experts say, “your product needs to be 10x better than your competitors”, due to the switching costs advantages existing players in the market have. 

For example, following more people on Instagram makes your news feed better. Having more followers increases the variable reward in the number of likes you get in your posts. If a new Instagram clone that was a little better launched, you’d likely be hesitant because of the “work” (switching costs) required to get the same number of followers & quality of your home feed.

Conclusion

In conclusion, the Hook Model is a helpful framework for designers to create more engaging product experiences that result in strong long-term retention. The core product experience should be designed with all four steps in mind. Ideally, there should be intrinsic variable rewards and an investment mechanism to improve users' experience as they complete more loops through the model.

Video recording from last week’s session, join the Facebook group for early access to group mentoring and recordings.

Don’t forget to subscribe to get all the updates!

Subscribe now

These emails might end up in your spam or promotions tab. To fix this, drag the emails back to the inbox or add ambitiousdesigner@substack.com to your contact list or send a reply. 

If you found this useful, please consider sharing it with a friend or on social media. It’ll motivate me to write more and keep this going!

Share

Have you ever installed a new app on your phone, only to play around with it for a few minutes and then immediately uninstall? The app probably didn't provide you with enough immediate value. After your initial excitement and motivation dissipated, you lost interest and quit. 

This is where "time to value (TTV)" comes in. TTV is the amount of time it takes a new user to get (perceived) value from your product. 

After defining your target market, understanding your customers, establishing your core value proposition, and ensuring you have a good hook, your next priority is to reduce your product's TTV to be as short as possible. 

Think about how short a typical user's attention span is. Microsoft conducted a study in 2000 showing that the average attention was 12 seconds. In 2015 it dropped to 8 seconds. It's probably even lower now. 

That's why a short TTV is critical in reducing new user churn (and thus, retention). Just look at the abysmal churn rates for mobile apps—day one churn is 25.4 percent, increasing to about 50 percent at the 30-day mark.

Your window of opportunity to retain new users is shorter than you think. Every additional second your users waste makes them much more likely to churn. So don't add unnecessary non-value adding things during the new user experience (NUX). 

As designers, one of the most critical metrics to keep in mind is TTV. By designing for a reduced TTV, you're in the unique position to make a tremendous impact by improving user retention—something all businesses struggle with.

Progressive disclosure

So how do you reduce the TTV in your product? The answer: "progressive disclosure". Progressive disclosure is the practice of deferring (or hiding) tasks and information only as they become relevant and necessary. This interaction design pattern is often used in new user experiences and onboarding. It's much better to provide users with value (as much of it upfront and related to your core value proposition as possible).

For example, if you download a new app and immediately force you to create an account before you get to explore the product—you'd be dissatisfied. It'd be much better to let you play around a little before asking you to complete a task. 

As a user, once you get value from the product, it refreshes your motivation and makes it much more likely to complete another task. Whereas if you force the user to complete many tasks in succession without any reward, they're likely to just leave. 

Progressive disclosure is also used to make tasks seem less overwhelming. A standard implementation of this is breaking up a long onboarding process or form from one screen with 10+ fields to several more digestible steps. This principle works based on Hick's Law, where the decision-making time (related to TTV) is shorter based on the number of choices or inputs the user has to make. 

Time to Value (TTV) Example

Let's take Duolingo as an example. In their web version, they used to have a fantastic NUX with short and sweet TTV. Within three clicks, new users get to experience their core language learning value proposition. 

Every step is finely tuned to either make the experience better (logging in, choosing a relevant language) or is related to their value proposition ("what sound does this make?"). 

Now, look at their new experience, which has added five unnecessary screens to their NUX. Screen 3 gathers growth channel data which provides no value to their user. Screens 4, 5, and 6 do not provide immediate value and aren't critical for a new user's experience.

Based on progressive disclosure, they should be moved out of the NUX and into a latter part of the experience. 

Avoid front-loading all the work (sign up, notifications, setting preferences). Let users experience value first and sprinkle in optional (but relevant tasks) later. Duolingo could've asked new users to do all this extra work completing their first lesson instead. 

Useronboard.com did a great analysis of their previous NUX, which I recommend reading.

Retention threshold

In essence, reducing TTV aims to empower users to get what they came for as soon as possible. This leaves the best first impression and increases their likelihood of becoming long-term users. 

Think about all those products that force you to create an account, only for you to use it once and forget about it. Don't be one of those products. It's a cheap trick and leaves a bad taste. 

The "retention threshold" (sometimes called “tipping point metric”) is the point in a user's journey where they're no longer at risk of churning. It's often correlated with the "aha moment," where your users experience actual value from your product for the first time. 

Retention thresholds are different for all products. It could be a specific set of conditions a user needs to fulfill or a repeated habit they've adopted with your product. 

Facebook's "0-1 billion users" growth strategy focused on unlocking the conditions for new users to experience their value proposition as soon as possible (reduced TTV). 

Their initial retention threshold was for new users to "add seven friends within the first ten days." The rationale was that it's hard for new users to get value from Facebook without having enough connections for meaningful interactions. 

On the other hand, Pinterest's growth strategy focused on getting their new users to build a consistent habit with their product. Their retention threshold was for new users to save at least one pin per week. 

Both Facebook and Pinterest are now wildly successful because they focused their efforts on enabling as many users as possible to reach and sustain the retention threshold they identified. 

Conclusion

Many thought leaders in the startup space believe that product-market fit is the number one indicator of product-market fit. Marc Andreessen even famously wrote about how product-market fit is the only thing that matters. 

So what? Well turns out user retention (flattened retention curves in particular) is one of the best indicators of product-market fit. So as a designer, if you can improve retention by reducing TTV...then you're golden. 

This is one of the best ways to demonstrate high business value for new products and startups to become an impactful designer. 

Don’t forget to subscribe to get all the updates!

Subscribe now

These emails might end up in your spam or promotions tab. To fix this, drag the emails back to the inbox or add ambitiousdesigner@substack.com to your contact list or send a reply. 

If you found this useful, please consider sharing it with a friend or on social media. It’ll motivate me to write more and keep this going!

Share

Every good product needs a good “hook.” Your hook explains the value your product provides. Contrary to popular belief, your hook doesn’t necessarily need to explain what the product is (that’s what the subtitle is for). Focus on how your product benefits the user, rather than the product itself. People don’t buy products, they buy what the product can do for them. For example, Apple’s headline for the iPod was “1,000 songs in your pocket”, instead of “The world’s first portable digital media player”. 

Without a solid understanding of who your audience is, what the exact problem they have, you can’t really explain the value your product provides.

Validate Your Product’s Hook First

Before committing to a product concept, many startups will test their concepts with prospective customers first. Sometimes it’s through an interview or survey, where they do an elevator pitch of their vision. Other times it’ll be through various types of landing pages; typically in the form of a “coming soon” page or “fake doors MVP.” Nearly every product will eventually need a landing page, and the headline has the largest impact on conversion rate.  Lucky for you, if you’ve written a great hook that works, you can use it as your landing page’s headline. If users resonate with one of your hooks, then you may have an early indication of product market fit. Conversely, if none of your hooks seem to land, then this is a strong indicator that you need to rethink your product concept. This could mean rethinking your market, your audience, the problem you're trying to solve, or how you solve it. Although you might be able to hire a really great content writer that can “sell sand in the desert”, you’d still be starting on the wrong foot. Product concepts without good hooks usually require more paid growth channels to scale, due to poor word of mouth and organic growth.

Writing Good Hooks 

There are many ways to craft a compelling hook. Here are my three favorite approaches: (1) focus on what makes you unique, (2) counter objections, and (3) own your niche. 

Before we dive in, here are some general best practices for content writing on landing pages. 

Focus on What Makes You Unique

Make your product the focal point, when it’s unique amongst its competitors. For example, Fast is a digital checkout product with the unique CVP of “fastest checkout.” Their competitors typically focus on other value propositions like security and integrations. Therefore Fast leaned into their “speed” value proposition with: “One click. No passwords. The world’s fastest checkout.”

Counter Objections

Address your customer’s most critical objection in your headline. This is the best approach, if your product (or, more commonly, your service) isn’t necessarily unique. An objection to the voice in your customers head giving them every reason why they shouldn’t take action. BJ Fogg’s “ability chain” from his “behavioral model” framework outlines the typical types of objections people have. 

The ability chain consists of five parts: time, money, physical effort, mental effort, and routine. These factors commonly map to the most common objections preventing customers from converting.

To understand your customer’s objections, you need to have a solid library of generative research and a clear understanding of who they are, what their problems are, and how it manifests in their lives. Be customer obsessed. 

For example, Everydae is an SAT prep course that isn’t necessarily unique amongst its competitors. However, they’ve achieved success with a compelling hook that addresses their customers’ key objection: time. Their value is “unlock scholarship money for college,” and the objection is “I’m too busy to finish an online course.” Their combined value + hook headline is “Unlock scholarship money for college in 10 minutes a day.”

Own Your Niche

Own your niche with conviction if you’re confident in your product and the value it provides. Present yourself as the best or only solution for a problem you know customers would love a painkiller for. 

Here’s a list of great examples of products I don’t even need to explain, because their headline is so specific and clear: Basecamp “The all-in-one toolkit, for working remotely,” Privy “how small brands sell online,” Descript “It’s how you make a podcast,” and Sparkloop: “The referral tool for newsletters.” 

Let’s look at the specific phrasing of each of these headlines that project absolute confidence: “how,” “the all-in-one toolkit,” “it’s how,” and “the.” These simple words may seem inconsequential, but when executed well in a headline, it makes your product or service appear as the definitive solution to the customer’s problem. 

Conclusion

After you’ve defined your target market, audience, their problem, and created your core value propositions (how your product solves the problem and provides value), writing a hook should be easy. You may not be able to come up with the best possible hook, but as long as you’re in the right direction it should resonate with your prospective customers. You can always continuously AB test your headlines down the road to make incremental improvements to your website’s bounce rate. However, this is not the focus at this stage. 

A good hook will draw people in and convert them into customers. A bad hook will fall flat, and make it hard to grow your user base. Good hooks are relevant and specific to your target audience. 

If your hooks test poorly (low conversion on your landing pages or poor reception from user interviews & surveys), it's likely that you need to rethink your product concept. A product concept that can’t generate a strong hook means the value proposition isn’t clear, and will typically have weak organic growth. If your early customers can’t explain your product, then word of mouth will be low, and you’ll have to rely on expensive paid growth channels like ads.

Don’t forget to subscribe to get all the updates!

Subscribe now

These emails might end up in your spam or promotions tab. To fix this, drag the emails back to the inbox or add ambitiousdesigner@substack.com to your contact list or send a reply. 

If you found this useful, please consider sharing it with a friend or on social media. It’ll motivate me to write more and keep this going!

Share

In general, creating an “exceptional brand” is not crucial to a new product's success; going beyond a “good enough” brand should not be an immediate priority. You can achieve 80 percent of the results with 20 percent of the effort.

A “good enough” brand will still allow you to achieve most of the results for click through rates, content sharing, virality, etc. Here’s my personal process and insights on how to achieve this.

What is Branding

Branding involves taking 10,000 abstract thoughts and distilling them into something more concrete and workable. According to Seth Godin, a brand is the set of expectations, memories, stories and relationships that, taken together, account for a consumer's decision to choose one product or service over another. Aside from the commercial impact of branding, it can also create a common language to make subsequent internal  decisions about visuals, voice, and identity a lot easier.

When to Start Branding

New product teams often get distracted by focusing on the brand first, viewing it as the required first step. Branding first is a mistake, as the most critical step is to define the audience and the problem first. In other words, come up with a product-market fit hypothesis before all else. During this process, your product concept will change and evolve. If you were to brand first, you'd end up with a mismatched product-to-brand experience. 

Once your team has sufficient conviction about a particular direction, only then should you start the branding process. In general, you should only begin branding when naming your company, designing a logo, hiring an agency, or writing a manifesto.

Google Ventures Design Sprint

The best branding framework I've stumbled upon is Google Venture's three-hour brand sprint. In general, you need two to six participants for the brand sprint. At the minimum, you need the CEO (the decider), and optionally one or two facilitators (marketing or design), and a customer expert.

The brand sprint consists of six exercises across three parts. The first part consists of two exercises to articulate the company's motivation: 1) a 20-year roadmap (think long term), and 2) what, how, and why (why the company exists). The second part goes into the details: 3) top three values (makes your why more specific), and 4) top three audiences (focus on the target for the brand). The last part focuses on brand positioning: 5) personality sliders (defines the attitude and style of the brand), and 6) competitive landscape (compares brand to other companies). I won't go into details about running these individual exercises, as Jake Knapp has done a brilliant job explaining this here (use this template if you're doing this remotely). 

These exercises create six powerful diagrams which are a concrete representation of a company's brand. When facing big decisions about naming, identity, and marketing, these diagrams will be a helpful guide. 

Naming a Product or Business

A name is the face of your product. It needs to capture your essence, values, and what makes you different from the competition. Therefore, it's best to start this process after the GV brand sprint. 

Naming Process

The naming process requires a good understanding of brand vision; hence the need for the GV brand sprint. I usually start by decreasing my product in one simple sentence, and distilling it down into two words. I also think about the market my product is in, how people will learn about the product, what our “secret sauce” is that differentiates us from competition, and who our target audience is. With all these factors in mind, I create a list of words (1-5) reflective of the brand’s personality (e.g., responsible, confident, steadfast). You can find a starting point for your brand personality adjectives here.

Afterwards, I start brainstorming names using those words as reference. There are 10 naming categories for brands, and I try to create at least a couple candidates for each (don’t forget to use a thesaurus). These categories include:

• Naming that challenge the ordinary (e.g., Yahoo, Monster, Guess)

• Alliteration (e.g., Dunkin Donuts, PayPal)

• Made up words (e.g., Kodak, Google) 

• Clear descriptions or attributes (e.g., Holiday Inn, KitchenAid)

• Tributes to a specific inspiration for the brand (e.g., Hilton, Linamar) 

• Names that blend a mix of modern, technical, and functional words: (e.g., Xerox, Panasonic)

• Combination names (e.g., Fedex) 

• Acronyms (e.g., BMW, IBM, UPS) 

• Names that borrow from stories or cultural icons (e.g., Apple, Mustang, Monster, Virgin)

• Made up random words that might be appropriate over time (e.g., Old Navy)

Factors to Consider

Naming is subjective, and is more of an art than a science. However, there are two major traits that are common amongst successful brand names. They are: “familiarity” and “distinctiveness”.

Familiarly is more important when naming a product as part of a master brand; it’s about naming according to a convention your customers understand. For example, Apple's naming convention for mobile products starts with "i" (iPad, iPod, iPhone). Using a naming convention allows you to leverage your existing brand perception and sets an expectation for your customers' quality with the new products you release. 

Distinctiveness refers to how unique and memorable your product name  is in the minds of consumers. Think about the names of your competitors, and what common naming conventions arise. Can you think of a new convention so your product name stands out from the crowd?

Tactical Evaluation Checklist

If you want to be more methodical in how you evaluate your name candidates, here’s a helpful checklist to run through: 

• Is your first impression of the name strong?

• Is it memorable?

• Does it sound and look good?

• Is it easy to pronounce?

• Use it in multiple sentences. Does it feel right?

• Are quick associations positive? 

• Does it relate to the primary benefits of the product?

• Does it sound credible?

• Can it work internationally?

• Is it registerable and protectable?

• Does it make you nervous?

• Does it relate to your market positioning?

You don’t need to perfectly pass every criteria on this list, but it should help you pick out the strongest names from your list of candidates. If you want even more conviction, you can even test out your names using surveys & word association exercises. 

Influencing Value Perception

A product’s name has a huge impact on customer perception. The right name can influence customers to spend more money or use your product more often. 

For example, a study examining the effects of naming on wine perception indicated that exotic names make customers more willing to spend more money. Exotic sounding wines were given the highest quality ratings, had the "highest intent to buy" score, and most people said they would pay a higher price for it. 

“People don’t buy products because of the actual value of the products — they buy stuff because the price of the product closely matches their perceived value of the product.”

—Charlie Gilkey 

Another consideration is “trigger phrases” that influence a customer’s perception. For example, when cereal brands added the phrase “ancient grains” to their label, customers were willing to pay 50-300 percent more. This trigger phrase's success is due to the association between "ancient grains and simplicity & health.

Moodboards

The next step after coming up with a name is creating a moodboard. A moodboard is a collage of images, materials, text, and other design elements that embodies a cohesive brand direction. This often involves gathering inspiration across various media formats and from multiple sources. Note that you shouldn’t be constrained to just digital inspiration. You’ll find great references from architecture, print ads, industrial design, fashion, and art. 

After gathering inspiration, start grouping them into distinct moodboards; I think three moodboards with less than six references is ideal. I find it's much better to have fewer references that represent the quintessence of the concept rather than a large handful tangentially related references. Explorations for brand assets such as: names, logos, and brand elements are all built on the foundation of a moodboard. 

Some common places to look for inspiration include: Dribbble, Behance, Landingfolio, Land-book, Coolors.co, Colorhunt.co, Design Seeds, Typewolf, Instagram, and Pinterest. 

Conclusion

As mentioned at the start, my typical goal is to create a "good enough" brand that circumvents common and avoidable branding mistakes. Overall, this is the process I personally use, so you may want to adapt this based on the specifics of your work.