How to Design an AI-Based Enterprise Search in AWS

Finding right information at the right moment is a key distinguisher in today's modern organization. This not only saves huge time and effort but boosts customer satisfaction as well as employee productivity. However, in most large organizations, all the contents and information are scattered and not indexed and organized properly. Often employees and customers browse through unrelated links for hours when they look for some urgent information (e.g., product information or process flows or policies, etc.) in the company's portal or intranet. Popular content management (CMS) software or wikis like Confluence or document management repositories like SharePoint lack the perfect intelligent search capabilities resulting in inefficiency as they only use the partial or full-text search based on keyword matching ignoring the semantic meaning of what the user is looking for.

Also, the traditional search doesn't understand if the question is being asked in natural language. It treats all words as search queries and tries to match all documents or contents based on that. For example, if I need to find which floor our IT helpdesk is located in my office building and simply search "Where is the IT Helpdesk located?" in general, CMS or Wiki software powering the company intranet it may bring up all links or texts matching every word of my question including "IT," "Helpdesk" as well as "located.” This would waste employee productivity, time, and morale as he or she would be spending a long time identifying correct info.

Designing Age-Inclusive Products: Guidelines And Best Practices

Why is it so important to take into account older adults? One person in eight on the planet is over 60, and they are more online than ever. Approximately one billion people aged 60+ are alive today. Most of them are healthy and active and have discretionary income. Moreover, it is growing faster than any other age group and is projected to be 20% of the world’s population (~2 billion people) by 2050. They are also the fastest-growing category of e-commerce shoppers.

Older people today are adopting technology more than ever before. From the use of the Internet, smartphones, tablets, and wearables to smart TVs and speakers, a growing number of older people are users. Ownership of smartphones, for example, increased from 70% to 77% among the 50+ population in the United States between 2017 and 2021. Moreover, during the Covid-19 pandemic, there was a significant rise in older adults’ motivation to use digital technology.

However, many older people still lack sufficient Internet connectivity or technological skill to use devices and consume digital services. It is estimated that two in five feel technology is not designed for them (PDF).

Opportunity To Integrate Older people Into The Digital World

More and more aspects of life are conducted on digital platforms: interpersonal communication, banking, healthcare, personal consumption, and exercising one’s rights are just some of them. Therefore, digital platforms that are challenging to use for older people have a negative impact on their quality of life. It prevents them from accessing essential services and integrating equally into society.

According to the inclusive design approach, one should take into account the needs of as many users as possible without stigmatizing or excluding a specific group by designing niche products.

If you adopt this principle, you can design a digital platform that serves a wide range of people, not just those aged 65+. Usually, a service that meets the needs of people aged 65+ will serve other audiences as well.

Adopting Age-appropriate Navigation And Orientation Practices

Advancing age can also bring with it a decrease in the rate of information processing, whether in understanding, thinking, or remembering. Plus, the ability to ignore distractions, focus on one stimulus, and perform several complex actions simultaneously also decreases.

Additionally, due to their age, some suffer from a decrease in executive functions that enable planning, executing, and delaying reactions. Therefore, there is a higher chance they will perform random actions such as clicking on unintended places, closing pages, or making errors when using apps. Some may have difficulty understanding that icons carry the same meaning across different apps or in dealing with situations that do not correspond with their expectations of the digital world. Despite such difficulties, it is essential to stress that the ability to learn from feedback — for example, via affirmations — does not diminish with age.

What Should We Do If We Want To Increase Their Engagement?

Here are a few guidelines to help you design a more inclusive product. Those guidelines can increase the usage of younger users but are highly crucial for older users:

Minimize The Number Of Required Actions And Create Shortcuts

Some people over 65 find it challenging to cope with information overload and multiple options.

Proper information architecture and hierarchy will indicate what is important to the user and require less effort. We should ensure that the required actions appear immediately and easily so that the user does not have to search for them. Some important ones to mention are white space, content placement, space, language, number of actions, and others. Below are these and some others listed with explanations:

  • White space
    Reducing the number of elements on a screen, increasing the spacing between them, and retaining whitespace will make the screen feel less crowded and, therefore, clearer and more inviting. The added value is in the feeling of simplicity it creates. This improves the user’s sense of competence and ability to focus. Clear typography following one of the established typographic scales is relevant for websites, apps, and complex data systems.

  • Dialog box
    A limited number of options prevents cognitive overload. Therefore, conduct a careful mapping of the digital platform, distilling out the most important actions and contents.
  • Central placement
    The most important themes should be positioned at the center of the screen.
  • Large & spacious
    The most important buttons should be enlarged and positioned prominently to allow immediate recognition.
  • Clear language
    Topics should be clearly labeled, and the labels should be verified in usability testing. Complicated terms should be avoided since they might not be familiar to the target audience.
  • Limited number of actions
    The number of steps (clicks and scrolls) necessary to achieve a goal should be minimized.
  • Shortcuts and multiple/redundant paths
    Make it easy for users to reach their goals by providing multiple options, such as Quick Links, as seen in the example below.

What To Know About Navigation & Orientation?

Some people aged 65+ can experience a decline in memory recall. Some are also unfamiliar with the principles of the digital world. Therefore, to enhance their sense of control, the following principles should be adopted: rely on recognition, not memory; allow going back; design clear navigation keys; be consistent in design and operation; and provide indicators. Below we will discuss several principles to facilitate navigation.

  • Recognition, not memory
    This principle means creating an interface where users do not have to use their memory to recall information. Instead, they will be asked to identify familiar and prominent components, such as quick access to previously visited pages or actions. The illustration below is an example of how Korea’s post office presents the main tasks on the main screen in a way that doesn’t require memory but recognition. Additional support is the use of color to help the users recognize how to navigate the site once they return to it.

  • Indicators and feedback:
    • Emphasize the performed actions: Use breadcrumbs to indicate which links or buttons the user has clicked on and their location.
    • Create a conspicuous and permanent back icon that takes the user to a previous page/stage. This is in addition to the browser’s back and homepage icons.
    • Clear and prominent navigation buttons: Emphasize navigation buttons and add text to explain their function.
  • Consistency
    Create an ongoing, consistent user experience using recurring items. Allow the users to learn the interface, generating a sense of success and building anticipation for the next stage. Pay attention to the location and design of fixed buttons that have the same function.
  • Progress
    Create obvious hints, such as a progress bar, that help users to understand where they are in the process.
  • Success & mistakes
    Highlight progress and successful actions. Additionally, indicate errors clearly and provide ways for easy recovery.
  • Contact Us
    Choose a prominent location for the help options. Provide contact information using various channels, e.g., telephone number and email address.

Choosing components with an age-inclusive mindset can change our day-to-day decisions and allow us to create an easy-to-operate interface.

The following guidelines relate to changes in motor functions.

Creating An Interface That Is Easy To Operate

As age increases, it may be accompanied by difficulty in touching a specific spot accurately, regulating a click’s intensity, or performing quick actions, such as double-clicking. Therefore, the following principles should be ensured: space out the keys, avoid the need for a high degree of precision, avoid gestures requiring sensory regulation, and enable users to progress at their own pace.

  • Large & spacious
    Design large and well-spaced elements.
  • Individual pace:
    • When creating pop-up/toast messages, allow users to initiate closing or at least leave the messages visible for longer for slower readers.
    • Avoid menus that open on hover. Always use click-tap menus instead.
  • Indication
    Provide clear scroll indicators (e.g., side arrows). Reduce the need for precision: Avoid small clicking areas, mouse hovering, and double-clicking.
  • Ensure that the interface is responsive on all screens.
    For touch screens:
    • Click actions should not rely on touch intensity or precision.
    • Avoid, as much as possible, long strokes and drag gestures, and reduce scroll options. At the very least, provide clear indication and instruction, and offer alternatives, such as an arrow or button directing to specific places.
    • Avoid the need for very precise actions, such as in small clicking areas, and try to keep to the minimum size for comfortable tapping/clicking of at least 44x44 px.
    • Avoid actions requiring fine motor regulation such as spread, pinch, and rotate.

Let’s examine the homepage of three famous e-commerce websites in the eyes of an older user without going into details.

Aliexpress website, as seen in the image above, is a good example of an “unfriendly” website — it suffers from visual overload. Too many buttons and tags are emphasized, which makes it hard to focus older user attention. Moreover, given the visual overload, the side menu is easy to ignore, and many users will be required to use the search bar, which needs to be more dominant and rely on their recall of items, not recognition.

On the Amazon website (see the image below), the size of each category image may be distracting, requiring the user to scroll a lot and challenging his ability to navigate.

In contrast with these previous sites, eBay does better regarding visual overload; the dominance of the search bar and even the menu placement make it easier for older users to navigate.

Wrapping Up

Every designer would probably state that they want their website and app to be inclusive, easy to navigate, and user-friendly. Yet, as we have seen in our examples above, we need to create awareness to integrate details that would make it easier for older users to navigate the Internet. As we age, all of us will experience longer reaction times, changes in selective attention, attention-splitting, and changes in our motor functions. Therefore, designing for an older audience will achieve the goals of having an inclusive, easy-to-navigate, and user-friendly for our future selves as well.

To sum up, in order to create an easy operation and orientation of an interface, we should pay attention to the following:

  • Large, spaced-out objects;
  • Operation does not require fine gestures and precision;
  • A minimum number of actions to achieve goals;
  • The user should control the rate of progress;
  • Reassuring notifications upon successful actions;
  • Consistency of design and operation;
  • Minimizing the number of choices the user must make;
  • Highlighting the actions performed by the user.

The article is based on one of the chapters of the Log In guide. The guide was created within the framework of the National Initiative to Promote Digital Literacy Among Older Adults, which is a partnership between the Israel National Digital Agency and JDC-ESHEL.

Further Reading On SmashingMag

What’s The Perfect Design Process?

Design process is messy. You might be following a structured approach, but with all the last-minute changes and overlooked details, too often, it takes a life of its own. And before you know it, you are designing in a chaotic environment full of refinements, final-final deliverables, and missed deadlines.

This article is part of our ongoing series on design patterns. It’s an upcoming part of the video library on Smart Interface Design Patterns 🍣 and is a part of the live UX training as well.

What’s The “Right” Design Process?

Of course, there is no “right-and-only” way to frame a design process. It’s defined by whatever works well for you and for your team. Personally, I tend to rely on 4 design models that seem to fit well with my design work:

  • Double Diamond Process for its comprehensive and reliable methodology for solving problems. In this guide, Dan Nessler breaks down the entire Double-Diamond process into single parts, explaining how exactly it works, step-by-step, in all fine details.

  • Triple Diamond Process for its more realistic approach to the designer’s input across the product’s life cycle. That’s a piece by Adam Gray on why bringing flexibility to the messy reality of the design process is critical to improving planning and involving design work as prototypes are being built.

  • Enterprise Design Thinking Model by IBM for its focus on design maturity and scale, which really helps large organizations. A useful model that helps argue for user research, user-centricity, and rapid low-fidelity prototyping — and how to transfer ownership to design teams at scale.

  • Hot Potato process, for its simplicity in bridging design and development across the entire product lifecycle. Designers and developers throw ideas, mock-ups, and prototypes to each other permanently. Sometimes there are more involved design phases than dev phases, but there is no hand-off, and the entire process is driven by continuous collaboration.

These ways of thinking about the design process translated into a process that works well for me but has to be adjusted for every project that I’m working on. In a nutshell, here’s how it would work.

A Process That Works For Me

There is no such thing as enough user research. In every project, I start with involving users as early as possible. I explore all the data we have, interview customer support and the service desk, check for technical debt and design issues, backlog items, and dismissed ideas. I explore organizational charts to understand layers of management. I set the right expectations and seek allies.

From there, I would typically spend weeks or even months in diagrams and spreadsheets and endless docs before drawing a single pixel on the screen. I try to get developers on board, so they can start setting up the dev environment already.

I bring in stakeholders and people who have a vested interest in contributing to the success of the project. Voices that need to be heard but are often forgotten. I see my role as a person who needs to bridge the gap between business requirements and user needs through the lens of design.

Then I take a blank piece of paper and start sketching. I sketch ideas. I sketch customer journey maps. I sketch content boxes. I write down components that we will surely need in the product — the usual suspects. I set up a workshop with designers and developers to decide on names. Then developers can go ahead and prototype while designers focus on UI and interaction design.

To make sure I get both sides of the equation right, I draft customer journey maps, brainstorm ideas and prioritize them with the Kano model and Impact ÷ Effort matrix (with developers, PMs, and stakeholders).

I don’t want to waste time designing and building the wrong thing, so I establish design KPIs and connect them with business goals using KPI trees. I get a sign-off on those, and then the interface design starts.

I develop hypotheses. Low-fidelity mock-ups. Speak to developers. Get their feedback. Refine. Throw the mock-ups to developers. Bring them into HTML and CSS. Test hypotheses in usability sessions until we get to an 80% success rate for top tasks. Designers keep refining, and developers keep building out.

Establish a process to continuously measure the quality of design. Track task completion rates. Track task completion times. Track error rates. Track error recovery rates. Track accessibility. Track sustainability. Track performance. In a B2B setting, we track the time customers need to complete their tasks and try to minimize it.

Make them visible to the entire organization to show the value of design and its impact on business KPIs. Explain that the process isn’t based on hunches. It’s an evidence-driven design.

Establish ownership and governance. The search team must be measured by the quality of search results for the top 100 search queries over the last two months. People who publish content are owners of that content. It’s their responsibility to keep it up-to-date, rewrite, archive, or delete it.

Refine, refine, refine. Keep throwing new components and user journeys to developers. Stop. Test with users to check how we are doing. Keep going and refine in the browser. Continuously and rigorously test. Launch and keep refining. Measure the KPIs and report to the next iteration of the design.

Admittedly, it is a bit messy. But it helps me stay on track when navigating a complex problem space in a way that delivers measurable results, removes bias and subjectivity from design decisions, and helps deliver user-centric designs that also address business needs.

Wrapping Up

Of course, there is no “right-and-only” way to frame a design process. It’s defined by whatever works well for you and for your team. Explore options and keep them in mind when designing your design process. Whatever you choose, don’t follow it rigidly just for the sake of it, and combine bits from all models to make it right for you.

As long as it works well for you, it’s right. And that’s the only thing that matters.

You can find more details on design patterns in the video library on Smart Interface Design Patterns 🍣 — with a live UX training that’s coming up in September this year.

Further Reading on Smashing Magazine

Optimizing User Experience in E-Learning Platforms: Designing Intuitive Interfaces and Seamless Navigation

E-learning allows individuals to gain knowledge and skills from the comfort of their homes. You don’t need to wake up early and visit classes anymore—the education happens online and starts when you are ready. That’s...

The post Optimizing User Experience in E-Learning Platforms: Designing Intuitive Interfaces and Seamless Navigation appeared first on 85ideas.com.

How to convert any website into fully editable Figma designs

We’ve all been there: Manually recreating website designs in Figma, desktops cluttered with screenshots for benchmarking, improving web copy without design context…

But what if there was a way to import a full webpage into Figma in just a few clicks? What if you could then edit the imported webpage; changing everything from text, to colors, to layout?

Look no further than html.to.design!

What is html.to.design?

html.to.design is a powerful Figma plugin that converts any website into fully editable Figma designs. Import full webpages into Figma to leverage an existing website and kickstart design work, saving you hours of time that would otherwise be spent manually recreating each element from scratch.

How does it work?

1. Once you have a website to import…

Copy-paste the URL of the webpage(s) you want to import. You can stick to just the landing page or import all pages in bulk for the full site.

2. Before clicking “Import”…

Select the viewport and theme you need. Desktop in light mode? Mobile in dark? Import the same webpage with different setting combinations for a full overview of the range of designs.

3. You now have your webpage in Figma!

But the magic doesn’t stop there. The webpage is fully editable, so you can change copy, colors, and move sections around. Plus, text and color styles are automatically grabbed and created as local styles in Figma, so you have them readily available for future designs.

4. If you need to import a private page…

Use the html.to.design browser extension! Log in to the webpage you need, then click on the html.to.design extension icon. It will immediately start downloading an .h2d file which you can drag-and-drop into the Figma plugin.

What can I use html.to.design for?

html.to.design can help by automating tasks that are manual and time-consuming for designers, developers, UX writers and anyone using Figma. Here are just a few use cases:

  • Redesign an old website and import all its elements as your base.
  • Experiment with different copy and see exactly how it’ll appear on the site.
  • Import missing design assets for ongoing projects.
  • Get inspired by other websites and create benchmarks without a single screen capture.
  • Check your website’s visual accessibility in Figma.

What are the benefits of html.to.design?

Save time

The number one benefit of using html.to.design as part of your design workflow is the amount of time it saves. Recreating a site or building design elements from scratch can take hours. html.to.design allows you to use any website as a base, importing everything as fully editable layers that you can turn into components, rearrange and redesign into something else. This means that you save time to focus on other important aspects of your design project, such as improving the user experience or perfecting the layout.

No design skills required

html.to.design is also great for anyone who is just starting out with Figma, or developers who need design assets from an existing site. The simplicity of the plugin means you don’t need to be an experienced product designer to use it. Anyone can import a webpage to use as a base, or even as an aid when learning how to use Figma.

Great for collaboration

html.to.design is also great for collaboration and brainstorming sessions. When working on a redesign project, for example, you and your team can use the plugin to import the website you’re working on, to then take advantage of Figma’s collaboration features. It’s much easier to work on the old website in an editable format, so your design team can change or move elements around and collaborate in real time.

Get design assets easily

Even if you don’t need the full website, html.to.design can still be helpful. The plugin also allows you to extract design assets from any website, such as images and fonts. html.to.design will even create local Figma styles for you, automatically! Instead of manually downloading each asset, you can easily extract them in just a few clicks, bringing all the design assets you need directly into Figma. This makes it easier for you to access them when working on future designs.

Ready to give it a try?

So, if you’re looking for a powerful tool to help streamline your design workflow, look no further than html.to.design. It’s already loved by over 360,000 people worldwide!

In just a few clicks you’ll have the fully editable Figma layers you need to redesign an old website or kickstart a new one. Try it out with 12 free imports per month, and see for yourself the difference it can make in your design workflow.

Designing A Better Design Handoff File In Figma

Creating an effective handoff process from design to development is a critical step in any product development cycle. However, as any designer knows, it can be a nerve-wracking experience to send your carefully crafted design off to the dev team. It’s like waiting for a cake to bake — you can’t help but wonder how it will evolve in the oven and how it will taste when you take it out of the oven.

The relationship between designers and developers has always been a little rocky. Despite tools like Figma’s Inspect feature (which allows developers to inspect designs and potentially convert them to code in a more streamlined way), there are still many barriers between the two roles. Often, design details are hidden within even more detailed parts, making it difficult for developers to accurately interpret the designer’s intentions.

For instance, when designing an image, a designer might import an image, adjust its style, and call it done. More sophisticated designers might also wrap the image in a frame or auto layout so it better matches how developers will later convert it to code. But even then, many details could still be missing. The main problem here is that designers typically create their designs within a finite workspace (a frame with a specific width). In reality, however, the design elements will need to adapt to a variety of different environments, such as varying device sizes, window widths, screen resolutions, and other factors that can influence how the design is displayed. Therefore, developers will always come back with the following questions:

  • What should be the minimum/maximum width/height of the image?
  • What is its content style?
  • What effects need to be added?

As in reality, these are the details needed to be addressed.

Designers, let’s face the truth: there’s no perfect handoff.

Every developer works, thinks, and writes code differently, which means there is no such thing as the ideal handoff document. Instead, our focus should be on creating a non-perfect but still effective and usable handoff process.

In this article, we will explore how to create a design handoff document that attempts to strike the right balance between providing developers with the information they need while still allowing them the flexibility to bring the design to life in their own way.

How Can The Handoff Files Be improved?

1. Talk To Developers More Often

Design is often marked as complete once the design handoff file is created and the developers start transforming it into code. However, in reality, the design is only complete when the user finds the experience pleasant.

Therefore, crafting the design handoff file and having the developer help bring your design to the user is essentially another case study on top of the one you have already worked on. To make it perfect, just as you would talk to users, you also need to communicate with engineers — to better understand their needs, how they read your file, and perhaps even teach them a few key things about using Figma (if Figma is your primary design tool).

Here are a few tips you can teach your developers to make their lives easier when working with Figma:

Show Developers The Superpower Of The Inspect Panel

Figma’s Inspect feature allows developers to see the precise design style that you’ve used, which can greatly simplify the development process. Additionally, if you have a design library in place, Inspect will display the name of each component and style that you’ve used. This can be incredibly helpful for developers, especially if they’re working with a style guide, as they can use the component or style directly to match your design with ease.

In addition to encouraging developers to take advantage of the Inspect panel, it’s sometimes helpful to review your own design in a read-only view. This allows you to see precisely what the developers will see in the Inspect panel and ensures that components are named accurately, colors are properly linked to the design system, and other vital details are structured correctly.

Share With Developers The Way To Export Images/Icons

Handling image assets, including icons, illustrations, and images, is also an essential part of the handoff process, as the wrong format might result in a poor presentation in the production environment.

Be sure to align with your developers on how they would like you to handle the icons and images. It could either be the case where they would prefer you to export all images and icons in a single ZIP file and share it with them or the case where they would prefer to export the images and icons on their own. If it’s the latter, it’s important to explain in detail the correct way to export the images and icons so that they can handle the export process on their own!

Encourage Them To Use Figma’s Commenting Feature

It’s common for developers to have questions about the design during the handoff process. To make it easier for everyone involved, consider teaching them to leave comments directly in Figma instead of sending you a message. This way, the comments are visible to everyone and provide context for the issue at hand. Additional features, such as comment reactions and the “mark as resolved” button, further enable better interaction between team members and help everyone keep track of whether an issue has been addressed or not.

Leverage Cursor Chat

If you and the developers are both working within the same Figma file, you can also make use of the cursor chat feature to clarify any questions or issues that arise. This can be a fun and useful way to collaborate and ensure that everyone is on the same page.

Use Figma Audio Chat

If you need to discuss a complex issue in more detail, consider using Figma’s audio chat feature. This can be a quick and efficient way to clarify any questions or concerns arising during the development process.

It’s important to keep in mind that effective collaboration relies on good communication. Therefore, it’s crucial to talk to your developers regularly and understand their approach to reading and interpreting your designs, especially when you first start working with them. This sets the foundation for a productive and successful partnership.

2. Documenting Design Decisions For You And Developers

We have to be honest, the reason why building our design portfolios often takes a lot of time is the fact that we do not document every design decision along the way, and so we need to start building the case studies later by trying our best to fetch the design files and all the stuff we need.

I find it useful to document my decisions in Figma, not only just designs but, if appropriate, also competitor analysis, problem statements, and user journeys, and leave the links to these pages within the handoff file as well. The developer might not read it, but I often hear from the developers in my team that they like it as they can also dig into what the designers think while working on the design, and they can learn tips for building a product from us as well.

3. Don’t Just Leave The Design There. Add The Details

When it comes to design, details matter — just leaving the design “as is” won’t cut it. Adding details not only helps developers better understand the design, but it can also make their lives easier. Here are some tips for adding those crucial design details to your handoff.

Number The Frame/Flow If Possible

I really like the Figma handoff template that Luis Ouriach (Medium, Twitter) created. The numbering and title pattern makes it easy for developers to understand which screen belongs to which flow immediately. However, it can be complicated to update the design later as the numbering and title need to be manually updated.

Note: While there are plugins available (like, for example, Renamed), which can help with renaming multiple frames and layers all at once, this workflow can still be inconvenient when dealing with more complicated naming patterns. For instance, updating “1. Welcome → 2. Onboarding → 3. Homepage” into “1. Welcome → 2. Onboarding → 3. Sign up → 4. Homepage” can become quite a hassle. Therefore, one alternative approach is to break down the screens into different tickets or user journeys and assign a number that matches each ticket/user journey.

Name The Layers If Possible

We talked about numbering/naming the frames, but naming the layers is equally important! Imagine trying to navigate a Figma file cluttered with layers and labels like “Frame 3123,” “Rectangle 8,” and “Circle 35.” This can be confusing and time-consuming for both designers and developers, as they need to sift through numerous unnamed layers to identify the correct one.

Well-named layers facilitate better collaboration, as team members can quickly locate and comprehend the purpose of each element. This also helps ensure consistency and accuracy when translating designs into code.

If you search around in Figma, you will find a number of plugins that can help you with naming the layers in a more systematic way.

Add The Details For Interaction: Make Use Of Figma’s Section Feature

This might seem trivial, but I consider it important. Design details shouldn’t be something like “This design does X, and if you press that, it will do Y.” Instead, it’s crucial to include details like the hover state, initial state, max width/height, and the outcome of different use cases.

For this reason, I appreciate the new section feature that Figma has released. It allows me to have a big design at the top so that developers can see all of the design at once and then look at the section details for all the design and interaction details.

Make Use Of The Interactive Prototype And FigJam Features To Show The User Flow

Additionally, try to share with the developers how the design screens connect to one another. You can use the interactive prototype feature within Figma to connect the screens and make them move so that developers can understand the logic. Alternatively, you can use FigJam to connect the screens, allowing developers to see how everything is connected at a glance.

4. The Secret Weapon Is Adding Loom Video

Loom video is a lifesaver for us. You only need to record it once, and then you can share it with anyone interested in the details of your design. Therefore, I highly recommend making use of Loom! For every design handoff file, I always record a video to walk through the design. For more complicated designs, I will record a separate video specifically describing the details so that I don’t need to waste other people’s time if they’re not interested.

To attach the Loom video, I use the Loom plugin and place it right beside the handoff file. Developers can play it as many times as needed without even disturbing you, asking you more questions, and so on.

→ Download the Loom Embed Figma plugin

5. The Biggest Fear: Version Control

In an ideal world, the design would be completely finalized before developers start coding. But in reality, design is always subject to adjustments, even after development has already begun. That’s why version control is such an important topic.

Although Figma has a branching feature for enterprise customers to create new designs in a separate branch, I find it helpful to keep a few extra things in your design file.

Have A Single Source Of Truth

Always ensure that the developer handoff file you share with your team is the single source of truth for the latest design. If you make any changes, update the file directly, and keep the original as a duplicate for reference. This will prevent confusion and avoid pointing developers to different pages in Figma.

If you have access to the branching feature in Figma, it can be highly beneficial to utilize it to further streamline your workflow. When I need to update a handoff file that I have already shared with the developers, my typical process is to create a new branch in Figma first. Then I update the developer handoff file in that branch, send it to the relevant stakeholders for review, and finally merge it back into the original developer handoff file once everything is confirmed. This ensures that the link to the developer handoff file remains unchanged for the developers.

Changelogs/Future Plan

Include a changelog in the handoff file to help developers understand the latest changes made to the design.

Similarly to changelogs, if you already know of future plans to adjust the design, write them down somewhere in Figma so that the developers can understand what changes are to be expected.

6. Make Use Of Plugins

There are also a number of plugins to help you with creating your handoff:

  • EightShapes Specs
    EightShapes Specs creates specs for your design automatically with just one click.
    → Download the EightShapes Spec Figma plugin
  • Autoflow
    Autoflow allows you to connect the screens visually without using FigJam.
    → Download the Autoflow Figma plugin
  • Style Organizer
    Style Organizer allows you to make sure all of your styles are linked to your component/style so that developers won’t need to read hex code in any case.
    → Download the Style Organizer Figma plugin
7. The Ultimate Goal Is To Have A Design System

If you want to take things a step or two further, consider pushing your team to adopt a design system. This will enable the designs created in Figma to be more closely aligned with what developers expect in the code. You can match token names and name your layers/frames to align with how developers name their containers and match them in your design system.

Here are some of the benefits of using a design system:

  • Consistency
    A design system ensures a unified visual language across different platforms, resulting in a more consistent user experience.
  • Efficiency
    With a design system in place, designers and developers can reuse components and patterns, reducing the time spent on creating and updating individual elements.
  • Collaboration
    A design system facilitates better communication between designers and developers by establishing a shared language and understanding of components and their usage.

Note: If you would like to dig deeper into the topic of design systems, I recommend reading some of the Smashing Magazine articles on this topic.

Conclusion: Keep Improving The Non-perfect

Ultimately, as I mentioned at the beginning, there’s no one-size-fits-all approach to developer handoff, as it depends on various factors such as product design and the engineers we work with. However, what we can do is work closely with our engineers, communicate with them regularly, and collaborate to find solutions that make everyone’s lives easier. Just like our designs, the key to successful developer handoff is prioritizing good communication and collaboration.

Further Reading

  • Design Handoffs,” Interactive Design Foundation
    Design handoff is the process of handing over a finished design for implementation. It involves transferring a designer’s intent, knowledge, and specifications for a design and can include visual elements, user flows, interaction, animation, copy, responsive breakpoints, accessibility, and data validations.
  • A Comprehensive Guide to Executing The Perfect Design-to-Development Handoff,” Phase Mag
  • Design Handoff 101: How to handoff designs to developers,” Zeplin Blog
    Before we had tools like Figma, design handoff was a file-sharing nightmare for designers. When UI designs were ready for developers to start building, nothing could begin until designers manually added redlines to their latest local design file, saved it as a locked Sketch or Photoshop file or a PDF, and made sure developers were working on the correct file after every update. But those design tools completely changed the way teams collaborate around UI design — including the way design handoff happens. We’ve seen this in Zeplin’s own design handoff workflow and among thousands of our users, as those same top design tools help designers generate specs and share designs by simply sending a link.
  • How to communicate design to developers (checklist),” Nick Babich
  • A Front-End Developer’s Ode To Specifications,” Dmitriy Fabrikant, Smashing Magazine
    In the physical world, no one builds anything without detailed blueprints because people’s lives are on the line. In the digital world, the stakes just aren’t as high. It’s called “software” for a reason: when it hits you in the face, it doesn’t hurt as much. But, while the users’ lives might not be on the line, design blueprints (also called design specifications or specs) could mean the difference between a correctly implemented design that improves the user experience and satisfies customers and a confusing and inconsistent design that corrupts the user experience and displeases customers. (Editor’s Note: Before tools like Figma were on the rise, it was even more difficult for designers and developers to communicate and so tools such as Specctr — which this article mentions — were much needed. As of today, this article from 2014 is a bit of a trip into history, but it will also give you a fairly good idea of what design blueprints are and why they are so important in the designer-developer handoff process.)
  • Everything Developers Need To Know About Figma,” Jurn van Wissen, Smashing Magazine
    Unlike most design software, Figma is free and browser-based, so developers can easily access the full design files making the developer handoff process significantly smoother. This article teaches developers who have nothing but a basic understanding of design tools everything they need to know to work with Figma.
  • Penpot, An Open-Source Design Platform Made For Designers And Developers Alike,” Mikołaj Dobrucki, Smashing Magazine
    In the ever-evolving design tools landscape, it can be difficult to keep up with the latest and greatest. In this article, we’ll take a closer look at Penpot, the first design and prototyping tool that’s fully open-source and based on open web standards, making it an ideal choice for both designers and developers. (Editor’s Note: Today, it’s not always “There’s only Figma.” There are alternatives, and this article takes a good look at one of them — Penpot.)
  • The Best Handoff Is No Handoff,” Vitaly Friedman, Smashing Magazine
    Design handoffs are inefficient and painful. They cause frustration, friction, and a lot of back and forth. Can we avoid them altogether? Of course, we can! Let’s see how to do just that.

Practical Design Tips And Guidelines For Beginner Designers

As someone who has worked with beginner designers for decades, I have observed a certain common problem. They often get overwhelmed with design tasks such as creating presentations, a personal website, mocking up an app idea, or even making menus or cards. It’s not due to a lack of ability and skills but rather because of unfamiliarity with the rules and systems that graphic designers are trained to understand.

To fill this gap, I have compiled some simple principles that are quick and easy to learn yet can greatly enhance any design project. In this article, we’ll focus on the four key elements of good design. Here they are:

  1. Structure,
  2. Spacing,
  3. Rhythm,
  4. Contrast.

By learning these simple concepts, anyone should be able to create effective designs that not only look good but also cater to diverse audiences, including those with disabilities. Are you ready to learn the power of these fundamental design concepts? If yes, follow me along!

Structure

Structure helps people absorb information. You see the toolbar before you can discern any individual tool in it. You recognize a form before you can identify a specific field in it. The proper structure helps you access information faster. It’s the main menu, the selection screen, before you dive in.

Let’s review an example. Imagine you are making a registration page for a webinar. The webinar page should contain the following information:

  • The event title,
  • A short synopsis,
  • The price of admission,
  • The time and date of the event,
  • The name of the host,
  • A photo of the host,
  • A short bio for the host,
  • Some social links for the host,
  • A register button,
  • A call-out: “Join me live!”.

Ask yourself, if you had to group those things into several groups/buckets, what would those be? How would you name each group/bucket? Here are the groups I would make, and it might not be precisely how you would group the information, but that’s OK; the idea is to just give you a start!

Headline Host Logistics
Call-out Host name Event date
Title Host photo Time & duration
Synopsis Host bio Price
Social links Register button

Now that we have those buckets let’s continue: In what order do we want the audience to ingest them? My choice would be the headline first, then the logistics, with the big register button. I would keep the host information more as a detour, something optional to dive into if you would like to learn more.

Compare these two versions. Isn’t it easier to ingest the information in the one on the right?

As you can see, the structure of the information greatly influences your ability to absorb it. I will go one step further. I believe beauty is an artifact of well-organized information.

In short, don’t try to make something beautiful. Try to make something well-organized, and watch the beauty emerge!

“A well-designed, user-friendly information architecture ensures that users spend less time and effort searching for information and are successful in finding what they need. Key information-architecture tasks include identifying common features in content, forming groups of similar information objects, and linking documents to other documents on the same topic.”

— Anastasia Stefanuk, “The Importance of Information Architecture to UX Design
Spacing

Spacing in graphic design refers to the arrangement of elements within a layout. Proper spacing can make your designs more visually appealing and easier for viewers to comprehend. It helps direct attention, creates hierarchy, and improves legibility.

Let’s look at another example. On the left, all the gaps are the same. On the right, the spacing is influenced by the structure. The inner group elements are more tightly grouped, creating a visible “scaffolding” for the content.

In print, space is expensive because the paper is not free. This is why in the past, only “luxury magazines” could afford those beautiful margins and airy layouts. Nowadays, white space is virtually free. Luxury for everybody!

"White space is the area between design elements. It is also the space within individual design elements, including the space between typography glyphs (readable characters). Despite its name, white space does not need to be white. It can be any color, texture, pattern, or even a background image. White space is a great tool to balance design elements and better organize content to improve the visual communication experience.”

— Mads Soegaard, “The Power of White Space in Design

The Space Must Flow

Consistent spacing around elements gives visual harmony and unity to your work. It ensures a coherent look across all the components of your design. This is because irregular gaps draw the viewer’s attention away from the main focus, which is counterproductive. By maintaining even spacing between all objects, you allow the content to communicate without interference.

Here are some tips for creating a nice flowing space between and around elements.

Centering In A Box

Sometimes you need to put an image (like a logo, for example) inside a box. In this case, leave at least half its shortest dimension as a minimum margin. E.g., if the image is wide, use half its height as a minimum margin. If the image is tall, use half its width.

Vertically Centering Text

Most of the text mass sits between the baseline and the top of the lowercase letters — squint your eyes slightly, and you will see what I mean. When vertically centering text, a good rule of thumb is to center the lowercase letters’ height. In the designer speech, it is called the “x-height.” Some typefaces might need a tiny vertical adjustment, but we’re going for simple here.

“Why is it called ‘x’ height? Because the letter ‘x’ is the only letter in the alphabet that has all its terminals touch both the baseline and the meanline, with no extending points. Curved letters such as a, c, e, o, r, or s usually pass the font’s x-height slightly.”

— Sirine Matta, “What Are Cap Height and X Height in Typography?

Text In A Shape

When centering text inside a box (like a button or a label), you need to use the height of the lowercase letters to do the centering and make sure there is the same amount of space all around the text, not just above and below.

Centering Polygons

When centering a polygon, center the circle passing by each point instead of centering the box around the polygon. Once again, this will ensure the space around the shape is nice and uniform.

Nested Rounded Boxes

The rounded boxes are great. They don’t have sharp edges. They feel more human, more organic as if these digital shapes have been sanded down or eroded, like pebbles.

However, when putting a rounded box into another one, a mistake I have seen often is to use the same border-radius on the box outside and the box inside. If you do this, the band (represented here with a colored gradient) will not have a consistent width. Instead, you need to use proportional radius when doing such rounded box nesting.

Rhythm

Human eyes get bored quickly. To keep their interest, you need to give them something new to parse and explore at regular intervals. But you don’t want to make it too hard either, too “new” every time — just a gentle walk along an interesting variety of patterns.

Rhythm contributes to a smooth flow that engages and holds the viewer’s interest while communicating effectively. A visual rhythm also provides directional cues to guide readers through the content.

Well, if you think about it, your slide deck is the same thing, and so is your portfolio, your app onboarding flow, and so many other things. Create variety constrained by a simple set of rules. Start with just left and right, and maybe one day, try using thirds if you feel comfortable. It’s not hard, you’ll see!

“Rhythm in art and design refers to a relationship between elements that creates a sense of harmony. Rhythm can be seen in patterns, in relationships between colors and shapes, and in repetitions of lines and forms. Rhythms help to guide the viewer’s eye around a piece rather than allowing the eye to settle on a particular focal point.”

— “Rhythm,” part of the “Principles of Design” BBC series

Repetition Is Key To A Rhythm

Repetition is key to a rhythm. Reusing elements such as colors, shapes, and text styles can create a sense of unity and coherence within your designs, making them feel more organized and visually appealing. It also makes your choices more intentional.

For example, I call a book-end any element that can be repeated to signal the beginning and the end of something. Shapes and colors are a great way to express creativity and bring some life to your content! It helps to tell your audience that a topic has ended in a nice and subtle way.

The repetition of certain visual elements creates patterns that catch our eye, engage our brains, and hold our interest, which can make any design feel more dynamic, expressive, and aesthetically pleasing. Find the guitar riff of your content; find the chorus!

Here is a meta example. These are the elements I reused throughout this article to create a sense of unity between all the illustrations. I had to pick some colors, decide on a style for the arrows, and make many more design choices. A bigger version of this is usually called a design system.

Reading Rhythm

When you are feeding words into people’s retinas, you need to find the right compromise between the size of the text chunks and the effort required to move the eye to the next line. That sounds mechanical because it kind of is. Too long a line, and it is hard to locate the beginning of the next line. Too short a line, and your reading gets interrupted too often for an eye carriage return.

I usually find that between eight and twelve words per line are a good goal for the main text block. Just count the words in a couple of sentences — no need to be too strict. Also, keep in mind that it’s a good rule for English, but other languages might have different sweet spots. For a sidebar, a caption, or something narrower, you can aim for five to six words.

Try reading some text in the example. You will see how much easier it is for your eyes to follow when the lines are not too long!

Before going further, I’d like to quote Gary Provost, an American writer and writing instructor, whose words on rhythm are spot-on:

“This sentence has five words. Here are five more words. Five-word sentences are fine. But several together become monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It’s like a stuck record. The ear demands some variety. Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasant rhythm, a lilt, a harmony. I use short sentences. And I use sentences of medium length. And sometimes, when I am certain the reader is rested, I will engage him with a sentence of considerable length, a sentence that burns with energy and builds with all the impetus of a crescendo, the roll of the drums, the crash of the cymbals–sounds that say listen to this, it is important.”

Gary Provost

Not So Justified

Justified text appears aligned on both sides. This is a very desirable attribute, but it’s very hard for it to happen naturally. Editing and design tools all do a pretty bad job of creating justified text that looks good. Instead, you will need to fine-tune letter spacing, word spacing, use good hyphenation, and sometimes even rewrite your text. Your job is to avoid text gaps that will hurt the pace of reading.

So, unless you spend the time to do the work manually, I suggest that you use left-aligned text instead. The price to pay for this shiny right edge is not worth it!

Contrast

Contrast refers to the use of differences (in color, size, shape, weight, direction, or texture) to attract attention, create hierarchy, enhance readability, and even evoke emotions like calm or energy. If a rhythm is the beat, contrast is the melody.

Mind The Low Contrast

To ensure your content is accessible to everybody, including people with visual impairments, text on a colored background should have enough contrast to be easily readable. There are plenty of apps or plugins that can calculate that for you (I’ve included a few references at the end of the article, check Further Reading). For now, all you really need to know is that a contrast ratio of 4.5 or higher is recommended.

Text Size Contrast

Text size can be used as a very convenient tool for structuring information. A well-structured text can significantly lower the effort required for the viewer to ingest the information. The contrast between each heading level should be high enough for the structure to be visible.

If possible, a consistent ratio between different header levels usually looks more elegant. In general, the weight of the text (bold, regular, light) decreases as the level increases.

Text Weight Contrast

Sometimes, the typeface you are using comes with many weights, like medium, semi-bold, light, and so on. In those cases, it’s usually recommended to skip one weight when pairing them to create enough contrast between them.

Avoid Unintentional Contrast

Combining text with an icon can help comprehension, improve visual appeal, or increase the importance of an element. However, always make sure the thickness of the text matches the thickness of the icon. That will make it feel as if it were part of the typeface. It does look more elegant, but it also saves your audience from even thinking about it, which is a recurring theme in graphic design. Good design is invisible!

“Although we can’t help but notice poor design, good design is much harder to detect. We’d go even further: good design is invisible. This raises a logical question: what, then, is good design? Is it when form follows function? Is it the perfect arrangement of design elements on a modernist grid? Is it 24-point headings and 8-point body text? Is it a solid set of principles that you work to every time on every job? The answer might surprise you — good design is all of this. And none of it.”

— Damien Stanyer, “Why is good design invisible?
Conclusion

That might have surprised you, but creating and iterating on designs isn’t about making things pretty. Your job as a designer is to lower the cognitive load for people to ingest the information, create a rhythm that keeps your viewer engaged, and make sure everybody can access the content.

“The most important advice I would give to emerging designers — even those that have already won awards — is that learning never stops. You can always improve your craft, whether you’ve won one award or twenty. Remember, you’re never going to be an expert in everything. I have worked on so many things, from book design to exhibition design, hospitality, tech, and everything in between — and I’ve taken something new from the experience every time. Now I’m the executive creative director at a global agency, and I still find myself learning something new every day.”

— Lisa Smith, “Learning Never Stops

Next time you are faced with the need to design something, I hope those tips will make you feel a little bit more confident and comfortable! And remember, everybody can be a designer, but every designer has a lot to learn and to keep learning. It’s a process that never stops.

Further Reading

I created a list of additional resources about the topics that I have tried to cover briefly so far. (And if you think this list is missing something of value, please do leave a comment at the end of the article. Thank you! 💖)

The Best Handoff Is No Handoff

Many companies organize their workflows around projects and departments. Especially in large companies, work often travels from one place to another, often getting stuck between emails and Slack messages, and often “refined” on its never-ending journey between design and engineering teams.

This inevitably brings up the question about the design hand-off: that magical moment when designers are done with their work and developer can take over. Most importantly, that’s where designers must stop working, and move on to other work — unless the scope changes or late adjustments creep their way in.

The “No Handoff” Method

Last week, I stumbled upon an interesting article about the no-handoff method, in which Shamsi Brinn shows an alternative to typical design hand-offs. Shandi shows a fluid model where product and engineering teams work on the product iteratively all the time, with functional prototyping being the central method of working together.

With the process, the working prototype is the living spec of the project and a shared language for the team. No more translation is needed because everyone works on the same prototype. The problem space and the solution space are explored by designers and engineers collaboratively, and the entire workflow is organized around the product, rather than company’s internal structure.

The “Hot Potato” Process

This reminded me of the Hot Potato Process by Dan Mall and Brad Frost, where ideas are passed quickly back and forth from designer to developer and back to designer then back to developer for the entirety of a product creation cycle — similar to throwing hot potato back and forth (audio, video).

From my personal experience, I can only testify that the best collaboration doesn’t have any handoffs between teams. There, work flows seamlessly from design to engineering and back — with both teams working simultaneously, and discussing issues as they occur, during the entire product lifecycle.

There are phases of independent work for sure, but there are also plenty of overlaps for collaborative work, which are opportunities to discuss the progress, explore what is and what isn’t viable and hence avoid lurking issues down the line.

Create As Many Overlaps As Possible

Of course, the process works well for small product teams. But what if a part of the product is outsourced to an external agency? Many companies choose the route of extensive documentation — almost to the last pixel, along with a brief explaining the strategy and the thinking behind the design.

This isn’t enough though. Design decisions have to be informed by technical implementations and its limitations. There is no universal language around design patterns and their interaction design either. And not every design detail can be implemented in an accessible and performant way. This is why beautiful mock-ups turn into painfully slow and inaccessible monsters.

We can reduce the risks of hand-offs with dedicated overlaps between designers and engineering teams. With regular check-ins. Weekly reviews. Shared channels for communications. Visibility into the work done. Usability testing of functional prototypes and small but regular design revisions.

Design is a team work. It involves everybody who contributes to the website — from customer service and marketing to developers and designers. Any overlaps you can create will benefit the teams, their productivity, and ultimately your users.

Wrapping Up

So we want to move away from handoffs. But how to convince teams to change their workflow entirely? With a small experiment on a small project. Pick a project where you could test the waters and suggest a collaborative process. Ask what designers could do while developers are busy. Ask what developers could do while designers iterate. And enable both teams to work together, at the same time.

Ultimately, the success depends on one simple thing: just how well the teams work together. And if they can’t collaborate particularly well, chances are high that a design hand-off won’t make it any better, and a major change in the team culture will need to happen first.

You can find more details on design patterns and UX in the video library on Smart Interface Design Patterns 🍣 — with a live UX training that’s coming up in September this year.

The Problem with Web Design Trends: Why Following Them Blindly Can Hurt Your Business

This post is originally published on Designmodo: The Problem with Web Design Trends: Why Following Them Blindly Can Hurt Your Business

Web design trends come and go. Some trends stick around for a while, while others quickly fade into obscurity. As a business owner or web developer, jumping on the latest trend bandwagon is tempting. However, blindly following web design trends …

For more information please contact Designmodo

How To Build Strong Customer Relationships For User Research

Nurturing connections with your customers is one of the most effective ways to gain valuable insight into their experiences with your product and make informed decisions that fuel growth and success.

A really great way to build customer relationships is by regularly involving them in user research. However, getting customers involved in user research in the first place can be challenging because they might not understand what you want to do with them, and they’re busy.

Building customer relationships is not always straightforward. It takes work and investment.

In this article, we will go through various ways that product teams can utilize to build relationships with customers.

The Importance Of Customer Relationships

If the growth in the customer relationship management (CRM) software market is any indication, businesses see the value in relationship-building with their customers. Gartner estimates that the CRM market will grow over 14% through 2025. In 2021, Gartner reported that the CRM market share had grown to $69 billion worldwide.

A CRM tool enables businesses to communicate with their customers in a scalable way. However, true customer relationship management goes beyond a software solution. It involves person-to-person interaction and building trust. Business experts recommend viewing customer relationships as long-term relationships. While it’s important to gain new customers, it’s vital to nurture relationships with your current customers. CRM tools have robust functions to engage customers, from sales and marketing to customer service.

As Forbes describes, customer loyalty and retention affect a company’s revenue. A 5% increase in customer retention can produce more than a 25% increase in profit.

While it is important to engage with customers in the sales and service stages (e.g., when they need help), engaging with them while they’re using the product is also essential.

More specifically, after a customer has bought your product or service, do you only want to talk to them when they’re having problems?

One way to show that you’re invested in your customers is to bring them into the product development process through user research, which enables them to provide their input and shape the future of the products that they’re using.

By taking advantage of user research techniques such as user interviews, surveys, usability testing, and focus groups, you can uncover valuable data that will help you refine and improve your product while still keeping it aligned with customer expectations. You can ask your customers for feedback on specific aspects of the product and learn how to make it better.

However, in my experience as a user researcher in business-to-business (B2B) companies, I’ve seen that it can be challenging to involve customers in user research if you haven’t done the work upfront to build a relationship with them. Email invitations from CRM tools to participate in user research often go unopened if additional work hasn’t been done to nurture that relationship.

A user research session typically involves a participant having a 1:1 meeting with the researcher. It’s challenging enough to get people to respond to a quick survey, much less take the time to meet with a person face-to-face. Studies have been done on why responses to surveys have declined over the years. One reason cited is trust: participants distrust the organization or feel that there’s a lack of empathy.

I’d like to share some tips and tricks from my experience that have helped me nurture customer relationships and build better products that go beyond using the software.

How To Start Building Customer Relationships

While CRM software does an excellent job of managing customer relationships, it lacks personality because it takes away that personal approach we’ve relied on for decades before the advent of the software.

However, there are many benefits of using CRM software that help make sure the customers have a better experience with your company. For instance, CRM software can streamline conversations so the marketing and product teams don’t ask the same person the same questions.

I think there’s a middle ground that we can find somewhere. The personal touch still matters because it puts a face to your business, creates emotional bonds, gives you an edge, encourages loyalty, and fosters trust.

To enable a personal touch and be able to elicit product feedback from customers, there are a few different techniques you can try out. Let’s discuss them below.

Technique #1: Find Champions Within Your Company

One way to start building a customer relationship is to find other people at your company who already work with the type of customer you are interested in learning from. Their role will likely be different than yours. They might work in sales or customer success. They might not have heard about user research or understand why it’s actually an important way to deepen a customer relationship. Thus, it might seem daunting to find people who are supportive of user research, especially if your job is remote, where there are no casual water cooler conversations.

I recommend starting with your colleagues who work closely with you and helping them understand what you’re trying to accomplish. They might have people and resources they can identify for you that would be a good person to connect with. Don’t be afraid to ask for a personal introduction.

When I first started in my first researcher role, I found it difficult to advocate for the value of the work I did. I was the first researcher my team had ever had before. We had an old-school product manager who thought that the client conversations he had meant that we didn’t need to do additional research. I sought advice from my teammates and read various case studies to look for ways to communicate the value of my work.

Tomer Sharon, the author of It’s Our Research: Getting Stakeholder Buy-in for User Experience Research Projects, writes that “when you work with stakeholders, not on them, everyone stands to gain.” In user research, stakeholders are those that have a stake in the outcomes of your research. They’re the ones who can act upon your research findings.

A common issue, Sharon writes in his book, is the following:

“Researchers plan a study with their stakeholders, then desert them and run the study by themselves, only to come back to stakeholders a month later expecting them to fix usability problems, change the product roadmaps, or stop a release of a major redesign.”

As much as we want it to, the world does not get put on hold while we conduct our research. The other people on our teams have their own work they’re more worried about than yours. That’s why it’s important to regularly engage your stakeholders throughout the user research process.

I started trying out some of the tips from Sharon’s book along with advice from senior researchers at my company and found a huge change in attitude with my teammates.

When planning a research project, involve the right people in the planning of it. A good best practice is to have people from product management, software development, design, and sales there.

  • Product management knows the business goals and priorities. They can help identify the right audience for the product. Product managers also lead development timelines.
  • Software developers are the ones most influenced by the research results because they have to make code changes based on the findings.
  • Design is a user researcher’s natural partner in getting things right, and they tend to be great at capturing critical observations.
  • Sales are in close relationships with customers and might be critical to recruitment.

Finding out what your stakeholders want to know AND what they plan to do with the results are crucial aspects of creating an effective research strategy because then your research is more likely to provide value and be implemented. At the time, one of my senior research colleagues told me to “get three questions from your stakeholders that they want to be answered.” I’ve found that to be a good rule of thumb when trying to gather effective research questions.

In general, don’t expect that your stakeholders will initiate research planning meetings. As the researcher, that’s something you should own. It’s all about working together as a team. Sharon suggests having high-level research planning meetings with a senior product and/or engineering manager once a month or quarter. He suggests you should have more tactical research planning and updates with a product manager or engineering team lead every week or two. In short, high-level meetings with senior leadership, tactical with the people doing the day-to-day work.

Just as you initiate meetings with them, you should attend the meetings they hold, such as weekly product management and engineering leadership meetings, so that you have a better idea of where your work can fit in.

I learned that continuous involvement in research = continuous buy-in. Bring in your teammates at the beginning of your research planning. Involve them in all aspects of it. As Sharon wrote, don’t just involve them in planning. I like to bring my stakeholders into my actual research sessions. I put them to work, too. I have them take notes, and then we discuss what we observed afterward. That way, nothing is a surprise to them.

Another effective tactic I first read in Sharon’s book is to keep research studies small. The larger and more ambitious the study, the longer it’s going to take. By the time you’ve completed the research project, the team might have moved on to something else. Thus, it’s a good idea to conduct research in a smaller, more agile way.

When you present your research findings to your stakeholders, don’t give them a data dump. As tempting as it might be to show everything you did, they don’t care. They want to know what you found, and if you answered the questions they wanted to know. Your presentation is just the tip of the iceberg. My advisor in college told me that as I was preparing my senior thesis, it crushed my soul at the time. But she was right. To be an effective storyteller, you have to know what to leave out.

By bringing your colleagues into the research process, you’re giving them firsthand experience of what you’re doing, and you’re giving them ownership of the research itself.

When they’re invested in the outcomes of the research, they understand the need to involve customers in the research. They’ll start to see the value of research. A product manager I worked with started thinking that doing user research would help sell the product to new and existing customers because of how we were able to showcase our redesigned product.

All in all, building customer relationships also involves building internal company relationships. One way to do that is to bring your colleagues directly into the research process.

Once you identify the people who can help you build customer relationships, you’ll want to get specific about your request from them.

Technique #2: Get Specific On What You Want To Request

A general request of, “I want to talk to this customer about this,” without the details of what you’re planning to do, will confuse the person you’re asking to assist you and thus might appear reluctant to introduce their contact to you especially if you haven’t involved them in your research because you’re still new or they’re not on your immediate team.

Sometimes you have to go outside of your immediate network to find colleagues who can connect you with the right participants.

I don’t advise trying to reach out to someone at your company without first developing your research plan. A research plan should include the title of the research project, who’s involved with the project, the date last updated, the background of how the study came about, what goals the study should address, the research questions the project should answer, details about the research method, the target user and the number of participants needed, the schedule, and the script.

Once you have a research plan, you should have a clear understanding of what kind of participants you need for your research project. If you need to talk to someone outside of your immediate team that you don’t know very well, you probably don’t want to show them your whole research plan since that’s going to be a lot for someone who isn’t familiar with research to take in. I suggest pulling out the following details from your plan:

  • Target user: Who we’re looking to connect with;
  • Goal: What’s the goal of the research study;
  • Research questions: We plan to ask them these sorts of questions;
  • Time commitment: How much time you are asking for.

Getting clear on who you want to talk to and why will help your colleague know whether they can help you. Knowing details about what you’re doing with the customer and how long the time commitment is will help them understand how to introduce you to the customer.

Once you’ve gotten clear on those details, you can also try to share them on internal messaging boards such as Slack. For instance, I’ve made a “one-pager,” or a one-page flier that includes these details and posted them on Slack channels where I can find people with the customer connections I need. For example, our customer success managers have a special Slack channel, so I’ve posted it there.

When making a one-pager, think about making it as actionable and consumable as possible. I made the following sample one-pager in Google Slides. I used the basic “title and body” layout to write the title and three bullet points. Then I used the “Explore” feature to make the layout look more engaging.

One-pagers like this can be used in other avenues besides Slack. If you’re meeting directly with someone, you can show them the one-pager so they can read it and have a visual to go along with what you’re asking. If a product manager is presenting to customers, you could ask them to include the one-pager at the end of their presentation as a call to action.

Getting specific on what you’re requesting from your colleagues also has the benefit of helping you hone in on your search for customers because it forces you to articulate what you’re looking for.

These first two techniques have looked at how to find internal advocates and assistance to connect with customers. The other tactics involve ways to look externally and find customers directly.

Technique #3: Discover Where Users Spend Their Time

You want to try to understand where your customers spend their time. If you don’t know that, how can you expect to reach them? This might mean taking a look at your web analytics to see where people are coming from before they land on your website or product. It might also mean conducting some user research to ask people where they get their information or what kinds of websites and apps they use on a daily basis. This might be hard to do if you have no one to talk to, but once you do, it’s a strategy you can implement to build out your contact list even more.

One of the most reliable places to connect to your product users is to find a user group or online community specific to your industry or product. For example, if you make accounting software, there’s a good chance that there’s an online community for people who use QuickBooks. You can go to the forums dedicated to QuickBooks and see what conversations people are having. You might try to directly message people who’ve made helpful comments or try posting on the forum itself. You can also get insights into what these users are thinking and feeling about your product or industry and keep a pulse on what product users are talking about. In addition, use the community forums as a method to do some light research.

The benefit of user groups and online communities is that you can get very specific with who you’re talking.

I took advantage of the IBM Community forum to engage with our customers in the hopes of getting them to sign up for user research sessions. In the example post below, I included a screenshot of the homepage for one of our products and asked what the forum members thought about it. You can view the post here and see other questions we asked here.

I got a relatively high response rate on this post because it had a visual for them to respond to and was related to a commonly used feature. In certain posts, I included a link to a sign-up page or a survey that participants could take to get extra raffle tickets.

The raffle tickets were part of how we created an entire event experience on the forum itself to encourage engagement. If you’d like to read more about how to run an entire event on a forum, check out my blog post about it.

You could try doing something similar by posting an image from your product, asking for feedback, and giving a link to sign up to participate in research. If applicable, you could mention the monetary incentive they might receive by participating.

Engaging with customers on a forum is also a nice way to do some continuous user research and get feedback outside of individual research projects.

It’s hard to write content in forums that doesn’t sound spammy, so it might take some trial and error to figure out what kind of messaging will work for your particular target user group.

To strengthen the personal touch, there are other strategies you can use. We will discuss them below.

Technique #4: Attend Trade Shows And Conferences

Trade shows and conferences are great places to meet potential customers. They give you that face-to-face interaction you miss with online communications. A list of upcoming trade shows and conferences can be found by searching online, on social media, or by finding out what events your marketing team plans to go to.

Once you’re at the trade show or conference, be sure to stop by the booths of companies that might be potential customers. Introduce yourself and let them know that you do user research. It’s also a good idea to wear a name tag that has your name and the company you work for. These name tags make it easy for people to find you and start a conversation.

Attending talks and sessions that are relevant to your product or industry is also extremely helpful. I’ve had amazing luck just walking up to a conference speaker after they give a presentation and asking them if they’d like to join our research program. After watching someone give a talk, you know if they might be an articulate participant.

For instance, I was at a user group conference and saw someone give a really helpful presentation on the product I worked on. I knew I’d love to work with him to improve our product, so I introduced myself and asked if he’d be interested in giving product feedback. We exchanged contact information, and he became very engaged in future research activities.

The next time I attended the conference, he told his colleagues about how much he enjoyed participating in research activities and how much that meant to him. It encouraged more interest in our research program.

As you start attracting people to do research with you, you’ll want to find a way to organize and manage your relationship with them.

Technique #5: Build Your Own Participant Panel

It might sound daunting, but let’s start small. When you think of participant panels, you might think you need at least a thousand people. While that is a great goal to shoot for, having that many is not necessary to start running research studies.

Believe it or not, you have a participant panel when you have connected with just one customer. That customer can connect you with other people at their company or in your network.

Be sure to check your company’s policies around storing personal information and what tools you can use to do that. You don’t want to be in violation of any internal policies.

You might consider using your company’s CRM tool to manage your participant panel, or you might use panel management software, that’s more specific for user research use cases. Panel management software differs from CRM software in that there are dedicated functions to help you screen participants and schedule research sessions. Evaluate what tools you have available and see what your needs are.

For example, your company might use Salesforce as its CRM to manage customer relationships. Salesforce works really well as a marketing, sales, and support tool. It aggregates data from various sources, allowing businesses to have a central source of truth about their customers, giving a complete picture of what’s happening with a customer.

That said, Salesforce does not fully meet the needs of user researchers. While it’s very helpful to see information such as customer browsing behavior, demographic information, and support ticket history, it doesn’t necessarily help a user researcher connect with that participant for a focused research session.

In order to properly run a research study, you have to find the right participants, schedule sessions with them, and, if applicable, have them sign non-disclosure agreements (NDAs) and compensate them for their time. Technically, something like this could be done in a CRM tool, but it would involve more steps than a tool designed to run research. It might be challenging to get your research team to adopt such a complex workflow.

A dedicated panel management tool like User Interviews or Great Question works with CRM software by pulling the relevant data (such as name, job title, demographic information, employment type, and so on) into its platform and allows you to focus on running your research. These tools are designed to have a database of participants you can invite to participate in a study. If you need to send them a screener survey, that capability is built into the tool. You’re able to set a calendar with your availability, and the participant can book a time with you. Document signing and consent forms are built into the process, so you don’t have to worry about data compliance. After a session has been completed, you can distribute monetary incentives to the participants to thank them for their time.

While using a panel management tool might be simpler than a CRM tool for conducting research, it does add another tool to the mix, so that’s where it’s important to evaluate your team’s needs. When there’s another tool with customer data, you’ll have to update two datasets. Does the easier user experience outweigh the possible difficulties of having another dataset? If you’re able to integrate the CRM software with the panel management tool, then you don’t have to worry about keeping data up to date in multiple places.

Once you’ve got a panel, you’ll start having access to potential participants without having to go through gatekeepers or spend time recruiting people.

However, the access to participants only lasts if you maintain those relationships. You’re not done after you recruit them the first time.

Technique #6: Take The Time To Build Relationships

Getting to the point where you have easy access to customers can take a lot of work. But just as it is with any relationship, you still need to put in work to maintain customer relationships.

When you get busy with your job, it can be easy to forget the personal touches. You might start reaching out to your customers only when you want to get their feedback on the product. That can start to feel very one-sided. It’s about taking the time to connect and learn about them as people.

Be sure to ask them how they’re doing, what they’re working on, and what their weekend was like. Share something about yourself. People love to connect with others around common interests and values. Also, send thank you notes, too! It’s just as crucial in user research as in any other field.

In my practice, I like to send out newsletters to the customers I work with to update them on how we used their feedback to improve the product. Since the value to the customer is seeing the product improve, I tell them about the takeaways from research projects and how we plan to address them.

Remember that you’re playing the long game here. Relationships take time to build, so it requires perseverance and patience.

Technique #7: Be Patient And Track Your Impact

Building relationships with customers is key to success in user research. However, it takes time. You might not get immediate results, but if you’re patient and keep at it, you’ll eventually find the people you need to talk to.

You might be surprised that the work you’ve put in now will pay off in huge ways you might not have anticipated six months down the line or even a year or more.

It can take time to get buy-in. The important thing is to keep going!

Be sure to recognize your wins: big or small. Keep track of them and remind yourself of them when you get discouraged.

  • Did someone invite you to talk about your customer feedback program at one of their meetings? Yay! That’s huge!
  • Has one of your stakeholders who’s been difficult to work with in the past asked you for your opinion on something? Congrats!
  • Did someone sign up for a research study from a community forum post? Amazing work!

It may not seem like much at this moment, but over time it truly adds up to a meaningful impact.

Final Thoughts

Building customer relationships is vital to user research. These steps will help you get started, but you’ll have to adapt the method to your specific needs.

The most important thing is to be patient and to take the time to connect with people. User research is all about relationships!

Better ROI For Your Digital Products: Why Continuous Research Is Key

This article is a sponsored by Maze

Although you might be able to map out the development of a new product with a definitive start and end date, there really is no end point.

The most successful digital products are the ones continually being debugged, updated and enhanced. By extension, the most successful brands are ones that draw valuable lessons from the development of one product and apply it to other products as well as the organization as a whole.

Today, I’m going to dig into Maze’s Continuous Research Report: Trends to Watch in 2023. Developed in partnership with Atlassian, the report presents data from over 600 product professionals and explores how product teams conduct research to inform their decision-making.

In the following post, we’re going to explore the current state of product research, the trends shaping the future of the industry and the benefits of continuous discovery and research. Then we’ll look at some tips for making continuous discovery part of your process going forward.

The Current State of Product Research

A product doesn’t become successful simply because a great product team builds it and a savvy marketing team promotes it. A digital product has to be well-built, align with user expectations, and effectively solve their problems. It also needs to evolve over time as customer needs evolve.

This is why user input is so critical in the grand scheme of product development.

More and more organizations understand how valuable this data is, with 83% of Maze’s survey respondents agreeing that research should be conducted at every stage of product development.

However, data suggests that only 36% of digital product teams perform research post-launch. In addition, 60% connect with customers only once a month (if that), despite making product-related decisions on a daily basis.

Gathering user input during both the Discovery and Delivery phases is essential. Without user input early on, product teams end up building products based on generalizations, assumptions, and biases. Concrete data and feedback, on the other hand, provide product professionals with a clearer roadmap of what to build along with validation that what they’re building is on the right track.

Here’s what the continuous product discovery process looks like:

According to the report, 78% of respondents believe that their company isn’t doing enough research or could be doing it more frequently. When asked what’s keeping them from doing continuous discovery and research or doing enough of it, limitations related to time, budget, respondent recruitment and tooling were the most common reasons.

The good news is that companies are starting to involve users continuously throughout the product development process. One way they’re doing this is by democratizing research. In addition to researchers, designers (69%), product managers (54%), marketers (28%), and engineers (10%) conduct research at their companies.

By empowering every team to engage in research, product organizations can uncover customer needs and motivation and constantly improve their product as they build.

While there are still some challenges holding product teams back, continuous discovery and research is becoming a more established practice.

The Benefits of Doing Continuous Discovery and Research for Your Digital Products

We’ve all felt the strain that the above limitations can put on our work. To relieve that strain, we often look for ways to cut corners or to do without, at least for the time being.

But can you afford to cut corners when it comes to product research?

Let’s have a look at some of the things that happen when you perform continuous research on your product. Then you can decide if this is something you can afford to cut short or limit resources to.

1. Eliminate Assumptions in Product Decision-making

Rachel Lynch, the Research Manager for Productboard, had this to say about continuous discovery:

“Many research resources are being put into the design process, problem discovery and solution testing, but not so much into post-launch reviews. I think that’s a huge gap and a missed opportunity because you only know if something will work once you launch it. You should be using those same research tactics to try and figure out if you were successful once something has gone live.”

Data collection in the first stage of the product development journey can reveal a lot about your target users along with their needs, expectations and hesitations. It also helps you to uncover what you should be building.

However, a product is never really done. Because of this, there’s always more to discover about your product and users, which is why the process needs to extend throughout the entire development lifecycle.

The only way to ensure that you’re building the best products and experiences is to perform continuous research and gather meaningful insights from real users long after your product launches.

2. Keep Products in Sync with User Needs

According to Xiangyi Tang, the Head of User Research over at Pitch, continuous research allows products to remain valuable and useful to users over time:

“Product organizations need to truly understand their customers to be competitive. With continuous research, they can constantly course-correct to work on the right problem and provide the right solution.”

Users change over time. Brands change over time. So too do the products they build. It’s natural for user needs and desires to evolve. In some cases, it happens because of a shift in how the industry operates. In others, it’s because the industry or economy as a whole has been disrupted.

Take product organizations that build software for restaurants, for instance. The restaurant industry has gone through major changes over the past few years. If product organizations weren’t regularly reviewing market changes or conducting research with users, they might not have known how to keep their restaurant software products up to date or have been able to pivot sooner than the competition.

Continuous research is basically a form of active listening. By paying attention to how things are changing all around you and your product, you can proactively develop new features, pivot your product or develop new ones entirely in response to what you’re “hearing”.

3. Validate Your Concepts Before Development

A minimum viable product (MVP) is a scaled-back version of a product. Developers initially build it with just the core features that users need in order to use and derive value from it. It’s through the process of continuous research that product teams are able to validate and refine their product ideas pre-development.

Because of this methodical and iterative approach, an MVP greatly reduces how much time and money is spent developing a digital product. For instance, fixing an error after a product launch can cost up to 100 times more than if it’s caught during development.

Productboard has an illustration that perfectly sums up how a lower monetary investment in a product keeps risks low. And how the effort to recover from and rebuild a faulty product remains low as well.

This is one of the strongest arguments for doing research. You can save yourself so much wasted time and energy during initial product builds by focusing on developing core features that make the product usable and useful. Continuous research and testing will then allow you to naturally evolve a product into its best self.

4. Create More Satisfying User Experiences

With ongoing research, you can gather real-time insights and test new features that allow users to have more meaningful and valuable interactions with your product. This in turn translates to greater company success. Basing decisions on real user data — at the product, team and corporate level — ensures that customers’ needs are always at the center of what you’re building.

According to respondents, product research has a positive impact on:

  • Customer satisfaction score (57%);
  • Product/feature adoption (55%);
  • Active users (46%);
  • Revenue/profitability (42%).

Products informed by user input lead to greater customer satisfaction. Not only that, they hold onto their users for longer. This alone is good for boosting user satisfaction through product development. Long-term data gathered from the same user set can be much more meaningful than data from a steady stream of new and random users.

It’s also important to consider that satisfied long-time users cost much less to manage and maintain. This means you won’t have to spend as much time or effort on marketing to attract as many new customers.

Also, product bugs and security breaches are less likely to occur when you’re keeping a close eye on your product. This results in less money spent on putting out fires and dealing with PR fiascos.

5. Make More Effective Decisions Company-Wide

Data is valuable for organizations and their product teams.

According to Maze’s respondents, 74% of product professionals believe research is effective or partially effective in determining decision-making at their organizations, and 14% say it's highly effective.

In particular, the report shows that product teams who conduct research more often (weekly or daily) report more effective decision-making than those who conduct research less often (quarterly or yearly).

Respondents also reported that this data can enable different types of decision-making. For instance:

  • 42% of product professionals leverage data to inform all of their product decision-making.
  • 49% of organizations use research findings to make strategic decisions.
  • 60% of product professionals say that recommendations from research findings inspire new product opportunities.

It appears as though the research conducted on one product isn’t just valuable for the product in question but for the organization as a whole when it comes to making strategic decisions. And it's even more valuable when it comes to inspiring new products.

Continuous research can have a positive impact on more than just product and executive leadership teams. Lucy Denton, the Head of Design at Dovetail, says:

“Today, research is really focused on understanding the user experience, which directly fits into the experience design of the product. It would be interesting to see how companies evolve to focus more on the customer in other functions like marketing, sales or customer support. They all talk to customers and need to understand the customers to do their job.”

By making this data readily available to the organization at large, imagine what it could do for sales, marketing and customer service. An ongoing stream of real user feedback could improve every aspect of the company.

How to Make Continuous Discovery Part of Your Process

In a recent interview, product discovery coach Teresa Torres explains how and why a continuous discovery mindset in product development is important today:

“Historically, businesses made discovery decisions by just sitting in a room and thinking ‘what should we build?’ Over the last 20 years, we've seen an evolution toward including the customer a lot more in the process.”

Human-centered design is what we’re all striving for today. The only way to ensure that products continue to meet and exceed user expectations is to gather continual feedback from them and test new hypotheses and concepts on them.

If you want to make continuous discovery part of your process, here are some tips to get you started:

Tip #1: Schedule Time for It

If you make time for it, then you’ll have no excuse not to do it. As for how much time you should devote to continuous discovery, the more frequently it’s done, the better.

According to Maze’s analysis, product teams doing research on a monthly or more frequent basis rated it as more effective than those who only did it quarterly or yearly. Teresa Torres suggests that weekly is best:

“At a minimum, weekly touchpoints with customers by the team building the product, where they're conducting small research activities in pursuit of a desired product outcome.”

Block off a weekly recurring time for discovery. You can start with as little as 30 minutes before increasing the frequency of customer interactions.

Tip #2: Make It Part of Your Project Proposal

Research is a marathon that extends across the entire product life cycle. If you’re not in the habit of considering post-launch activities as part of your project proposal, timeline or budget, now is a good time to start doing so.

Research should never be considered an “extra” or an afterthought. By building it into your process from the beginning, you’ll ensure research is not seen as a set of individual studies but as a continuous learning cycle.

Tip #3: Implement the Right Research Tools

One of the biggest limitations product teams have in adopting a continuous mindset and approach is tooling.

The UX tools landscape has grown a lot in recent years. Each platform offers a unique collection of features and functionalities that product and UX researchers are looking for.

Maze, for instance, is a continuous product discovery platform that offers unified solutions for discovery — from prototype testing and surveys to card sorting and video recordings. You can also use it to recruit participants and generate automated reports for every piece of research you run.

The key is to find the right platforms for your product development lifecycle and the various research and testing methods you plan to use. Here are 13 UX research tools to explore now.

Tip #4: Mix-and-Match Methods

Just because there are dozens of types of product research and testing methods, that doesn’t mean you have to do them all in order to get meaningful results. The trick is to choose the right research methods — i.e. ones that help you reach your research goals more effectively. For instance:

Primary vs. Secondary:

  • Primary data directly comes from your end users.
  • Secondary data comes from already existing data related to the industry.

Qualitative vs. Quantitative:

  • Qualitative data relates to the user’s opinions and feelings. This type of research is key to developing a deep understanding of a problem or uncovering the ‘why’ behind actions.
  • Quantitative data relates to the statistical/numerical data gathered from users to answer research questions such as ‘what’, ‘where’ or ‘when’.

Evaluative vs. Generative:

  • Evaluative research is used to evaluate a product or concept and collect data that helps improve your solutions.
  • Generative research is used to develop a deep understanding of your users and the problem you’re trying to solve for them.

Using different types of research will give you a more well-rounded idea of what’s going on with your users and can make your research more cost-effective. Depending on your project objective and resources, for example, you can opt for more unmoderated studies and panels as opposed to moderated ones that require live control and monitoring in the data gathering sessions.

Tip #5: Get Everyone Involved

Everyone in your organization can benefit from and contribute to product research — for example: product managers, designers, marketers, salespeople, customer support representatives and so on. So why should a dedicated UX researcher or team be the only one to gather insights?

Caitlin McCurrie, the Research Lead at Atlassian, discusses why research democratization is a must to scale the impact of research:

“While I strongly believe that dedicated research professionals are a necessary component for a successful tech company, there will never be enough researchers to cover the range and volume of research needs within an organization. We will always need our teammates to engage in some form of research—whether collaborating with a dedicated researcher or running their own studies.”

It’s not just an issue of data volume. People in different roles will view the research from their unique perspectives, which can lead to additional discoveries and suggestions than you might otherwise get.

Wrapping Up

While a lot of product teams conduct research at the product discovery stage or validation and testing stage, only a few continue with the process after launch. However, think of all the benefits that come from doing product research. Now multiply those results by every time you connect with users to discover new ways to improve your product.

If you’d like more research on the benefits of continuous research, read the full Continuous Research Report from Maze now.

Accessible Front-End Patterns For Responsive Tables (Part 1)

Tables allow us to organize data into grid-like format of rows and columns. Scanning the table in one direction allows users to search and compare the data while scanning in the other direction lets users get all details for a single item by matching the data to their respective table header elements.

Tables often rely on having enough screen space to communicate these data relations effectively. This makes designing and developing more complex responsive tables somewhat of a challenge. There is no universal, silver-bullet solution for making the tables responsive as we often see with other elements like accordions, dropdowns, modals, and so on. It all depends on the main purpose of the table and how it’s being used.

If we fail to consider these factors and use the wrong approach, we can potentially make usability worse for some users.

In this article, we’re going to be strictly focused on various ways we can make tables on the web responsive, depending on the data type and table use-case, so we’re not going to cover table search, filtering, and other similar functionalities.

If you are interested in improving user experience (UX) for tables and other UI elements beyond just responsiveness, make sure to check out Smashing Magazine’s incredibly useful Smart Interface Design Patterns workshop, which covers best practices and guidelines for various UI components, tables included.

Short Primer On Accessible Tables

Before diving into specific responsive table patterns, let’s quickly go over some best practices regarding design and accessibility. We’ll cover some general points in this section and other, more specific ones in later examples.

Design And Visual Features

First, we need to ensure that users can easily scan the table and intuitively match the data to their respective table header elements. From the design perspective, we can ensure the following:

  • Use proper vertical and horizontal alignment (“A List Apart” covers this in their article).
  • Design a table with clear divisions and optimal spacing between rows and cells.
  • Table header elements should stand out and be styled differently from data cells.
  • Consider using alternate background color for rows or columns (“zebra stripes”) for easier scanning.

ARIA Roles

We want to include proper ARIA attributes to our table element and its descendants. Applying some CSS styles like display: block or display: flex (to create responsive stacked columns) may cause issues in some browsers. In those cases, screen readers interpret the table element differently, and we lose the useful table semantics. By adding ARIA labels, we can fix the issue and retain the table semantics.

Including these roles in HTML manually could become tedious and prone to error. If you are comfortable about using JavaScript for adding additional markup, and you aren’t using a framework that generates static HTML files, you can use this handy little JavaScript function made by Adrian Roselli to automatically add ARIA roles to table elements:

function AddTableARIA() {
  try {
    var allTables = document.querySelectorAll("table");
    for (var i = 0; i < allTables.length; i++) {
      allTables[i].setAttribute("role", "table");
    }
    var allRowGroups = document.querySelectorAll("thead, tbody, tfoot");
    for (var i = 0; i < allRowGroups.length; i++) {
      allRowGroups[i].setAttribute("role", "rowgroup");
    }
    var allRows = document.querySelectorAll("tr");
    for (var i = 0; i < allRows.length; i++) {
      allRows[i].setAttribute("role", "row");
    }
    var allCells = document.querySelectorAll("td");
    for (var i = 0; i < allCells.length; i++) {
      allCells[i].setAttribute("role", "cell");
    }
    var allHeaders = document.querySelectorAll("th");
    for (var i = 0; i < allHeaders.length; i++) {
      allHeaders[i].setAttribute("role", "columnheader");
    }
    // This accounts for scoped row headers
    var allRowHeaders = document.querySelectorAll("th[scope=row]");
    for (var i = 0; i < allRowHeaders.length; i++) {
      allRowHeaders[i].setAttribute("role", "rowheader");
    }
    // Caption role not needed as it is not a real role, and
    // browsers do not dump their own role with the display block.
  } catch (e) {
    console.log("AddTableARIA(): " + e);
  }
}

However, keep in mind the following potential drawbacks of using JavaScript here:

  • Users might choose to browse the website with JavaScript turned off.
  • The JavaScript file may not be downloaded or may be downloaded much later if the user is browsing the website on an unreliable or slow network.
  • If this is bundled alongside other JavaScript code in the same file, an error in other parts of the file might prevent this function from running in some cases.

Adding An a11y-Friendy Title

Adding a title next to the table helps both sighted users and users with assistive devices get a complete understanding of the content.

Ideally, we would include a caption element inside the table element as a first child. Notice how we can nest any HTML heading element as a child to maintain the title hierarchy.

<table>
  <caption>
    <h2>Top 10 best-selling albums of all time</h2>
  </caption>

   <!-- Table markup -->
</table>

If we are using a wrapper element to make the table scrollable or adding some other functionality that makes the caption element not ideal, we can include the table inside a figure element and use a figcaption to add a title. Make sure to include a proper ARIA label on either the table element or a wrapper element and link it to a figcaption element:

<figure>
  <figcaption id="caption">Top 10 best-selling albums of all time</figcaption>
  <table aria-labelledby="caption"><!-- Table markup --></table>
</figure>
<figure>
  <figcaption id="caption">
    <h2>Top 10 best-selling albums of all time</h2>
  </figcaption>
  <div class="table-wrapper" role="group" aria-labelledby="caption" tabindex="0">
    <table><!-- Table markup --></table>
  </div>
</figure>

There are other accessibility aspects to consider when designing and developing tables, like keyboard navigation, print styles, high contrast mode, and others. We’ll cover some of those in the following sections. For a more comprehensive guide on creating accessible table elements, make sure to check out Heydon Pickering’s guide and Adrian Roselli’s article which is being kept up to date with the latest features and best practices.

Bare-bones Responsive Approach

Sometimes we don’t have to make any major changes to our table to make it responsive. We just need to ensure the table width responds to the viewport width. That can be easily achieved with width: 100%, but we should also consider setting a dynamic max-width value, so our table doesn’t grow too wide on larger containers and becomes difficult to scan, like in the following example:

table {
  width: fit-content;
}

With the fit-content value, we ensure that the table doesn’t grow beyond the minimum width required to optimally display the table contents and that it remains responsive.

The table responds to viewport size, and it looks good on small screens, but on wider screens, it becomes difficult to scan due to the unnecessary space between the columns.

We can also ensure that the table max-width value always adapts to its content. We don’t have to rely on assigning a magic number for each table or wrap the table in a container that constrains the width to a fixed value.

This works well for simple tables that don’t require too much screen space to be effectively parsed and aren’t affected by word-break. We can even use fluid typography and fluid spacing to make sure these simple tables remain readable on smaller screens.

/* Values generated with Utopia https://utopia.fyi/type/calculator/ */

tbody {
  font-size: clamp(1.13rem, calc(0.35rem + 2.19vw), 1.75rem);
}

tbody td {
  padding-top: clamp(1.13rem, calc(0.35rem + 2.19vw), 1.75rem);
  padding-bottom:  clamp(2rem, calc(0.62rem + 3.9vw), 3.11rem);
}

This is important to know because on some devices, like smartphones and tablets, scrollbars aren’t visible right away, and users might get the impression that the table is not scrollable.

Lea Verou and Roman Komarov have suggested using “scrolling shadows” to subtly indicate the scrolling direction using gradient background and background-attachment property. Using this property, we can set background gradient behavior when scrolling. We also use linear gradients as edge covers for shadows, so we gradually hide the shadow when the user has reached an edge and cannot scroll in that direction anymore.

.table-wrapper {
  overflow: auto;
  background: 
    linear-gradient(90deg, var(--color-background) 20%, rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-background) 80%) 
                    100% 0,
    radial-gradient(farthest-side at 0 0%, var(--color-shadow), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 0%, var(--color-shadow), rgba(0, 0, 0, 0))
                    100% 0;
  background-repeat: no-repeat;
  background-size: 20% 200%, 20% 200%, 8% 400%, 8% 400%;
  background-attachment: local, local, scroll, scroll;
}

Keep in mind that background-attachment property is not supported on iOS Safari and a few other browsers, so make sure to either provide a fallback or remove the background on unsupported browsers. We can also provide helpful text next to the table to make sure users understand that the table can be scrolled.

Forcing Table Cropping

We can also dynamically set the table column width to enforce table cropping mid-content, so the user gets a clear hint that the table is scrollable. I’ve created a simple function for this example. The last column will always get cropped to 85% of its size, and we’ll reduce the number of visible columns by one if we cannot show at least 5% of the column’s width.

function cropTable(visibleCols) {
  const table = document.querySelector("figure");
  const { width: tableWidth } = table.getBoundingClientRect();
  const cols = table.querySelectorAll("th, td");
  const newWidth = tableWidth / visibleCols;

  // Resize columns to fit a table.
  cols.forEach(function(col) {
    // Always make sure that col is cropped by at least 15%.
    col.style.minWidth = newWidth + (newWidth * 0.15) + "px";
  });

  // Return if we are about to fall below min column count.
  if (visibleCols <= MIN_COLS) {
    return;
  }

  // Measure a sample table column to check if resizing was successful.
  const { width: colWidth } = cols[0].getBoundingClientRect();

  // Check if we should crop to 1 column less (calculate new column width).
  if (colWidth * visibleCols > tableWidth + newWidth * 0.95) {
    cropTable(visibleCols - 1);
  }
}

This function might need to be adjusted to a more complex use case. Check the example below and see how the table column width responds to window resizing:

Stacking Approach (Rows To Blocks)

The stacking approach has been a very popular pattern for years. It involves converting each table row into a block of vertically stacked columns. This is a very useful approach for tables where data is not comparable or when we don’t need to highlight the hierarchy and order between items.

For example, cart items in a webshop or a simple contacts table with details — these items are independent, and users primarily scan them individually and search for a specific item.

As mentioned before, converting the table rows to blocks usually involves applying display: block on small screens. However, as Adrian Roselli has noted, applying a display property overrides native table semantics and makes the element less accessible on screen readers. This discovery was jarring to me, as I’ve spent years crafting responsive tables using this pattern without realizing I was making them less accessible in the process.

It’s not all bad news, as Adrian Roselli notes the following change for Chrome version 80:

Big progress. Chrome 80 no longer drops semantics for HTML tables when the display properties flex, grid, inline-block, or contents are used. The new Edge (ChromiEdge) follows suit. Firefox still dumps table semantics for only display: contents. Safari dumps table semantics for everything.

— Adrian Roselli

For this example, we’ll use display: flex instead of using display: block for our stacking pattern. This is not an ideal solution as other browsers might still drop table semantics, so make sure to test the accessibility on various browsers and devices.

/* Small screen width styles */
table, tbody, tbody tr, tbody td, caption {
  display: flex;
  flex-direction: column;
  width: 100%;
  word-break: break-all;
}

See the Pen Table - stacked [forked] by Adrian Bece.

Accordion

The stacking pattern might look nice initially and seems to be an elegant solution from a design perspective. However, depending on the table and data complexity, this pattern might significantly increase page height, and the user might have to scroll longer to reach the content below the table.

One improvement I found interesting was to show the primary data column (usually the first column) and hide the less important data (other columns) under an accordion. This makes sense for our example, as users would first look for a name by contact and then scan for their details in the row.

<tr>
  <td onclick="toggle()">
    <button aria-label="Expand contact details">
      <!-- Icon -->
    </button>
    <!-- Main content-->
  </td>
  <td><!-- Secondary content--></td>
  <td><!-- Secondary content--></td>
  <td><!-- Secondary content--></td>
</tr>

We’ll assume that the first table column contains primary data, and we’ll hide other columns unless a row-active class is applied:

/* Small screen width styles */

thead tr > *:not(:first-child) {
  display: none;
}

tbody,
tbody tr,
tbody td {
  display: flex;
  flex-direction: column;
  word-break: break-all;
}

tbody td:first-child {
  flex-direction: row;
  align-items: center;
}

tbody tr:not(.row-active) > *:not(:first-child) {
  max-width: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0;
}

Now we have everything in place for showing and hiding table row details. We also need to keep in mind the screen reader support and toggle the aria-hidden property to hide secondary info from screen readers. We don’t need to toggle the ARIA property if we’re toggling the element visibility with the display property:

function toggle() {
  const row = this.window.event.target.closest("tr");
  row.classList.toggle("row-active");

  const isActive = row.classList.contains("row-active");

  if (isActive) {
    const activeColumns = row.querySelectorAll("td:not(:first-child)");
    activeColumns.forEach(function (col) {
      col.setAttribute("aria-hidden", "false");
    });
  } else {
    const activeColumns = row.querySelectorAll(`td[aria-hidden="false"]`);
    activeColumns.forEach(function (col) {
      col.setAttribute("aria-hidden", "true");
    });
}

We’ll assign this function to the onclick attribute on our main table column elements to make the whole column clickable. We also need to assign proper ARIA labels when initializing and resizing the window. We don’t want incorrect ARIA labels applied when we resize the screen between two modes.

function handleResize() {
  const isMobileMode = window.matchMedia("screen and (max-width: 880px)");
  const inactiveColumns = document.querySelectorAll(
    "tbody > tr > td:not(:first-child)"
  );

  inactiveColumns.forEach(function (col) {
    col.setAttribute("aria-hidden", isMobileMode.matches.toString());
  });
}

//On window resize
window.addEventListener("resize", handleResize);

// On document load
handleResize();

See the Pen Table - accordion [forked] by Adrian Bece.

This approach significantly reduces table height on smaller screens compared to the previous example. The content below the table would now easily be reachable by quickly scrolling past the table.

Toggleable Columns Approach

Going back to our scrollable table example, in some cases, we can give users an option to customize the table view by allowing them to show and hide individual columns, temporarily reducing table complexity in the process. This is useful for users that want to scan or compare data only by specific columns.

We’ll use a checkbox form and have them run a JavaScript function. We’ll only have to pass an index of the column that we want to toggle. We’ll have to hide both the columns in data rows in a table body and a table header element:

function toggleRow(index) {
  // Hide a data column for all rows in the table body.
  allBodyRows.forEach(function (row) {
    const cell = row.querySelector(`td:nth-child(${index + 1})`);
    cell.classList.toggle("hidden");
  });

  // Hide a table header element.
  allHeadCols[index].classList.toggle("hidden");
}

This is a neat solution if you want to avoid the stacking pattern and allow users to easily compare the data but give them options to reduce the table complexity by toggling individual columns. In this case, we’re using a display property to toggle the visibility, so we don’t have to handle toggling ARIA labels.

See the Pen Responsive table - column toggle [forked] by Adrian Bece.

Conclusion

Table complexity and design depend on the use case and the data they display. They generally rely on having enough screen space to display columns in a way user can easily scan them. There is no universal solution for making tables responsive and usable on smaller screens for all these possible use cases, so we have to rely on various patterns.

In this article, we’ve covered a handful of these patterns. We’ve focused primarily on simple design changes with a scrolling table pattern and a stacking pattern and began checking out more complex patterns that involve adding some JavaScript functionality.

In the next article, we’ll explore more specific and complex responsive table patterns and check out some responsive table libraries that add even more useful features (like filtering and pagination) to tables out of the box.

References

Design to Support New Query Parameters in GET Call Through Configurations Without Making Code Changes

With this design support, new query parameters will be as easy as adding a new query parameter as a property in the application's configuration file. Implemented this using Spring Boot framework and MongoDB as the backend database. 

HTTP GET is two types of path parameters and query parameters. In this article, I’m discussing query parameters. Query parameter GET call is a set of parameters that are part of the URL. Query parameters are appended in the URL after the HTTP resource with ? symbol and multiple parameters are concatenated by & symbol.