Design

Intersection 2024

Sofia Marchi
Intersection 2024

This year I had the opportunity to attend Intersection, a conference organized by Hinto Group. It was an intense day filled with talks and workshops.

The theme of this edition was Revolutionizing User Interfaces: The Dawn of Intuitive Digital Worlds. This theme focuses on the evolution of user interfaces towards more intuitive, immersive, and interactive digital environments, challenging professionals to reimagine the way users interact with technology in their daily lives.

The main topics were:

  • Sustainable Design & Development
  • Design System & Scalability
  • Natural User Interfaces
  • Generative AI
  • Micro-Frontends & Modular Architectures
  • Cross-Platform Development

The Talks

During the morning, I attended four talks.

How AI and Accessibility Transform Digital Experiences

The first talk was How AI and Accessibility Transform Digital Experiences by Christian Fiorot, a collaborator of Userway.

Christian has been involved in accessibility since the approval of the Stanca Law in 2004. His presentation began with a quote from Tim Berners-Lee: “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect”.

Humanity is increasingly seeking innovative ways to provide people with disabilities technologies that improve their quality of life. Artificial intelligence is undoubtedly a resource that can promote inclusion and support organizations’ social obligations and responsibilities to create barrier-free digital experiences.

For designers, it is essential to first understand the technologies that people with disabilities use to access the web (screen readers, mouse sticks, foot mice). At the same time, it’s vital for front-end developers to understand the languages that support accessibility.

A well-designed interface and well-written code, along with adherence to guidelines and standards (WCAG, ISO 40500, ATAG, UAAG), can ensure that the web is perceived as a human right.

All users benefit from interacting with accessible websites and products. However, people with physical and cognitive disabilities (whether permanent or temporary) benefit the most, particularly those who navigate the web using only the keyboard or assistive technologies. As designers and developers, we must pay attention to several aspects to improve navigation for our digital products, including:

  • Creating meaningful text equivalents for images and videos so screen readers can correctly translate them.
  • Ensuring third-party elements (maps, videos) on our site are also accessible.
  • Making even the most complex parts of a site, such as checkout processes or downloading a PDF, accessible.
  • Writing quality code so assistive technologies can interpret it correctly.
  • Simplifying text content and forms so people with cognitive issues can easily consult the material.
  • Allowing users to manage or stop animations and transitions.

Artificial intelligence can greatly assist in making digital content more accessible. For example, AI can create a readable video abstract, and if needed, it can be trained to learn specific languages (if required by the video). Some solutions can assist designers by suggesting color-blind friendly palettes.

For users with motor or visual impairments, AI can help with voice commands or by analyzing page structure to improve keyboard navigation.

AI chatbots and virtual assistants leverage NLP (natural language processing), while AI-powered widgets provide contextual dictionaries and help simplify textual content.

When considering multilingual accessibility, AI can overcome many barriers by providing real-time translation as web pages load, without compromising performance.

AI can also support developers by preventing potential errors or gaps in the code. AI-powered widgets can add missing alternative texts/descriptions, generate labels, and attributes required by assistive technologies.

While this can undoubtedly improve the user experience with digital products, we must ensure that AI algorithms are trained properly to prevent any form of discrimination.

Designed by Freepik

Dumb Phones, Smart Breaks: Surviving Burnout with Calm Tech and Nokia Nostalgia

The second talk I attended was by Francesco Napoletano, Staff Software Engineer at Sysdig.

Francesco humorously shared his journey on the web, which began in 1995, and his experience with burnout. He loves computers because “they are predictable,” and when things work, everything feels magical.

However, his life as a developer meant he was constantly connected and online (and thus always reachable). FOMO (Fear Of Missing Out) led him to feel that he couldn’t miss anything: calls, messages, notifications, social media. This made his smartphone a demanding object that constantly required his attention.

After experiencing burnout, Francesco adopted strategies to avoid being enslaved by technology, especially his smartphone:

  • He started using self-control apps to block sites he didn’t want to visit.
  • He replaced his smartphone with an old Nokia model, only giving the number to a few people.

By not using a smartphone, he reduced unnecessary notifications, distractions, and interruptions, allowing him to stay more focused on what was truly important.

He adopted the principles of Calm Technology (https://calmtech.com/):

Technology should require the smallest possible amount of attention.

  • Technology can communicate, but it doesn’t need to speak.
  • Create ambient awareness through different senses.
  • Communicate information without taking the user out of their environment or task.

Technology should inform and create calm.

  • A person’s primary task should not be computing, but being human.
  • Give people what they need to solve their problem, and nothing more.

Technology should make use of the periphery.

  • A calm technology will move easily from the periphery of our attention to the center and back.
  • The periphery informs without overburdening.

Technology should amplify the best of technology and the best of humanity.

  • Design for people first.
  • Machines shouldn’t act like humans.
  • Humans shouldn’t act like machines.
  • Amplify the best part of each.

Technology can communicate, but doesn’t need to speak.

  • Does your product need to rely on voice, or can it use a different communication method?
  • Consider how your technology communicates status.

Technology should work even when it fails.

  • Think about what happens if your technology fails.
  • Does it default to a usable state or break down completely?

The right amount of technology is the minimum needed to solve the problem.

  • What is the minimum amount of technology needed to solve the problem?
  • Slim the feature set down so that the product does what it needs to do and no more.

Technology should respect social norms.

  • Technology takes time to introduce to humanity.
  • What social norms exist that your technology might violate or cause stress on?
  • Slowly introduce features so that people have time to get accustomed to the product.

An example of calm technology could be the Kindle: its battery lasts a long time, I can use it when I want, and it doesn’t demand my attention.

It’s certainly possible to make smartphones more “calm” by removing unnecessary notifications and applications. The paradox is that we often buy expensive smartphones only to reduce their functionality.

Designed by Freepik

Generative AI for engaging user storyboards

The third talk was by Tetiana Gulei, UX Designer at BIMcollab.

The presentation began with the question: what can we use storyboards for?
Two possible answers are:

  • Visualization of the user’s journey with a product.
  • Illustrating complex design ideas and providing clarity to stakeholders.

When there are large feature requests (such as redesigning a website), rather than focusing on detailed design, it’s useful to have a high-level overview, and storyboards are perfect for this.

Storyboards consist of Scenario, Visuals, and Captions. The challenge is: how to make the visuals engaging?

Sketching brings some issues:

  • It’s time-consuming.
  • You need proficiency in sketching.
  • Stock images lack consistency.

Generative AI can help. With the right prompts, we can obtain unique visuals, multiple interactions, and a fast process.

Tatiane showcased the storyboard she created for one of her projects titled 3D Model Webviewer. Initially, the project targeted office workers using large screens. However, new requirements were introduced:

  • On-site for construction projects.
  • Various features.
  • Responsive design.

To create the storyboards, Tetiana uses Adobe Firefly, a text-to-image generator. This tool generates the images we want, which can then be retouched using other Adobe suite software.

Before using Adobe Firefly (or any other generative AI tool), it’s useful to clarify the main user scenario and key scene context.

In this case, the user in question is an architect. The scenario involves an architect using their tablet on-site to compare a 3D drawing with a real building.

Tetiana created four key scenes. To do so, she used simple but specific prompts. However, when creating these scenes, it’s common for the characters to lack consistency with each other. For this reason, it’s necessary to ask the tool to pay close attention to the style reference.

During this work, Tetiana encountered two main biases:

  • Gender & profession bias (the AI mainly provided images of male architects).
  • Bias toward architectural styles.

What can be done against prejudice? Awareness of prejudices is the first step in overcoming them. Other tricks we can use are:

  • Be specific in your suggestions.
  • Use different reference images.
  • Maintain a critical attitude towards results.

Designed by Freepik

Testing for Inclusivity: QA Techniques for Diverse User Experience

The last talk of the morning that I attended was by Ludovico Besana, Senior Test Engineer at Nearform.

The talk began with a definition of accessibility and Ludovico’s goal of removing as many barriers as possible from software use, aiming to create “welcoming” experiences.

The talk specifically highlighted how QA teams can make testing processes inclusive for a diverse user base, using the latest research and technologies. “Inclusivity is not only a QA task; it’s a mindset.”

Ludovico demonstrated how he includes accessibility testing in his daily work. This practice broadens usability, expands the user base, and improves UX.

Constant attention to accessibility facilitates market expansion, builds a company’s reputation, and enhances customer satisfaction.

How can we measure progress? We can use the following metrics:

  • Error Rate Reduction
  • Accessibility Coverage
  • User Feedback
  • Engagement & Retention

In terms of ROI, we can achieve higher conversion rates and customer loyalty.

Legal risks and penalties are certainly other aspects to consider, as they can also damage a company’s image.

Here are some best practices for inclusive QA:

  • Shift left approach — This software development strategy emphasizes moving testing activities earlier in the development process for improved software quality, better test coverage, continuous feedback, and faster time-to-market.
  • Combining manual and automated testing — This allows for faster testing while maintaining a human perspective.
  • Consistent audits — Audits help improve the testing process and allow organizations to monitor the progress of software testing. Auditing is important to identify issues and come up with better long-term solutions.

What tools can we use for testing?

  • Storybook — Provides a clean-room environment for testing components in isolation. Stories make it easy to explore a component in all its variations, no matter how complex.
  • Axe — Accessibility Checker for developers, testers, and designers in Chrome.
  • Wave — A suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors but also facilitates human evaluation of web content.
  • Pa11y — A command-line interface that loads web pages and highlights any accessibility issues it finds. Useful for running one-off tests against a web page.
  • PlayWright
  • Siteimprove

For mobile, there are other available tools:

  • Appium
  • Accessibility Scanner (for Android)
  • VoiceOver & TalkBack

Manual testing is time-consuming. That’s why we can also rely on automated testing to continuously test and improve.

When testing, we may encounter the following challenges:

  • Flaky tests — A flaky test refers to tests that generate inconsistent results, failing or passing unpredictably without any modifications to the code being tested.
  • Limited coverage — Automated accessibility tools cannot test websites against all WCAG success criteria and will only reliably find 20 to 30% of accessibility issues. This means 70 to 80% of issues will remain undetected.

Challenges in mobile testing include:

  • Testing the correct touch target size
  • Dynamic content
  • Platform-specific issues

The guidelines provided are numerous and varied. What can we do to start testing for accessibility?

  • Start small: Begin by testing components, then pages, and gradually expand.
  • Use tools to start familiarizing yourself with accessibility issues and understand where to focus.
  • Involve the team to create a culture within the company.
  • Customer feedback loop

Where should we focus? We can start by addressing:

  • High traffic areas
  • User impact
  • Legal applications

After testing for accessibility and implementing the necessary interventions, it is crucial to measure the impact on users.

There are two interesting case studies on accessibility:

  • Netflix’s Accessibility Enhancement — A standout feature of Netflix’s accessibility initiatives is the highly customizable user interface. Understanding the diverse needs of its user base, the platform allows users to tailor their viewing experience. This includes the ability to adjust subtitles, change font sizes, and enable high-contrast displays. By providing such flexibility, Netflix ensures that individuals with varying accessibility needs can personalize the interface to suit their preferences, fostering a sense of inclusiveness that goes beyond mere compliance with accessibility standards. Netflix also has its own page dedicated to inclusion and accessibility.
  • Tesco — The famous UK supermarket chain has made its e-commerce platform completely accessible.

Ludovico concluded his talk by reminding us that inclusivity does not only mean adhering to standards, but also creating full engagement with the product and working towards a more equitable digital world.

Designed by Freepik

The Workshop: Conducting Competitive Research and Analysis on Digital Services/Products

The afternoon workshop was, for me, the most interesting part of the event. The session I participated in was titled Conducting Competitive Research and Analysis on Digital Services/Products, led by Jaime Levy, UX/Design Strategist and Author of “UX Strategy”.

When building a digital product, it is essential to know as much as possible about the competition. For this reason, market research and analysis are a fundamental part of business strategy. We want to know what is out there, what has worked, and what hasn’t. This requires direct knowledge of positive and negative user experiences, as well as the business models employed by competitors. If conducted thoroughly, research can provide a wealth of information on current trends and outdated manifestations of mental models.

It is crucial to research competitors to understand the alternatives and gaps in the market and gain insights into current and new UI trends.

How to look for competitors and gain competitive intelligence?

  • Keyword searches
  • Advanced search tools / Google Keyword Planner
  • “Best of” lists
  • App stores
  • Talking with stakeholders

If the competitors we are analyzing are B2B, we can consult the following sources:

  • Search slide docs on Slideshare
  • Job postings
  • Paid reports
  • Google alerts
  • YouTube videos

In this workshop, we delved deep into the topic through practical exercises. We practiced with an invented value proposition for an online product: an AI-based app for learning a new language.

After selecting the product, we divided into groups. Each group researched potential direct and indirect competitors and analyzed one in particular.

For each competitor, we examined the following elements:

  • Value Proposition
  • Year founded
  • Funding Rounds
  • Revenue Streams
  • Monthly Traffic and Ranking or Mobile App Downloads
  • Number of Listings, Items, Users, or Posts
  • Primary Categories
  • Social Platforms
  • Content Types
  • Personalization Features
  • Community or UGC Features
  • Competitive Advantage and/or Key Features
  • Region
  • Heuristic Evaluation
  • Customer Reviews
  • General Notes or Recent News

After analyzing all these elements, we noted down our reflections and conducted a SWOT Analysis from the Competitor’s Perspective, examining strengths and weaknesses, opportunities, and threats.

We then compiled all the data into an Excel file and visually presented it on a Figma file.

What did we learn from this?

  • Why the empirical practice of UX strategy is fundamental to designing successful online products.
  • How to identify direct and indirect digital competitors of your value proposition.
  • How to identify, capture, and organize quantitative and qualitative data related to UX and business attributes.
  • How to conduct a methodical analysis so you can take a position in the opportunity space.

This type of analysis is certainly useful in the design process, but it is even more relevant for those managing a product within a company.

Final Thoughts

At the end of this day, I certainly took away many insights, but also many questions.

In the field of design, we often talk about “design for everyone,” but is it really possible to design for everyone? How can we consider the needs of all possible types of users while also respecting business criteria? The truth is, we can design the best for our target audience while trying to create as few barriers as possible.

When we talk about accessibility, in particular, we must accept that in digital products there are no standard users browsing the web, and there are no standard devices for browsing the web.

I fully support the enthusiasm with which the speakers promote attention to the topic of accessibility. However, I realize that in many organizations, there is a lack of skilled professionals in this area. Hiring accessibility experts within teams undoubtedly brings long-lasting value, but often companies cannot (or do not want to) make this investment.

Attending events like this is still always valuable because they always bring inspiration and opportunities for exchange. Even though it’s not always possible to apply everything we hear and see during these events to our daily work, it is certainly helpful to take away as much as possible to become better professionals.