However, the evolution of interfaces, variable typography, dark modes, and the need for truly perceptual accessibility have revealed an important limitation:
meeting WCAG 2 does not always mean text is genuinely readable.

This is where APCA (Accessible Perceptual Contrast Algorithm) comes in, the new approach shaping the future of visual accessibility and forming part of the transition toward WCAG 3.

The problem with contrast in WCAG 2

The current WCAG 2 model:

• Uses a fixed mathematical ratio between colors.
• Does not account for font size or font weight.
• Treats light-on-dark the same as dark-on-light.
• Can approve combinations that are difficult to read in practice.

This creates a common scenario in many digital products:

Interfaces that are “accessible on paper,” but not necessarily comfortable for real people.

What changes with APCA

APCA introduces a fundamental shift:
moving from a mathematical measurement to a perceptual measurement.

Instead of ratios like 4.5:1, APCA uses a scale called Lc (Lightness Contrast) that:

• Is based on how the human eye actually perceives contrast.
• Considers font size, font weight, and polarity.
• Enables different rules depending on the text type.
• Aligns with the future direction of WCAG 3.

The result is simple but powerful:

APCA measures real readability, not just technical compliance.

Why this is critical for Design Systems

For teams building Design Systems, the impact is immediate:

1. It redefines color tokens

It is no longer enough to “pass 4.5:1.”
Colors must now ensure comfortable reading within real typographic contexts.

2. It improves real product accessibility

Adopting APCA means:

• Less hard-to-read text.
• Better experiences in dark mode.
• More inclusive interfaces for users with low vision.

3. It prepares organizations for WCAG 3

APCA is not a passing trend.
It is the foundation of the next accessibility model coming with WCAG 3.

Adopting it early reduces:

• Technical debt
• UI rework
• Future compliance risk

WCAG 2 vs APCA in one sentence

WCAG 2 measures contrast.
APCA measures readability.

And in user experience, that difference changes everything.

Conclusion

Digital accessibility is entering a new era. We are moving from static rule-checking toward designing experiences that can truly be read.

Adopting APCA today does not mean abandoning WCAG 2 immediately, it means:

• understanding its limitations
• improving the visual quality of products
• preparing for the standard that is coming

Because in accessibility, the real goal was never to pass a test.

The real goal has always been that people can read.

The post APCA vs WCAG: why the future of visual accessibility has already changed appeared first on Roger Romero's Blog.

What is a Design System?

A Design System is a set of guidelines, components, and visual patterns that enable design and development teams to work more efficiently and cohesively. By documenting these elements, a Design System ensures that every piece of a user interface remains consistent and true to the brand’s identity. This is especially important for large-scale projects or those where multiple teams collaborate within the same digital ecosystem.

Visual Identity as the Visual Foundation of a Design System

A brand’s visual identity is what we see and feel when interacting with its products. A Design System takes this visual identity and breaks it down into its essential elements: typography, color palette, iconography, buttons, forms, and more. These visual elements not only help maintain a unified aesthetic but are also fundamental in conveying the brand’s personality and values, seeking to differentiate the brand from its competitors and generate an emotional connection with the public.

For example, if a brand has a young and modern focus, the Design System will likely include dynamic typography and vibrant colors. Conversely, a brand that seeks to project trust and formality may lean towards more subdued color palettes and elegant fonts. Every visual decision is directly aligned with the principles of the brand’s visual identity.

Branding: The Soul of Consistency

If visual identity is what we see, branding is what we feel and experience when interacting with a brand. A Design System goes beyond organizing visual components; it is deeply tied to the user experience (UX). Branding helps define not only how a product looks, but how it feels and behaves.

A brand’s voice and tone, although not always explicitly visual, must also be aligned with the Design System. This can influence how messages are structured within the interface, from button labels to error notifications. An effective Design System translates branding values and tone into smooth and consistent interactions, reinforcing the brand’s promise at every touchpoint.

The Cohesion Between Visual Identity, Branding, and Design System

When a company designs its system, it ensures that its visual identity and branding are present and consistent across every aspect of the digital product. This cohesion is essential for building a strong brand that users recognize and trust.

When developing a Design System, design and development teams can ensure that:

• Every component, from buttons to forms, aligns with the brand’s official colors and typography.
• The brand’s narrative is reflected in the user experience. Whether the brand aims to project accessibility, luxury, or innovation, the Design System should provide the tools to communicate these values.
• Product iterations and updates remain faithful to the brand’s original identity, even as trends or technologies evolve.

Conclusion

A Design System is more than a component library; it is the tangible manifestation of a brand’s identity and branding in the digital space. By merging these two disciplines, design and development teams can build products that are not only visually consistent but also deeply aligned with the brand’s vision and values.

Investing in a solid Design System ensures that visual identity and branding remain consistent and recognizable across all platforms, enhancing the user experience and, in turn, strengthening the relationship between the brand and its audiences.

The post How Visual Identity and Branding Influence the Creation of a Design System appeared first on Roger Romero's Blog.

In this article, we’ll explore when and how to use these three elements within a design system and share the best and worst practices for using icons in each of them.

Badge

What is a Badge and When to Use It?

A badge is a small visual element that typically appears on or near a component, such as an icon or product card, to display relevant information like a count or status. Its main function is to highlight concise information that requires immediate attention without disrupting the interface’s flow.

When to use it:

• Notification or count alerts: Use badges to show the number of pending items or actions, such as unread messages, items in a shopping cart, or available updates.
• Status indicators: To signal a relevant state or category, such as the priority of a support ticket or product availability (e.g., “In stock” or “Out of stock”).

Examples:

• A bell icon with a badge showing the number of new notifications.
• A red badge with a number on an inbox icon indicating unread messages.

Best Practices for Icons in Badges:

• Clear visuals: Use simple and recognizable icons that immediately convey the action or status. For example, an envelope for unread emails or an alert symbol for warnings.
• Proper sizing: Ensure the icon is large enough to be visible in the badge’s small space, but not too large to overwhelm it.
• Effective contrast: Make sure the icon contrasts well with the badge’s background so that the information is legible.

Worst Practices:

• Overloading the space: Avoid combining text, icons, and numbers all at once in a small badge. Keep the design simple and focused.
• Ambiguous icons: Don’t use icons that require interpretation or that aren’t universally understood. A confusing icon will frustrate the user and defeat the badge’s purpose.

Ribbon

What is a Ribbon and When to Use It?

A ribbon is a banner or strip that overlays content, such as an image or product card, to highlight a special feature or promotion. Its goal is to catch the user’s attention on something important, like an offer or a new product.

When to use it:

• Highlight promotions or special attributes: Use ribbons when a product or content needs to be emphasized with labels like “On Sale,” “New,” “Exclusive,” or “Limited.”
• For featured products: Emphasize the most popular products, temporary promotions, or new releases.

Examples:

• A ribbon that says “New” on the corner of a product card.
• A banner highlighting a discount offer over a product image in an online store.

Best Practices for Icons in Ribbons:

• Complement the text: Icons in ribbons should reinforce the message. For example, a star icon could accompany a ribbon that highlights a “Featured Product.”
• Simplicity: Since the ribbon already draws attention, the icon should be subtle and not steal focus from the primary content.
• Visual consistency: Ensure the icon’s style matches the rest of the design system to maintain visual coherence.

Worst Practices:

• Redundant icons: Don’t add icons that merely repeat what the text already conveys. If the ribbon says “New,” adding an icon might be unnecessary.
• Overloading with icons: Avoid using large or detailed icons that can make the ribbon look cluttered or unclear.

Notifications

What is a Notification and When to Use It?

A notification is a pop-up or persistent message in the interface that informs the user about important events or required actions. Notifications can be interactive (allowing the user to close or respond) or passive (informative, with no action required).

When to use it:

• To inform about important changes: Notifications are useful when you need to alert the user about system changes, such as a new update, message, or completed event.
• To request user actions: Use notifications when the system requires the user to take a specific action, like confirming a purchase, reviewing a message, or accepting a condition.

Examples:

• A banner at the top notifying the user of a successful update.
• A pop-up notification reminding the user of a pending task.

Best Practices for Icons in Notifications:

• Clear, informative icons: Use icons that help users quickly identify the type of notification. A checkmark icon can indicate success, an exclamation mark a warning, and an “X” an error.
• Visual hierarchy: Icons shouldn’t compete with the main content of the notification. Keep the icon size proportional and aligned with the content.
• Appropriate colors: Ensure the icon’s color matches the notification’s context. Green icons should indicate success, yellow should indicate warnings, and red should indicate errors or issues.

Worst Practices:

• Overloading with icons: Don’t add unnecessary or decorative icons to a notification that already contains sufficient informative text. This can overwhelm the user visually.
• Inconsistent icon colors: Avoid using incorrect icon colors that don’t align with the notification type. A red icon for a success message can confuse users.

Conclusion: When and How to Use These Elements

• Badges are ideal for displaying concise, direct information, such as counts or statuses. Use them when you need to highlight numbers or updates without interrupting the user experience.
• Ribbons are effective for drawing attention to featured products or characteristics. They are visually appealing and should be used sparingly to avoid cluttering the interface.
• Notifications should be used when the user needs to be informed or alerted about important events. Make sure they are clear and non-intrusive, respecting the user experience.

In all cases, the effective use of icons is crucial. Icons should complement rather than overload, and always be accessible and understandable. By following these practices, you can ensure that these components function effectively within a design system, providing an intuitive and pleasant user experience.

If you’re developing a UI design system, remember that balancing functionality and aesthetics is essential. Well-implemented badges, ribbons, and notifications, along with the appropriate use of icons, can make an interface not only visually appealing but also highly functional and accessible.

The post How to use badges, ribbons and notifications in user interface designs appeared first on Roger Romero's Blog.

Common breakpoints and configurations

In this article, I’ll recommend the best breakpoints for your website, considering three main categories: mobile devices, tablets, and desktops. Below is a reference table with the minimum and maximum width values for each range, along with the recommended margins and gutters for optimal design:

These values not only ensure a well-structured design but also help maintain visual consistency across a variety of devices, optimizing the user experience.

Breakpoints for Mobile Devices: Extra Small (xs) and Small (sm)

Mobile devices account for the majority of global web traffic, so it is crucial to prioritize responsive design for small screens. The xs and sm breakpoints are essential to ensure that your site is accessible and user-friendly on mobile devices.

• Extra Small (xs): 360px – 575px
  This breakpoint covers smaller mobile devices, such as lower-end phones or those with compact screens. It’s important to optimize interactive elements like buttons and menus to make them easily accessible and readable on small screens.
• Small (sm): 576px – 767px
  This range includes most modern smartphones with larger screens. At this point, you can start working on slightly wider designs and display more content without compromising readability or usability.

What to adjust on mobile?

• Font size and buttons: Ensure that buttons are large enough to be tapped with a finger and text is legible without the need for zooming.
• Image optimization: Use lower-resolution images to reduce load times and improve user experience.
• Vertical layout: Most mobile devices are used in portrait mode, so it’s important that your design works well in this orientation.

Breakpoint for Tablets: Medium (md)

Tablets require an intermediate approach, as their screens are larger than phones but smaller than desktops. The md breakpoint is ideal for these types of devices.

• Medium (md): 768px – 1024px
  This range covers most tablets, such as the iPad in portrait mode. It’s a key point to adjust the design and offer a user experience that takes advantage of the larger screen without complicating navigation.

What to adjust on tablets?

• Increase screen space usage: Take advantage of the larger screen to display more content without overloading the interface.
• Usability in landscape mode: Ensure that the site works well in both vertical and horizontal orientations, as users may rotate the device to view content more comfortably.

Breakpoints for Desktops: Large (lg) and Extra Large (xl)

The lg and xl breakpoints are used for larger screens, such as laptops and desktop monitors. Here’s where you can maximize the use of available screen space.

• Large (lg): 1025px – 1365px
  This breakpoint is suitable for most laptops. It allows for expanding the design and displaying more content on the screen without the need for excessive scrolling.
• Extra Large (xl): 1366px – 1440px
  This range covers large desktop screens, such as high-resolution monitors. At this point, it’s important to optimize the layout to take full advantage of the screen space without cluttering the interface.

What to adjust on desktop?

• Column layout: On larger screens, you can use a multi-column structure to present more information simultaneously.
• High-resolution images and graphics: Increase the resolution of images and graphics to take full advantage of high-definition displays.

Conclusion

Using breakpoints such as xs, sm for mobile, md for tablets, and lg and xl for desktops will help you create a responsive design that provides an optimal experience across all platforms. By adjusting margins and gutters as suggested in the table, you can ensure that your website not only looks good but also offers a consistent and smooth user experience across different devices.

Responsive design is not just a trend; it is a necessity in modern web development. By carefully planning your breakpoints and ensuring each device has an optimized experience, your website will be ready to perform well and be accessible to all users.

Figma: https://www.figma.com/community/file/1416212487552660211/grid-system

The post The right breakpoints for a website: Mobile, tablet and desktop appeared first on Roger Romero's Blog.

Understanding the Structure of Design Tokens

To structure an efficient design token system, it is useful to break tokens down into different layers of abstraction. This allows greater clarity when naming and managing styles across different components and systems. Below, we break down the structure based on the hierarchy shown in the main image, where tokens are divided into four major groups: Namespace, Object, Base, and Modifier.

Namespace: The Starting Point of the Structure

The namespace is the first layer of a design token system. Its function is to encapsulate a set of tokens under the same space, providing a clear organizational framework. In the image, three main categories are shown within Namespace:

• System: Here we find the prefix used as an acronym to identify the system “nds” (Name of the Design System).
• Theme: This focuses on design customization, allowing for theme switching. Examples of subcategories are brand (for brand-related tokens) and mode (for modes such as dark or light).
• Domain: A category aimed at dividing tokens by user type or domain, such as public, partner, consumer, internal, or business.

Each of these subcategories allows the same token system to be applied across different contexts or products without losing consistency.

Object: Defining System Elements

The next level is Object, which allows tokens to be grouped according to the type of object they affect. The main categories of this section include:

• Group: Covering generic groupings such as form or typography.
• Component: Specific elements like buttons (button) or links (link).
• Element: The smaller parts as icon or text children of the components

This organization ensures that tokens can be applied to any element of the design system in a clear and understandable way, from a complete component to a small icon or block of text.

Base: Defining Key Properties

The Base layer defines the fundamental properties that tokens control. Here, we find categories such as:

• Category: Grouping properties like color, font, spacing, sizing, border, opacity, shadow, among others.
• Concept: Referring to more abstract interaction concepts such as action, feedback, visualization, or display.
• Property: Specifies which property of the element or component the token is affecting. For instance, properties like background, foreground, border, family, size, weight, line-height, letter-spacing, text-case, and text-decoration are examples of how specific aspects of an element’s design can be fine-tuned.

This combination of Category, Concept, and Property within the Base layer provides a powerful way to describe what visual or behavioral aspects the tokens control, from basic visual properties like color and spacing to abstract concepts like action or feedback.

Modifier: Customizing Variations and States

Finally, we have the Modifier layer, which allows specifying variations, states, and modes for components. The main subcategories are:

• Variant: Tokens that control variations such as primary, secondary, tertiary, and other types like information, warning, error, and success.
• State: Describes interactive states like default, hover, focus, active, visited, or disabled.
• Scale: Includes adjustments for size and weight such as t-shirt sizes (lg,md,sm), numerical scales (1,2,3), weight (light,regular,bold), or tone (dark,medium,light).
• Mode: Tokens that define different display modes, such as on-dark or on-light.

This level allows flexibility for quickly applying modifications to components in different states or contexts, such as when a button transitions from its default state to a hover or focus state.

Practical Examples of Applied Design Tokens

In the second image we see examples of how these categories are applied to create specific token names that are functional and clear. Through the composition of different hierarchical levels, tokens are able to precisely describe aspects of any design element.

Example 1: nds-typography-display-lg

This token describes a specific font style (size) to be used in the display typography. It is designed for application to text. Let’s break it down:

• nds: Indicates the namespace, in this case, “Name of the Design System”
• typography: The object that this token affects, in this case, typography.
• display: Describes the purpose or concept for this token, referring to display text.
• lg: A scale modifier specifying that this is large-sized text.

Example 2: nds-component-button-color-background-primary-default

Another real-world token example shows how to describe the background color of a primary button in its default state:

• nds: Indicates the namespace, in this case, “Name of the Design System”
• component-button: The object it affects, in this case, a button component.
• color-background: The property it describes, which is the background color.
• primary: The button is of the primary variant.
• default: The state modifier indicating that this is the default state for the button.

Conclusion: The Importance of Organization in Design Tokens

By structuring a design token system in this way, you get a scalable, reusable, and easy-to-understand system, which is crucial for maintaining a consistent design system over time. The provided examples demonstrate how a clear hierarchy allows tokens to precisely describe all visual aspects of a system, from colors and fonts to states and modes.

This approach also facilitates collaboration between design and development teams, as everyone works under a common and understandable language, ensuring consistency across the digital ecosystem.

The post How to Structure an Effective Design Token System appeared first on Roger Romero's Blog.

There are several typographic scales used in web and mobile design, and here are some of the most common ones:

The Importance of Typographic Scale on the Web

On the web, typographic scale is essential for guiding the user through content in a clear and coherent manner. Since the web is a visual communication medium, typographic scale helps create a visual hierarchy that makes reading and navigation easier.

The Ideal Typographic Scale for the Web

The most commonly used typographic scale on the web is the Major Third (1.250), as it provides a good balance between readability and visual hierarchy. This scale is based on the 5:4 ratio, resulting in a gradual and harmonious increase in font sizes.

Applying Typographic Scale on the Web

To apply typographic scale on the web, it’s important to consider visual hierarchy and readability. Use font sizes that scale logically and predictably, and adjust the scale as needed to accommodate different screen sizes and pixel densities.

The Major Third is popular on the web because:

• It provides a good balance between readability and visual hierarchy: The Major Third allows for creating a clear and consistent visual hierarchy, making reading and navigation easier on the web.
• It is flexible and adaptable: The Major Third can be easily adjusted to fit different screen sizes and pixel densities.
• It is compatible with web design guidelines: The Major Third aligns with the web design guidelines of major platforms, such as Google’s Material Design and Apple’s Human Interface Guidelines.

Here’s an example of how the Major Third would look on the web:

Remember that the choice of typographic scale depends on the design and user experience you want to achieve on the web.

The Importance of Typographic Scale in Mobile Applications

In mobile applications, typographic scale is crucial for creating an intuitive and appealing user experience. Since mobile screens are smaller than web screens, the typographic scale must be carefully chosen to ensure readability and usability.

The Ideal Typographic Scale for Mobile Applications

The most commonly used typographic scale in mobile applications is the Major Second (1.125), as it provides a good balance between readability and visual hierarchy on small screens. This scale is based on the 9:8 ratio, resulting in a gradual and harmonious increase in font sizes.

Applying Typographic Scale in Mobile Applications

To apply typographic scale in mobile applications, it’s important to consider readability and usability. Use font sizes that scale logically and predictably, and adjust the scale as needed to accommodate different screen sizes and pixel densities.

The Major Second is popular in mobile applications because:

• It provides a good balance between readability and visual hierarchy on small screens: The Major Second allows for creating a clear and consistent visual hierarchy on small screens, making reading and navigation easier in mobile applications.
• It is flexible and adaptable: The Major Second can be easily adjusted to fit different screen sizes and pixel densities.
• It is compatible with mobile design guidelines: The Major Second aligns with the mobile design guidelines of major platforms, such as Google’s Material Design and Apple’s Human Interface Guidelines.

Here’s an example of how the Major Second would look in mobile applications:

Remember that the choice of typographic scale depends on the design and user experience you want to achieve in the mobile application.

The Line Height in the Typographic Scale

Implementing a good line-height (or leading) for typographic scales involves balancing readability, visual hierarchy, and the overall aesthetic of your design. Here are some best practices to consider when setting line-height for different typographic scales:

General guidelines for Line Height

• Body Text: The line-height for body text should typically be between 1.4 and 1.6 times the font size. This range provides enough space between lines for readability, especially for longer passages of text.
• Headings: Headings generally require less line-height compared to body text, typically around 1.2 to 1.4 times the font size. This tighter spacing helps to visually group the heading with its related content.

Line Height adjusted to screen size

• Mobile: On smaller screens, reduce the line height slightly (e.g., 1.2 – 1.4 for body text) to accommodate limited vertical space while ensuring legibility.
• Desktop: You can afford to use slightly higher line heights on larger screens (e.g., 1.4 – 1.6 for body text) to create a more open and airy feel.

The Line Height context matters

• Dense Content: For text-heavy designs, like articles or reports, opt for a larger line-height within the recommended range to avoid visual clutter.
• Minimalist Designs: In minimalist or highly visual designs, you might opt for a tighter line-height to maintain a clean and compact appearance.

Accessibility considerations for the Line Height

Ensure that your line-height choices do not compromise accessibility. Text should be easy to read, especially for users with visual impairments. WCAG guidelines recommend a line-height of at least 1.5 times the font size for body text.

Test and iterate the Line Height

Always test your typographic settings across different devices and screen sizes. What works well on a desktop might need adjustment on a mobile device or a different browser.

Conclusion

Choosing the right typographic scale is crucial for creating a consistent and appealing user experience on the web and mobile applications. By understanding the most commonly used typographic scales in each medium, you can create design systems that guide the user through the content in a clear and coherent manner.

The post Typographic Scales in Design Systems appeared first on Roger Romero's Blog.

Origins of the Three-Click Rule

The three-click rule was popularized by Jeffrey Zeldman in his book “Taking Your Talent to the Web“, published in 2001. Zeldman argued that users start to lose interest if they don’t find what they’re looking for after three clicks, which can lead to a higher abandonment rate. Although subsequent studies have suggested that tolerance for clicks may depend more on the perceived value during navigation than on the exact number of clicks, the rule remains a useful starting point for designers seeking to create intuitive and efficient interfaces.

Challenges with Interactive Components

Components such as accordions, carousels, and tabs can complicate adherence to the three-click rule as they often hide content behind additional interactions. This can lead to a more cumbersome and less intuitive user experience.

Accordions: While they reduce scrolling by compressing large amounts of content, they can also conceal essential information, forcing users to make more clicks to access it.

Carousels: Used to display multiple content items, they can be problematic if content automatically changes before the user has a chance to interact with it.

Tabs: Although they efficiently organize content, they can also require additional clicks to view information that might otherwise have been visible.

When and How to Use These Components

Accordions: Useful for FAQ sections or for complex forms where not all information needs to be visible immediately.

Carousels: Suitable for complementary and non-critical content, such as image galleries on product pages, provided that users have full control over the navigation.

Tabs: Great for dividing detailed information about products or services into distinct categories that do not require sequential consumption.

Conclusion

These examples highlight how accordions, carousels, and tabs, when strategically implemented, can significantly enhance the usability and efficiency of user interfaces. In each case, the design considers both the user’s needs and the specific objectives of the context, ensuring that content is accessible without visually overloading or unnecessarily complicating the user experience. The key is to use these components in a way that complements and enhances navigation, always respecting the three-click rule to keep the interface friendly and accessible.

The post Simplifying Web Navigation: The Three-Click Rule appeared first on Roger Romero's Blog.

Consistency: The Cornerstone of Design Systems

One of the primary goals of a design system is to establish a consistent visual language across all digital products and platforms. A naming convention for design tokens ensures that everyone involved in the development process, from designers to developers, understands and utilizes the tokens in a coherent manner. This consistency not only enhances the user experience but also streamlines the development process, reducing the time and effort required to maintain and update the design system.

Maintainability: Keeping Your Design System Future-Proof

As design systems evolve and grow more complex, maintainability becomes a critical factor. Descriptive and logically structured token names make it easier to understand their purpose and application, facilitating the maintenance of the design system over time. Developers and designers can quickly comprehend what each token represents and how it should be utilized, minimizing the risk of introducing inconsistencies or errors.

Scalability: Embracing Growth and Complexity

Design systems are meant to scale and accommodate new components, patterns, and functionalities as product requirements evolve. A well-defined naming convention helps maintain the organization and structure of tokens, enabling the design system to adapt and grow efficiently. As new elements are introduced, they can seamlessly integrate into the existing system, ensuring a cohesive and consistent experience for designers and developers alike.

Collaboration: Fostering Teamwork and Communication

In today’s collaborative development environments, clear and established naming conventions facilitate effective communication and collaboration among teams and individuals. Everyone involved can accurately and consistently refer to tokens, reducing confusion and misunderstandings. This shared understanding fosters a more productive and efficient workflow, enabling teams to focus on delivering high-quality products rather than deciphering ambiguous token names.

Automation: Streamlining Processes and Workflows

Many development and design tools and processes rely on the ability to analyze and process token names in an automated manner. A well-structured naming convention facilitates integration with these tools and processes, allowing for a more efficient and automated workflow. From generating documentation to performing automated tests, a consistent naming convention ensures that tools can accurately interpret and manipulate tokens, saving valuable time and resources.

In conclusion, establishing a clear and consistent naming structure, teams can create a robust and scalable design system that promotes consistency, maintainability, collaboration, and automation. Ultimately, this approach leads to more efficient development processes, improved user experiences, and a future-proof design system that can adapt to the ever-evolving needs of digital products and platforms.

How to Structure an Effective Design Token System

The post The Importance of Naming Conventions in Design Token Systems appeared first on Roger Romero's Blog.

Ease of Use

If a product is easy to use, it means the design, structure, and purpose of the product are clear and the product is easy to understand. When evaluating how easy a product is to use, you can ask yourself questions like: Are all parts of the design easy to find? Is the functionality of the design easy to grasp? Can users accomplish specific tasks within the design? During your evaluation, these questions can help determine if the design is easy to use.

Imagine you’re evaluating how easy to use an airline app is. If the primary goal of this app is to book a flight, the design should provide a clear, simple way to accomplish that task. For example, a section where the user can easily enter itinerary and flight details on the homepage would be an example of ease of use.

Equity

If a product exhibits equity, it means its design is usable for people with diverse abilities and backgrounds. In other words, the product design caters to the needs of a diverse audience and ensures a high-quality experience for all users, regardless of their origin, gender, race, or ability level. Equity is about providing people with the tools they need to achieve their goals and have a better quality of life. Equity goes beyond just equality —giving everyone the same resources— because often people need different tools and support based on their needs. This is especially important for those who belong to groups that are typically excluded. When evaluating the equity of a product’s UX, you might ask yourself questions like: Are the needs of a diverse group of users accounted for? Does the product design address the needs of traditionally underrepresented and excluded groups? These questions can help you determine if the design offers an equitable experience.

Imagine you’re evaluating how equitable a social messaging app is. You might consider that the design is more equitable if the emoji keyboard offers avatar options with different skin tones and gender-neutral choices.

Delight

If a product provides delight, it means the design delights the user. The design reflects what the user thinks or feels and creates a positive connection with them. A product’s design doesn’t have to be delightful in order to function properly. However, a delightful design complements an already functional product and can enhance the user’s feeling about the experience. When evaluating how delightful a product’s UX is, you might ask yourself questions like: Are there aspects of the design that account for the user’s feelings? Does the design delight the user? Does the design keep the user engaged throughout their experience? These questions can help determine if the design offers a delightful experience.

Imagine you’re evaluating how delightful a video streaming app is. Some design aspects that could make the product more delightful are personalized recommendations based on channels the user previously watched or the ability to customize the look of their account.

Usefulness

If a product is useful, it means it solves the user’s problems. In other words, the design intentionally solves a user problem that the designer has identified. It’s important to note that while related, the concepts of “useful” and “easy to use” have different meanings. A useful product isn’t always easy to use, and vice versa. The distinction is that “easy to use” refers to whether the product functions well and is straightforward to use, while “useful” specifically refers to the ability to solve user problems. When evaluating how useful a product’s UX is, you might ask yourself questions like: Does the design add value to the user’s experience? Does the design solve a problem for the user? Does the design help the user achieve a specific goal? These questions can help determine if the design offers a useful experience.

Imagine you have to evaluate how useful a banking app is. Users typically download these apps because they need a place to manage their money. With that in mind, some aspects of the app that could be considered useful are features that can be used to transfer money between accounts and pay bills.

The post Key features of a good User Experience (UX) appeared first on Roger Romero's Blog.

Brainstorming: Imagining the Future

Brainstorming is the playground of imagination, where everything begins. In this stage, UX design teams dive into brainstorming sessions, exploring every possible solution to an identified problem. This process is fundamentally collaborative, involving designers, developers, marketing specialists, and often, end-users. The goal is to generate a broad range of ideas, without limitations or judgments, to ensure a spectrum of potential solutions.

It’s crucial, during this phase, to maintain an environment where all ideas are welcomed. Techniques such as mind mapping and storyboarding help visualize problems and solutions, fostering a deeper understanding of the end-user and their needs. Additionally, this stage lays the groundwork for genuine innovation, allowing teams to dream without barriers and visualize what does not yet exist.

Ultimately, brainstorming is not just about generating ideas but also about identifying those with the potential to become viable solutions. It’s a delicate balance between creativity and feasibility, where the most promising ideas are selected for further development and refinement in the next stages of the development cycle.

Definition: Shaping the Vision

Once ideas have been generated, the next step is to define them precisely. This stage transforms abstract ideas into tangible concepts, with clear design objectives and user requirements. Here is where UX teams begin to outline the project scope, setting clear goals and success criteria.

The definition also involves extensive user and market research. UX design teams delve into the behavior, needs, and desires of the end-user, using tools like interviews, surveys, and competitive analysis. This understanding of the user is crucial to ensure that the final product is not only usable but also desirable.

Moreover, defining the product strategy becomes a central focus. Critical decisions about the product’s direction, including its unique value proposition and how it will differentiate in the market, are made. This stage sets the foundation for future design and development, ensuring that the final product aligns with user needs and business objectives.

Design: Crafting the Experience

With a clear vision established, the UX team moves to the design stage, where that vision begins to take shape. Here, concepts become prototypes, and ideas are transformed into interactive interfaces. The design focuses not just on aesthetics but also on functionality, ensuring that the product is intuitive and easy to use.

UX design encompasses a wide range of disciplines, from interaction design to visual design, information architecture, and UX writing. Each aspect of the design is meticulously cared for, with the goal of creating a cohesive and appealing user experience. Low and high-fidelity prototypes are essential tools at this phase, allowing teams to test and refine interfaces before moving into full development.

Continual collaboration remains a pillar in the design stage, with constant iterations based on feedback from users and the team. This phase is iterative by nature, aiming to refine the user experience until the product reaches the ideal balance between form and function.

Testing: Validating the Solution

Before launching to the market, it’s crucial to validate that the product meets the expectations and needs of users. The testing stage focuses on evaluating usability, accessibility, and user satisfaction through a series of meticulous user tests. From usability tests to heuristic evaluations, UX teams gather valuable data on how users interact with the product.

This stage is crucial for identifying any usability issues or barriers that may hinder an optimal user experience. The results of these tests are analyzed and used to make adjustments and improvements to the design. The testing phase is, therefore, an iterative process, where the product is continuously refined until maximum efficiency and user satisfaction are achieved.

Moreover, testing also offers the opportunity to validate design hypotheses and ensure that the final product is not only usable but also engaging and valuable to the end-user. It’s a critical phase that guarantees the product is ready to be positively received by the target market.

Launch: Introducing the Product to the World

The launch marks the end of the product development cycle in UX design, but also the beginning of its life in the market. This stage focuses on the product rollout, from distribution logistics to marketing and promotion strategies. The aim is to ensure a successful introduction of the product to the market, effectively reaching the target audience.

The launch is also a time for reflection for UX teams, where learnings from the development process are gathered and plans for future iterations are made. Products in UX design are never static; their success depends on the ability to adapt and evolve with the changing needs of users and market trends.

Additionally, the launch includes monitoring the product’s performance in the market, collecting feedback and critiques from end-users. This information is invaluable for future iterations of the product, ensuring it continues to meet and exceed user expectations.

Conclusion

The product development cycle in UX design is a complex and multifaceted journey, requiring a mix of creativity, strategy, and technique. Each stage, from brainstorming to launch, is crucial for creating products that not only solve problems but also offer memorable and enriching experiences to users. Through collaboration, iteration, and a user-centered approach, UX design teams continue to innovate and define the future of digital products.

The post The Product Development Cycle in UX Design appeared first on Roger Romero's Blog.