Design permeates every aspect of our lives. It’s in the toothbrush you reach for in the morning, the cup from which you sip your coffee, the route you take to the office, and even the bedside lamp you switch off at the end of the day. Your daily activities flow smoothly, largely due to the thoughtful design behind the tools and objects you interact with.

Countless anecdotes illustrate how design serves as the bedrock for numerous industries and organizations, profoundly shaping the final products or services they deliver. A dedicated design team forms an integral part of any organization, working hand in hand with other professionals. Experimentation worldwide consistently demonstrates the significant impact of design on the reception of products.

But what exactly is design? At its core, design is about solving problems. It entails creating products or services that align with users’ needs, are intuitive to use, and evoke emotional resonance. Think of the watch passed down to you by your father, or the app you eagerly recommended to a friend. These items hold value because they seamlessly integrate into your life. A beautifully crafted watch not only adds elegance to your attire but also garners admiration from others. Yet, its primary function remains telling time.

However, what happens if you awaken in the dead of night and reach for your watch, only to inadvertently drop it on the floor? This scenario highlights a crucial aspect of design—minimizing friction. Even the most aesthetically pleasing and functional designs can falter if they introduce unnecessary hurdles or complications into users’ lives.

For frequent travelers, adjusting your watch to different time zones can be a recurring inconvenience. But the expectations for what a watch should do extend far beyond simple timekeeping. Manufacturers must continually adapt to meet the evolving needs of consumers. As a result, modern watches offer features like illumination for low-light environments. Rolex, for instance, introduced GMT Master watches tailored to the needs of pilots who regularly traverse international borders. There are timepieces designed specifically for extreme environments, such as those for lunar exploration and deep-sea diving.

Design must keep pace with the ever-changing tastes and requirements of the community it serves. What was once a device solely for telling time has evolved into a multifunctional tool capable of measuring heart rate and much more.

The impact of design extends far beyond handheld products like wristwatches; it can encompass vast systems such as airports. A compelling example comes from Houston Airport, which faced frequent complaints from passengers about long wait times at baggage claim, averaging around 6-7 minutes. Despite efforts to address the issue by hiring more staff and investing in expensive machinery, the problem persisted.

Finally, the authorities turned to designers to tackle the problem. These designers immersed themselves in the environment, studying the intricacies of the existing system. Through observation, they uncovered the root frustration of users: the annoyance of waiting.

The solution they proposed was remarkably simple yet highly effective, saving significant resources in the process. By increasing the distance to baggage claim, which now takes approximately 6 minutes to walk, the once lengthy wait times were reduced to just 1-2 minutes.

When it comes to developing a digital product, media and communication design play significant roles. Among the major branches of communication design are graphic design, interaction design, retail design, and user experience and user interface design. While most product development phases involve all these branches, user experience design serves as the framework. It guides all other activities based on how the application or program should function.

User Experience Design (UXD) is a term coined by the American researcher Don Norman in the early nineties. It refers to the creation of products that are simple, intuitive, and emotionally resonant.

UXD involves designing interactive interfaces for both physical and digital products, including websites, web applications, desktop software, and mobile applications. It encompasses various aspects such as interaction design, information architecture, visual design, usability, and human-computer interaction. As a cross-functional field, UXD aims to help users effectively navigate and address the challenges they encounter when using or interacting with a product.

User experience design follows a structured process with steps such as research, design, content development, user testing, and developing business solutions for the company. Another approach within UX design is Human-Centered Design, also known as HCD. This method of problem-solving is commonly used in design and management frameworks, involving the human perspective in all stages of the problem-solving process. It begins with studying the problem, brainstorming solutions, conceptualizing ideas, developing prototypes, and implementing the final solution.

There isn’t any defined law for the process involved in User experience. Various industries and firms follow their own methodology of arriving at the solution. However, there are a few important steps that are followed over the course of designing a product.

This involves an extensive study of the specific user group, their behaviours, daily activities, and routines. Usually, research begins by creating a set of questionnaires and having them answered by the user groups. It is advisable to conduct these interviews in the environment where the users actually work. This provides a better understanding of user engagement in specific tasks and allows for firsthand observation.

To understand users effectively, it is important to allow them to speak freely during their routine activities. This freedom enables them to express their actual pain points, which are crucial for identifying areas of improvement. It is essential to uncover all the pain points associated with their work or processes. These problems can later be sorted based on their priority. Additionally, users may contribute to conceptualizing solutions or provide insights into achieving them.

Creating a questionnaire for surveys can be done by referring to relevant websites. However, it’s important not to overwhelm users with too many questions, as this may lead to incorrect or rushed responses. Surveys can be distributed to as many users as possible to gather diverse perspectives on their routines and understand their actual pain points. Surveys offer an advantage for users who may be hesitant to participate in personal interviews.

Ideation in design thinking involves several processes. Once user research data and pain points are collected, it’s time to refine and organize them.

User personas are archetypal representations of users whose goals and characteristics represent a broader set of users interacting with the product. These personas encompass user groups of varying ages, ethnicities, and knowledge levels. They help cover all categories of users in a demographic area, incorporating their needs, frustrations, social engagements, personality traits, preferences, and choices.

User journey mapping is a technique that visually illustrates the user’s journey with the product. It identifies points of interaction and the emotions involved throughout the product usage roadmap. This aids in improving and optimizing the user experience and identifying potential business opportunities.

User flow diagrams, generated after identifying end-user needs, help UX teams understand the flow of a website or application. They depict the screens involved, navigation across the application, and the potential for additional pages or screens.

This process involves converting user flow diagrams into high-fidelity wireframes and subsequently into UI design screens. Each step in the user flow is elaborated and converted into detailed screens for the website or application.

UX wireframing details the functions of screens involved in the user flow. It determines the placement of buttons, layout of data and information to ensure users can easily comprehend the information without cognitive overload.

UI designs focus on the visual aspects of the screen, including colours, style guides, font sizes, and placement of elements and graphics. Designers typically start with a mood board and then focus on primary, secondary, and tertiary colours. UI design follows defined guidelines for consistency throughout the application or website, known as a style guide, which specifies button sizes, font hierarchies, and colour schemes.

Once the UI designs are ready, it is vital to test them with actual users. This is because these users have better insights and judgment capabilities compared to the team that designed the product. As designers, we may be biased, believing that we have developed the product with the utmost quality and functionality. However, during actual user testing, real users may uncover aspects of quality or functionality that we overlooked. This process provides us with the opportunity to improve and deliver products with the best possible user experience.

Figma is one of the most widely used design tools in the industry. It offers the ability to prototype and simulate applications, allowing users to navigate from one screen to another. This enables end users to identify any discrepancies in the flow or potential use cases that the team may have overlooked.

The design process should never be considered linear, as various steps are revisited multiple times for constant iteration. This iterative approach helps refine the product or service’s user experience, making it easier to use. The testing phase is particularly crucial as it helps uncover use cases that the designer may not have foreseen during the initial stages of the process.

BEM (Block Element Modifier) stands as a widely embraced CSS class naming convention designed to simplify the maintenance of cascading style sheets. Recognized for its effectiveness in organizing code and promoting reusability, BEM plays a crucial role in enhancing the clarity and structure of CSS. In the following discussion, we assume a foundational understanding of the BEM naming convention, directing our focus towards refining its syntax and addressing potential challenges. As we delve into the nuances of BEM, we introduce an alternative approach—ABEM (Atomic Block Element Modifier)—which seeks to overcome certain limitations while aligning with the principles of Atomic Design.

The standard BEM syntax is: “block-name__element-name–modifier-name”. Breaking styles into small components facilitates easier maintenance compared to dealing with high specificity scattered across the stylesheet. However, the syntax poses challenges in production and may cause confusion for developers. This article introduces a refined version of the syntax named ABEM (Atomic Block Element Modifier):

The prefix “a/m/o” belongs to Atomic Design methodology and should not be confused with Atomic CSS, as they are distinct concepts. Atomic Design is a structured approach aimed at efficiently organizing components to enhance code reusability.

It splits the components into three folders: atoms, molecules, and organisms. Atoms represent basic components, often comprising only one element such as a button. Molecules are comprised of small clusters of elements or components, like a form field with a label and input. Organisms, on the other hand, are intricate components composed of multiple molecules and atoms, for example, a comprehensive registration form.

Utilizing Atomic Design alongside classic BEM presents a challenge due to the absence of clear indicators indicating the type of component a block represents. This lack of clarity can lead to difficulty in locating the code for a particular component, often requiring searches across multiple folders. By prefixing with “atomic,” it becomes instantly evident which folder houses the component, streamlining the navigation process.

In Classic BEM, each word within a section is separated by a single dash. It’s worth noting that in the example provided, the atomic prefix is also set apart from the remainder of the class name by a dash. Consider the implications when adding an atomic prefix to Classic BEM versus camelCase:

At first glance, the component name appears as “o subscribe form” in the Classic BEM method, where the significance of the “o” is obscured. However, in the camelCase version, adding “o-” distinctly separates this prefix, indicating its intentional distinction from the component name. Alternatively, in Classic BEM, one could apply the atomic prefix by capitalizing the “o” as follows:

While capitalizing the “o” in Classic BEM would address the problem of it blending into the class name, it doesn’t resolve the fundamental issue inherent in the classic BEM syntax. When words are separated by dashes, the dash character loses its utility as a means of grouping. Employing camelCase allows us to reserve the dash character for supplementary grouping, such as appending a number to the end of a class name. Additionally, camelCase enhances the clarity of class name grouping, simplifying processing. In camelCase, each break in the class name signifies a distinct grouping, whereas in classic BEM, such breaks can indicate either a grouping or simply a space between words within the same group.

Consider this silhouette of a classic BEM class (with an atomic prefix) and attempt to discern the delineation between the prefix, block, element, and modifier sections:

Now, take a look at this version. It’s identical to the one above, but this time it employs camelCase to separate each word instead of dashes:

These silhouettes represent how your mind visually parses through your code. The surplus of dashes in the class name diminishes the clarity of groupings. While reading the code, your brain must discern whether encountered gaps signify new groupings or merely separate words within the same group. This ambiguity increases cognitive load and complicates the task at hand.

A fundamental principle of BEM is that each selector should comprise only one class. This practice aims to maintain CSS code by ensuring that selector specificity remains low and easily manageable. On the one hand, low specificity is preferable over having specificity run rampant. Conversely, adhering strictly to a one-class per selector rule might not always be the optimal approach for projects. Introducing some multi-class selectors into our styles can actually enhance maintainability rather than detract from it.

The presence of higher specificity declarations doesn’t necessarily translate to increased complexity in maintaining our CSS. When employed judiciously, assigning higher specificity to certain rules can actually streamline CSS maintenance. The essential aspect of crafting maintainable CSS with varying specificity levels is to intentionally increase specificity, rather than doing so merely because an element happens to be nested within another.

This is the most significant alteration introduced by ABEM syntax. Rather than appending the modifier directly to the element class, it is applied as a distinct class.

One of the primary grievances voiced by almost everyone when initially learning BEM is its perceived ugliness, particularly concerning modifiers. Consider this example, which only incorporates three modifiers yet appears chaotic:

The repetition makes it difficult to read what it is trying to do. Now look at this ABEM example that has all the same modifiers as the previous example:

It is much cleaner. It’s significantly clearer to grasp the intent behind those modifier classes without the clutter of repetitive elements obstructing the view.

Even when examining an element with browser DevTools, the complete rule is still visible in the styling panel, thereby preserving the link to the original component in that regard.

It’s not much different to the BEM equivalent.

To maximize the effectiveness of the ABEM modifier, default to using the “.-modifierName” or “&.-modifierName” syntax, depending on which element bears the class.

Resort to direct targeting if nesting a component within itself poses difficulties.

In case of shared modifier name collisions, incorporate the component name into the modifier.

The BEM naming convention methodology enables breaking down CSS into small, easily manageable components, steering clear of unwieldy, high-specificity code that’s hard to maintain. However, the official BEM syntax leaves much to be desired.

The official BEM syntax falls short in several aspects:

The ABEM approach offers several advantages:

Usability testing is a method for evaluating a product by testing it with actual users who will use the product. This is achieved by observing the users’ behavior as they interact with your product. Through this process, we can identify areas where they struggle, experience frustrations, or encounter difficulties in completing specific tasks.

Usability testing holds significant importance because it allows designers and developers to uncover numerous design issues and gain insights into user behavior and preferences while using the product. Additionally, it helps identify opportunities for improving the design by addressing issues in the early stages of the design process.

When to Conduct Usability Testing

Usability testing can be conducted in various phases:

1.Before Design

Usability studies in the pre-design phase are suitable when you have an early concept of the product and a tangible prototype for users to test. For example, if you’re developing an app and have a clear idea of its purpose, usability testing can be initiated. However, ensure that a prototype is available for user testing to identify potential usability issues.
Another scenario for pre-design testing is when you plan to redesign an existing product by addressing current user pain points.

2.During Design

Usability testing can also occur during the design phase, playing a crucial role in the iterative design process. It enables the evaluation of the usability of design concepts, identification of potential issues, and informed design decision-making.

3.Post Launch

After the product launch, usability testing helps understand how users interact with the product in the real world. It provides insights into whether users encounter difficulties while using the product.

Core Elements of Usability Testing

There are many diverse types of usability testing, but the core elements in the most usability tests are;

Usability testing comprises various elements, but the core components include:

1. Facilitator

The role of a facilitator in usability testing is pivotal for ensuring a smooth and productive testing session. The facilitator sets up the testing environment with the necessary equipment, software, and materials. They also welcome participants and establish rapport to create a positive testing environment that encourages honest feedback.

The facilitator explains the testing process to participants, emphasizing its purpose, and guides them through each task. During testing, the facilitator encourages participants to vocalize their thoughts and feelings as they interact with the design. Observations are made on participants’ behavior, comments, and any difficulties they encounter. The facilitator ensures the testing session stays on track and that participants complete required tasks within the allotted time. They can provide additional guidance if participants encounter difficulties. After the session, the facilitator thanks the participants and addresses any questions or concerns.

2. Participants

Participants should represent realistic users of the product or service under study. They may be current users of the product or have a similar background to the target user group. Participants are often encouraged to ‘think aloud’ during usability testing, narrating their actions and thoughts to understand their behaviors, goals, thoughts, and motivations.

3. Tasks

In usability testing, tasks are the primary components that participants perform to assess the product’s usability. These tasks simulate real-world scenarios and user interactions. The choice of tasks depends on the goals and objectives of the usability test.
Common usability testing tasks include onboarding processes (e.g., registration) and scenario-based tasks (e.g., booking a flight, or purchasing a product).

Usability Testing Environment 

The above image demonstrates a typical in-person usability testing environment consisting of a participant seated on the left side and a facilitator on the right side. The facilitator explains tasks to the participant, who uses a laptop with screen recording software and a webcam to capture facial expressions and behaviors. The facilitator guides the participant through tasks, takes notes, and listens to participant feedback.

 Remote Usability Testing  

There are two types of remote usability testing:

1. Moderated

In moderated testing, participants and facilitators are in different physical locations. Facilitators interact with participants through screen-sharing software like Teams, Go-To-Meeting, or Skype. This approach allows facilitators to build rapport, guide participants, and ask questions in real time.

2. Unmoderated

Unmoderated testing lacks facilitator interaction. Instead, facilitators use remote testing tools to assign tasks to participants. Participants complete tasks at their convenience. After completing a task, the testing tools provide recordings and task data to researchers. Unmoderated testing offers the advantage of flexibility and participant comfort, allowing for honest feedback.

How To Conduct Remote Usability Testing

1. Setting up the environment

• Begin by building rapport with participants to ensure their comfort, which encourages honest feedback.
• Express gratitude to participants for their valuable time in participating in the usability study.
• Seek permission to video record the testing session.
• Explain the tasks participants will perform.
• Remind participants to provide honest feedback for design improvement, emphasizing that they are not being tested.
• Avoid forcing participants to complete tasks; the facilitator’s role is to gather information for a more user-friendly product.

2. Data capture

• Gather basic participant information, such as age and location.
• Record the device used for interacting with the design.
• Track the time taken to complete each task.
• Document participant comments while using the product.
• Observe participant actions and gestures.
• Note questions participants ask during task completion.
• Record suggestions and recommendations from participants.

Participants Data Capturing Form

This is an example of a user testing form. Through this form the facilitators are capturing the user’s feedback against each task they are asked to perform.

The above image includes task details such as:

• Recording the time taken by the user to complete each task.
• Opening mobile applications, sending money, changing passwords, etc.
• Observing and documenting user behavior during each task.
• Collecting user feedback and thoughts on each task.
• Assessing whether each task was successfully completed or resulted in a failure.

Based on the findings from usability testing, the design team should iterate on the design and repeat the testing process to evaluate the effectiveness of the changes. This iterative process leads to a more user-friendly product.

In conclusion, usability testing serves as an indispensable tool for product evaluation. By involving real users in the process, it uncovers areas of struggle, frustration, and difficulty within the product’s design. This practice not only aids designers and developers in identifying and rectifying issues but also provides profound insights into user behavior and preferences. Early problem detection through usability testing reveals valuable opportunities for enhancing the design, ultimately creating a more user-centric and effective product.