While the User Experience practice has been expanding and will continue to balloon in the coming years, so have its sub-disciplines such as content strategy, operations, and user research. As the practice of UX Research matures, scalability will continue to be important in order to meet the rapid needs of iterative product development.

While there are several effective ways to scale user research, such as increasing researcher-to-designer ratios, leveraging big data and real-time analytics, or research democratization, one of the most effective methods is developing a Rapid Research program. In a Rapid Research program, teams are provided quick insight into key problems at an unprecedented operational speed.

Rapid Research-type support has been around for a while and has taken different shapes across different organizations. What remains true, however, is the goal to provide actionable insights from end-users at a quick pace that fits within product sprints and maintains pace with agile development practices.

In this article, I’m going to unpack what a Rapid Research program is, how to build one in your organization, and underscore the unique benefits that a program like this can provide to your team. Given that there is no singular ‘right way’ to scale insights or mature a user research practice, this outline is intended to provide building blocks and considerations that you may take in the context of the culture, opportunities, and challenges of your organization.

What Is Rapid Research?

Rapid research is a relatively recent program where typical user research practices and operations are standardized and templatized to provide a consistent, repeatable cadence of insights. As the name suggests, a core requirement of a rapid research program is that it delivers quicker-than-average insights. In many teams, this means delivering research on a weekly cadence where a confluence of guardrails, templates, and requirements work to ensure a smooth and consistent process.

Programs like Rapid Research may be created out of a necessity to keep up with the pace of development while freeing the bandwidth of expert researchers’ time for more complex discovery work that often takes longer. A rapid research program can be a crucial component of any team’s insight ecosystem, balanced against solving different business problems with flexible levels of support.

Scope

Research Methods

In order to make research more rapid, teams may consider some research methodologies out of the question in their Rapid Research program. Methods such as longitudinal diary studies, surveys, or long-form interviews might suffer from lower quality if done too quickly. When determining the scope of your rapid research program, ask yourself what methods you can easily templatize and, most importantly, which best support the needs of your experience teams.

For example, if your experience teams work on 2-week sprints and need insights in that time, then you will need to consider which research methods can reliably be conducted in 1–2 week increments.

Sample Size And Research Duration

Methods alone won’t ensure a successful implementation of a rapid research program. You will also need to consider sample size and session duration. Even if you decide usability tests are a reasonable methodology for your rapid research framework, you may be introducing too much complexity to run them with 15+ users within 60-min sessions and analyze all that data efficiently. This may require you to narrow your focus to fewer sessions with shorter duration.

Participant Recruitment

While there may be fewer and shorter sessions for each study, you also need to consider your participant pool. Recruitment is one of the most difficult aspects of conducting any user research, and this effort must be considered when determining the scope of the program. Recruitment can jeopardize the pace of your program if you source highly specific participants or if they are harder to reach due to internal bureaucracy or compliance constraints.

In order to simplify recruitment, consider what types of participants are both the easiest to reach and who account for the most use cases or products you expect to be researching. Be careful with this, though, as you don’t want to broaden your customer profiles too much for fear of not getting the helpful feedback you need, as UserZoom says:

“Why is sourcing participants such a challenge? Well, you could probably find as many users as you like by spreading the net as wide as possible and offering generous incentives, but you won’t necessarily find the ‘right’ participants.”

— UserZoom, “Four top challenges UX teams face in 2020 and how to solve them”

Timing

Why Timing Matters

Coupled tightly with scope, the timing of your rapid research end-to-end process will be paramount to the program’s success. Even if you have narrowed the scope to only a handful of research methods with limited sessions at shorter durations and with specific participant profiles, it won’t be ‘rapid’ if your end-to-end project timeline is as long as your average traditional study. Care must be taken to ensure that the project timelines of your rapid research studies are notably quicker than your average studies so that this program feels differentiating and adds value on top of the work your team is already doing.

Reconsidering scope

If your timelines are about the same, or your rapid cadence is less than 50% more efficient than your average study, consider whether or not you’re being judicious enough in your scope above. Always monitor your timelines and identify where you can speed things up or limit the scope in order to reach a quick turnaround, which is acceptable. One way to support shorter project timelines is through compartmentalization.

Compartmentalization

About Compartmentalization

One way to balance scope, timing, and consistency is by breaking up pieces of your average study process into smaller, separate efforts. Consider what your program would look like if you separated project intake from the study kick-off or if discussion guides were not dependent on recruitment or participant types. Splitting out your workflow into separate parts and templating them may eliminate typical dependencies and streamline your processes.

Ways To Compartmentalize

Once you’ve determined the set of research methods and ideal participants to include in your program, you may:

• Templatize the discussion guides to provide a quick starting point for researchers and cut down on upfront preparation time.
• Create a consistent recruitment schedule independent of the study method to start before study intake or kick-off to save upfront time.
• Pre-schedule recurring kick-off and readout sessions to set expectations for all studies while limiting timeline risk when at the mercy of others’ calendars.

There is a myriad of opportunities to do things differently than your typical research study when you reconsider the relationships and interdependencies in the process.

Consistency

Expectability

While a quality rapid research program takes into consideration scope, timing, and compartmentalization, it also needs to consider consistency. It would be difficult to discern whether or not the program was ‘rapid’ if, on one week, a study takes one week, and on another week, a study takes 2.5 weeks. Both may be below your current study average. However, project stakeholders may blur the lines between the differences in your rapid studies and your typical studies due to the variability in approach. In addition, it may be difficult to operationalize compartmentalization or rapid recruitment without some form of expected cadence.

More Agility

As you and your team get used to operating within your rapid cadence, you may identify additional opportunities to templatize, compartmentalize or focus scope. If the program is inconsistent from study to study, it may be more difficult to notice these opportunities for increased agility, hindering your program from becoming even more rapid over time.

A Rapid Research Case Study

While working at one of the largest telecommunications companies in the US, I had the privilege of witnessing the growth of the UX Research team from just four practitioners to over 25 by the time I left. During this time, the company had matured its user experience practice, including the standards, processes, and discipline of user research.

Identifying The Need

As we grew, human insight became a central part of the product development process, which meant an exponential increase in its demand. While this was a great thing and allowed our team to grow, the work we were doing was not sustainable — we were constantly trying to keep pace with product teams who brought us in too late in the process simply to validate their ideas. Not only did we always feel rushed, but we were stuck doing only evaluative work, which not only stifled innovation but also did not satisfy our more senior researchers who wished to do more generative research.

How It Fits In

Once diagnosing this issue, our leadership initiated several new processes to build a more well-rounded research portfolio that supported iterative research while enabling generative research. This included a democratization program, quarterly planning, and my initiative: Rapid Research. We determined that we needed a program that would allow us to take on mid-sized projects at the pace of product development while providing a new opportunity to hire junior researchers who would be a great talent pool for our team and provide a meaningful way for those new to the field to grow their skills.

Getting Started

In order to build the rapid research program, I audited the previous year’s worth of research to determine our average timelines, the most common methodologies used for iterative and mid-sized projects, and to identify our primary customer who we do research with most often. My findings would be the bedrock of the program:

• Most iterative research was lite interviews and brief usability tests.
• Many objectives could be covered in 30-minute sessions.
• Mid-sized projects were often with just a handful of current customers.
• Our average study time was 2–3 weeks, so we’d need to cut this down.
• Given the above constraints, study goals should be highly focused.

Building The Program

At first, we did not have the budget for hiring new junior researchers to staff the program team. What we did have, however, was a contract with a research vendor who we’ve worked with for years, so we decided to partner with researchers from their team to run our rapid research program.

• We created specific templates for ‘rapid’ usability tests and interviews.
• Studies were capped at two objectives and only a handful of questions in order to fit into 30-min sessions.
• Study intake was governed via a simple intake form, required to be filled out by EOD every Wednesday.
• We scheduled standing kick-off and readout sessions every Friday and shared these invites with product teams for visibility.
• To further establish our senior researchers as Portfolio Research Leads and to protect against scope creep, we required teams to formally request ‘rapid’ studies through them first.
• We started our rapid cadence at two weeks and were able to cut it down to just one week after piloting the program for a month.

Strong Results

We saw the incredible value and strong results from building our rapid research program, especially alongside the other processes our team was standing up to support varying insights needs.

• Speed
  We were able to eventually run three research studies simultaneously, enabling us to deliver more research at twice the pace of a traditional study.
• Scale
  Through this enablement of speed, consistent recruitment, and templatized process, we ran over 100 studies & 650+ moderated interviews.
• Impact
  Because we outsourced rapid research to a vendor, our team was freed up to deliver foundational research, which doubled our work capacity.
• Growth
  Eventually, we hired junior researchers and transitioned the program from the vendor, increasing subject matter expertise & operational efficiency.
  

How To Build A Rapid Research Program

The following steps outline a process for getting started with building your own rapid research program in your organization. Exactly which steps you choose to follow, or if you decide to add more or less to your process, will be entirely up to you and the unique needs of your team. Follow the proceeding steps while considering the above guidelines regarding scope, timing, compartmentalization, and consistency.

Determine If You Even Need A Rapid Research Program

While seemingly counter-intuitive, the first step in building a rapid research program is considering whether you even need one in the first place. Every new initiative or tactic intended to mature user research practice should consider the available talent and capabilities of the team and the needs or opportunities of the organization it sits within. It would be unfortunate to invest time to build a robust, rapid research program only to find that nobody uses or needs it.

Reflection On Current Needs

Start by documenting the needs of your experience teams or the organization you support by the different types of requests you receive.

• Are you often asked to deliver research faster?
• What are the types of research which are most often requested?
• Does your team have the capability or operational rigor required to deliver at a faster pace?
• Are you staffed enough to support a more rapid pace, even if you could deliver one?
• Is delivering faster, rigidly-scoped research in service to your long-term goals as a research team, or might it sacrifice them?

Gather More Information

Answering these questions should be your first step before any meaningful work is done to build a rapid research program. In addition, you might consider the following information-gathering activities:

• Audit previous research you or your team have done to determine their average scope, timeline, and method.
• Conduct a series of internal stakeholder interviews to identify what potential value a rapid research program might hold.
• Look for signals for where the organization is going. If leadership is hiring or training teams on agile methods or demanding teams to take a step back to focus on discovery can help you decide when and where to invest your time.

These additional inputs will either help you refine your approach to building a program or to steer away from doing so.

Limitations Of Rapid Research

Finally, when considering if you should build a rapid research program in the first place, you should consider what the program cannot do.

• What a rapid research program might save on time, it cannot necessarily save on effort. You will still need researchers to deliver this work, which means you may need to restructure your team or hire more people.
• If you decide to make your rapid research program self-service, you likely will still need ResOps support for recruitment and managing the intake process effectively.
• It is also possible to hire a research vendor partner to lead this program, though that will require a budget that not every team may have.
• As mentioned above, a good rapid research program is tight and focused in its scope, which limits the type of projects it can accommodate.

Identify Your Starting Scope, Timing & Cadence

Once you’ve decided to pursue a rapid research program, you’ll need to understand what form your program should take in order to deliver the highest value to your team and those you support. As mentioned above, a right-sized scope should consider the research methods, requirements, session quantity & duration, and participant profiles, which you can confidently accommodate. And you will need to determine the end-to-end timing and program cadence that differentiates from current work while providing just enough time to still deliver sustainable quality.

Determine Participant Profiles

Start building your scope backwards from the needs gaps you’re filling within your team based on the answers to the discovery questions above. You’ll want to identify the primary type(s) of end-users this program will research.

1. Audit the past 6–12 months of research you or your team has done, looking at the most common customer type with whom you do research.
2. Then, couple that with any knowledge you may have of where the business or your experience teams will be focused for the following 6–12 months.

For example, if your audit revealed that your team had focused most frequently on current customers over the past year, and you also know that your business will soon focus on the acquisition of new customers, consider including both current customers and prospective customers in your rapid research scope.

Remember the important note about consistency above? Once you’ve identified potential participant profiles, make sure you can consistently recruit them. For example, if you use a research panel to source participants for research studies, test the incidence of your participant profiles. If you find they don’t have many panelists with the attributes you need, you might spend too much time in recruitment and jeopardize the speed of the program.

A balance should be struck between participant profiles that are specific enough to be useful for most projects and those broad enough to reach easily.

“

Determine Research Methods

You can conduct the same audit and rough forecasting when determining the research methods your program ought to support but with two additional considerations:

1. Team strategy,
2. Individual career development.

User researchers tend to focus their work further upstream, where they’re driving product roadmaps or influencing business strategy. This can bode well for your rapid research program if it is focused on evaluative research projects, which are often quicker and cheaper to conduct.

The ultimate goal is for the rapid research program to be a complement to what your team provides or as an enabler for freeing up their bandwidth so that they can focus on the type of work they want to do more of.

Right-size Research Methods

Once you’ve determined which research methods you want to include in your rapid research program, consider the level of rigor you need to balance effort and complexity.

• Consider shorter sessions and testing with fewer participants to keep things manageable within each study.
• While there are a number of ways to analyze qualitative data, consider a lite thematic analysis to keep things manageable.
• Instead of building a robust presentation of findings, you may only have time to develop an effective executive summary of key insights.

Determining Timelines

Project timelines within a rapid research cadence are directly affected by the above scope decisions for participant profiles and research methodology. Timelines can also compound in highly regulated industries such as healthcare or banking, where you may be required to gather legal & compliance approval on every moderation guide. In order to call this a rapid research program, the end-to-end project timelines need to be shorter than a typical project of a similar scope, or at least feel that way.

1. Scope current minimum effort
   Start by jotting down the minimum amount of time it takes a researcher on your team to do each sub-step in your current non-rapid research process. Do this for the same participant profiles and methods you want to include in your rapid research program.
2. Dependencies
   Now, identify which sub-steps are dependent on others and think of ways to program them in order to build efficiency. For example, if you need legal approval on every moderation guide before data collection, which takes 2–3 days, see if Legal will commit to a change to a 24-hour SLA for rapid research-specific projects. Another example is if you typically give stakeholders a few days to provide feedback on moderation guides, change this for rapid research projects to cut down dependency time.
3. Identify compartmentalization
   In addition to programming project dependencies, consider the above guidance for compartmentalizing some of the programs in order to remove dependencies entirely, such as with recruitment. Identify what parts of the process don’t have the same dependencies in your rapid research program and can be started earlier. By removing dependencies entirely, you may be able to do several things simultaneously to speed up project timelines.
   

Once you’ve documented your current research process (steps, dependencies, timing) and the changes you need to make to build efficiencies or remove dependencies, document what ‘must be true’ in order to consistently deliver identified changes. Create a table to document all of these details, then sum up the total timelines to compare your typical end-to-end research project timeline with your potential new ‘rapid’ timeline.

Ask yourself if this seems ‘rapid’ when stacked against your average study duration.

• If not, look back at the guidance above. Ask yourself if there are other customer types that may be easier to get in front of that you haven’t considered. Consider whether you need to create a new process, expedite existing processes, or create new relationships in order to make your timelines even more rapid.
• If so, congratulations! You might have just landed on the right scope for your rapid research program. Consider whether this new rapid timeline is something that you can deliver consistently and reliably over time and whether or not you have enough access to participants, and enough budget, to carry out this cadence long-term.

Build Infrastructure, Standards & Rules

It’s time to set the foundation. Return back to the tables you made above and create an action plan with the following steps and a timeline to build the infrastructure required to bring your program to life. As part of this, you’ll need to establish the rules and standards for communicating with partners. You might consider a playbook and formal scope document to inform others of the ins/outs of the program.

Gather Buy-in

Prioritize any work that requires buy-in, generating understanding, or acquiring budget first before spending your time and energy building templates or documentation. You wouldn’t want to create a 20-page scope document outlining the bandwidth for two researchers, a limit to 1 round of stakeholder feedback, and a 24hr SLA for legal approval, only to find out others cannot commit to that.

Create Templates

You’ll need plenty of templates, tools, and processes specific to the scope of your program.

• If you’re limiting moderation guides to a maximum of 10 questions, then create a specific discussion guide template reflecting that.
• If your data analysis will be sped up by using structured note-taking templates, create those.
• If you’ve determined that all rapid research projects only require an executive summary one-pager, make that too.

Staffing

As mentioned above, even a drastically reduced version of your typical research processes still requires effort to support. You’ll need to determine, based on the expected scope and cadence of each rapid research project, how many researchers and/or research operations coordinators you’ll need to support the program. While all rapid research programs will require dedicated effort, there are creative ways of staffing the program, such as:

• A dedicated team of 1–2 researchers and 1–2 Ops coordinators to deliver projects with the greatest efficiency and quality.
• A dedicated team of 1–2 researchers who also handle the operations of running the program itself.
• A self-service program, with 1–2 Ops coordinators for supporting anyone doing the research work.
• Outsourcing the entire program to a vendor.

Work with your leadership, HR, and TA professionals on securing approval for any team restructure, needed headcount budget, or to onboard a new vendor. Then, take the appropriate steps to hire your next researcher or secure the staffing help you need to support your program.

Coaching And Guidance

Consider training, coaching, and check-in meetings as part of your infrastructure.

• If you are staffing new researchers to this rapid research program, make sure they understand the expectations and have what they need to succeed.
• If you’re implementing a self-service model, provide brown-bag sessions to partners to explain the program do’s and don’ts.
• Schedule quarterly check-ins with partners and leadership to discuss the program accomplishments and any needed adjustments to ensure it stays relevant.

Pilot, Get Feedback, And Iterate Over Time

No matter how much preparation you do or how much time and effort you spend building the alliances, infrastructure, training, and support required to run your rapid research program effectively, you will learn that there are improvements you should make once you put it into practice.

There are many benefits to piloting a new program in an organization. One benefit is that it can mitigate risks and allow teams to learn quickly and early enough to make positive enhancements.

“Piloting offers a realistic preview experience for users at the earliest stages of development. It allows the organization and design team to gather real-time insights that can be used to shape and refine the product and prepare it for commercialization.”

— Entrepreneur, “Tasting As You Go: The 5 Benefits of ‘Piloting’”

This means setting expectations early. Consider your first few projects as pilots and expect them to be rocky and imperfect. Use this to your advantage by asking stakeholders you’re closest with to be your trial projects and let them know how important their honest feedback is throughout the process. Ensure that you have clear mechanisms to gather feedback at each project milestone so that you can track progress. It is especially important to capture what might be slowing you down along the way or putting your ‘rapid’ timelines at risk.

Program Evolutions, Impacts & Considerations

Potential Evolutions & Variations

While I’ve outlined a process for getting started, there are many ways in which your rapid research program may evolve over time to meet the needs of your organization better.

• After a few periods, you might identify volume isn’t as high as you anticipated, so you extend the 1-week timeline to every two weeks.
• After a few months, your business might launch a new product line, requiring you to consider a new set of customer profiles in recruitment.
• You may decide to leverage your rapid cadence for individual segments of a longitudinal diary study to accommodate new methods.
• You might use rapid research projects to exclusively evaluate in-market products while others on the team focus on in-progress / new products.
• Rapid research projects could be a stage-gate for larger projects — proving a customer need before larger time investments are made.

However your rapid research program takes shape, revisit its goals, scope, and operations often in relation to your organizational needs and context so that it remains relevant and delivers the highest impact.

“

Solid Impacts From Rapid Research

Building a rapid research program can have a big impact and can contribute positively toward your team’s long-term strategy. One impact of instituting a rapid research program could be that now your team is freed up to focus on more generative research, which unlocks your ability to deliver deep customer insights that pave the way for innovation or strategy. And due to your new rapid pace, you may be able to keep pace with agile development and conduct end-to-end research within 2-week sprints. Another impact is that you may catch more usability issues further upstream, saving you over 100x in overhead business cost. A final impact of a rapid research program is that it can double your team’s throughput, allowing your team to deliver more research, more frequently, to accommodate more organizational needs.

Be sure to track these impacts over time so that you not only get credit for the hard work you put into building the program but so that you can sustain and grow the program over time.

Considerations When Building A Rapid Research Program

As mentioned in this article, there are many benefits to building a rapid research program. That being said, there are limitations to rapid research in regard to its pros and cons when it should be used, and if you have the available time to stand up a program yourself.

Pros And Cons

As with building any new program, one should consider both its benefits as well as drawbacks. Here are a few for rapid research programs:

Pros:

• Can free time for foundational work;
• Rapid studies may keep a better pace with development cycles;
• Can create meaningful opportunities for junior staff;
• Can double project throughput, increasing output volume.

Cons:

• Still requires work and dedicated bandwidth;
• Another thing to diligently track and manage;
• Not great for all types of research studies;
• May cost more money or resources you don’t have.

Guidance For Using The Program

Rapid Research programs are best for specific types of research which do not take a long time to complete or require rigorous expertise. You may want to educate your partners on when they should expect to use a rapid research program and when they should not.

• Use rapid research when:
  • Agility or quick turnaround is needed;
  • You need simple iterative research;
  • Stakeholder groups are easier to rally;
  • Participants are easy to reach.
• Do not use rapid research when:
  • The study method cannot be done quickly without risking quality;
  • A highly complex or mixed-methods study is needed;
  • A project requires high visibility or stakeholder alignment;
  • You have specific, hard-to-reach participants.

Ramp Up Time

While the exact timeline of building a rapid research program varies from team to team, it does take time to do it right. Make sure to plan out enough time to do the upfront work of identifying the appropriate scope, timing, and cadence, as well as gathering consensus from leadership and appropriate stakeholder groups. Standing up a Rapid Research program can take anywhere from 3 months to 1 year, depending on the following:

• Legal and compliance limitations or requirements.
• The number of stakeholder groups you need buy-in from.
• Approval of budget for outside vendors or for hiring an in-house team.
• Time it takes to build templates, guidelines, and materials.
• Onboarding, training, and iteration when starting out.

Conclusion

A rapid research program can be a fundamental part of your team’s UX Research strategy, enabling your team to take on new insight challenges and deliver efficient research at an unprecedented pace. Building a rapid research program with high intention by determining the goals, appropriate scope, and necessary infrastructure will set your team up for success and enable you to deliver more value for your organization as you scale your user research practice.

Don’t be afraid to try a rapid research program today!

Further Reading On SmashingMag

• “How To Build An Ethical User Research Practice At Any Organization”, Devin Harold
• “Eye-Tracking In Mobile UX Research”, Mariana Macedo
• “A Pragmatist’s Guide To Lean User Research”, Paul Boag
• “Better ROI For Your Digital Products: Why Continuous Research Is Key”, Suzanne Scacca
• “Ethical Considerations In UX Research: The Need For Training And Review”, Victor Yocco

(cc, yk, il)

True collaboration to create or maintain a design system is really important to making superb product design, but working with other humans is always tricky. The collaborative nature of a design system can have a lot of pitfalls. In its best form, it is the product of close alignment between developers and designers, but it doesn’t always happen that way.

Some painful memories:

• A brilliant designer I worked with made a gorgeous new set of elements and examples for the company to use, but the other designers in the company ran into many situations where it was more expedient to just copy and remake (i.e., detach) the component. The design system was used less and less since contributing to it was always a lower priority than working on a product opportunity.
• A developer I worked with built the design system components such that the padding in every text input, button, and so on always had to be the same in every layout, leading to awkward results when (for example) a button included double-byte characters, only icons, or just longer labels.
• I did a lot of work on variations of nested components (button bar, toggle buttons, segmented controls) that were designed to use the same style properties as base components (like a button), but the developers I was working with made brand new components for each that didn’t. So, I had to document and specify the many, many identical sets of style values for many, many sets of slightly different components.

The list goes on. I’m sure you have your own examples.

Getting Aligned

I’ve worked in many kinds of teams, in large companies and start-ups, where these collaboration issues kept getting in the way, even (or especially) with very talented and smart individual contributors. Getting aligned with my teammates doesn’t happen automatically or just because we go to lots of meetings. In fact, it’s very easy to start a project together and get pretty far into it before finding out we all had very different ideas about what we were doing. When it comes to complex questions of re-using an existing component vs. making something new or how to stay on the same page without blocking each other, alignment takes practice for any team.

The method for making design systems I’ll talk about probably works best in environments where you are a sole designer (or among a small number of designers) on a cross-functional team, including front-end or full-stack developers, led by a product owner. You might collaborate with other designers in other teams, but this is your “first team.” In this context, you have a lot of freedom but also a lot of responsibility.

You need an idea for nurturing the design system that doesn’t depend on organizational mandates or a specific “process” and one you can apply yourself. After all, a design system is a product with users, and we know how to balance the user’s needs with product opportunities, right? (Yes!)

The approach described below is not common or widely used, but in my experience, it has solved many team collaboration problems, including:

• Eliminating the “hand-off” step: a truly perverse mini-waterfall built into many relationships between designers and developers.
• Ensuring that all designers and developers contribute to the design system as a part of regular product work.
• Connecting design systems to product impact: measurably speeding things up by making more reusable elements and modules in design and development.

A New Use For An Old Idea

What has worked for me in these kinds of teams is a twist on an old idea: design patterns. Elsewhere, design patterns are described as “a toolkit of solutions to common problems” (Refactoring.Guru) or “description or template for how to solve a problem that can be used in many different situations” (SourceMaking). My favorite definition of the concept is from The Timeless Way of Building:

“Even the most complicated, sophisticated things are defined by a small number of composable patterns.”

— Christopher Alexander

You probably don’t think of your own design activities as a “pattern-making” practice, but the idea has a lot of very useful overlap with the practice of making a design system. The trick is to collaborate with your team to find the design patterns in your own product design, the parts that repeat in different variations that you can reuse. Once you find them, they are a powerful tool for making design systems work with a team.

Design Patterns For Design Systems

To see how, first, let’s get specific about the definition of “design pattern” in our product design context. Let’s call a “design element” a small isolated component like a “button,” “chip,” or “card,” and let’s describe a design pattern as a reusable combination of elements for a purpose, a larger module that can do some product experience work on its own.

The elements are the focus of the design systems in most companies I have worked at, and creating them is important and a lot of work. I am sorry to say, however,

Having a good set of elements doesn’t help you get the value out of a design system, save you much time, or by itself ensure designers and engineers are aligned.

“

For this reason (and the availability of great existing elements from Tailwind, Bulma, Skeleton, or of course, MUI) I have de-emphasized them in my own work, often just restyling elements created by others. The elements are important, and you do need a set that everyone uses, but they don’t do the work of implementing a feature or valuable experience.

You might be thinking that many of these systems do come with combinations of elements, like the “pre-built components” that MUI ships with for a “Data Grid” or the “blueprints” in the Salesforce Lightning Web system for a “List Builder.” Are these the patterns that can help us?

Unfortunately, they are not. These are patterns for sure, but they probably aren’t useful as-is for you. Your product has its own needs. You can use them as a starting point, but in my experience, it takes longer to rework them into something that solves the problem.

To be useful for you, a design pattern has to come out of and express some reusable part of your particular product experience — those parts of the design you find yourself making again and again.

Here are some examples of these useful, product-specific design patterns in products:

• A tile in a TV app, which people use to browse things to watch in lists. This is sort of a “card” pattern, but not really! Every streaming service has its own particular kind of tile and includes different content and controls that suit that product best.

• A dashboard meter in a data-visualization app like Google Analytics. Again, this is sort of a “panel” pattern, but not really! Each part of the dashboard might have different kinds of meters, with titles, category labels, “big numbers,” charts, text snippets, or filtering controls, and the number of elements in a meter varies by app.
• A tree view in a social genealogy app that lets users see relationships between people in a way that adapts for display on small devices. Some products focus on researching your family, others on visualizing relationships.

In each of these cases, designers and developers made their own product-specific patterns. Those patterns are valuable because once a team has defined them, the next project that the team does gets easier. They develop and grow a kit of parts that save them time (and that they can polish and refine). The patterns, not the elements, are the heart of this (better) kind of design system.

Taking this a step further, I would say that a lesson from these patterns is that

All designers and developers can make their design system better and more effective by focusing on patterns first (instead of the elements), making sure that each is completely reusable and polished for any context in their product.

“

Pattern work can be a fully integrated part of both getting some immediate work done and maintaining a design system.

Design Patterns For Collaboration

This kind of design pattern activity can be a direct path for designers and developers to collaborate, to align the way things are designed with the way they are built, and vice-versa. For that purpose, a pattern does not have to be a polished design. It can be a rough outline or wireframe that designers and developers make together. It needs no special skills and can be started and iterated on by all. And collaborating on this form of a design pattern makes it possible for designers and developers to work in parallel.

That’s all pretty abstract. It’s easier just to try an example.

A Design Pattern Story

Let’s say that we’re on a team together, working on an app called “WeTrip.”

The product opportunity comes from the reality we have all probably dealt with: when a group of people or a family travels together, they usually have a lot of trouble deciding what to do or where to eat.

This app makes group travel easier by giving people an easy way to propose and vote on the plan for each day. Instead of having to have long conversations that feature such sentences as “I dunno, what do you want to do?” travelers have a tool so people can have less trouble with the logistics of a vacation or a trip.

The app has some seed funding, but in order to survive needs some “minimum viable” version of itself to prove that it’s something needed and valuable. Everyone on the team wants to get going! Nobody wants to be waiting for a design.

The designers, engineers, and product people all meet and pick the names of some basic objects and their properties. They start with a “Person,” someone on the trip who votes on places to go together for a meal or sightseeing. They sketch things out on a whiteboard.

This is their first pattern.

They move on, describing things like a “Place,” a location someone wants to visit.

And an “Occasion” pattern, a time the group will do things together like eat, and so on.

The process can work with a physical whiteboard, shared document, collaboration app, or whatever. All that is important is that everyone participates so they are aligned and get the details they need to start work.

With this rough outline, they can see that some of the parts of these patterns are elements they can pull from existing design systems.

They decided to use some restyled MUI elements. Those have defined properties (named attributes of a component, like “color” or “content”) already and will be a nice shortcut. They pull them into Figma (their design tool of choice) and development (a React web app with the MUI library as a dependency). They add some of these MUI elements and their standard properties to each pattern.

For each pattern, they create a page in a shared Notion document that everyone can edit and update. They start by adding properties from the MUI elements they’ve chosen.

The team combines the properties from the MUI elements with others they’ve sketched out and flattens the properties a bit. They group the properties so that it’s clear what is most important and secondary.

The Figma component will have a different variant for each important property (like activity or actionsAvalable). And each of the element properties will become part of the component in development, of course. In this way, the design and development are aligned — not necessarily completely the same in every detail, but in the ways that matter, moving in the same direction.

The team talks about more ideas for each pattern. Adding properties doesn’t mean they will appear in the final design, just that an idea could be part of the experience, so it’s a low-stakes conversation where final decisions don’t need to be made.

After going through the same process for the “Place” and “Occasion” patterns, the designers and developers have a lot of what they need to make progress. They have agreed on the names of things and what the important properties are. The patterns are defined in a form that the whole team can see and edit, and they start work.

An engineer might stub out a “Person” component like the one below while a designer is sketching it out in Figma with no bottlenecks.

Of course, the engineers figure out that there are some properties they need that they missed at first, like a presence property for a user (after all, in order to know how to show a user notification, it helps to know if that user is using the app right now or a notification would be better). They add that to the document and message the rest of the team.

At the same time, the designers are fleshing out the patterns, using the MUI Figma library where possible, and adding new components where needed. When the team sees the addition of a presence property to the Person pattern, they decide to make a presence indicator and group it with the primary elements. As long as they are keeping the simple pattern document up to date, there is no handoff or waiting around.

Sometimes there are big questions to resolve about the experience. But that is the occasion for the next meeting about what the primary views in the app should be.

The team meets again and comes up with a “People” view (a list of people on the trip, with their status), a “Schedule” view (with a list of occasions and the plan for each day), and a “Proposals” view (to see and propose places to go) — more design patterns. For this pattern documentation, one of the product owners wants to use a wireframing tool instead of an outline (as in the previous example). That’s fine. Pretty much anything works to describe patterns as long as it shows elements and groups (and it’s what a team likes using).

In these patterns, lists of Person, Occasion, and Place patterns are nested inside of each view. It becomes clear that there will have to be two versions of a Person pattern in the app, so the property is added to that pattern.

As they work, if an engineer gets a little ahead of whatever design work exists, they can either use standard MUI components or add a proposal to the patterns document. And designers can add new components if the design starts to need them. All parties are able to make changes without blocking each other.

Organizational Needs

Now, I should pause here to note that there are plenty of teams where this kind of pattern definition is not the primary product definition activity and where other stakeholders (engineering managers and so on) have a say in how the design system is built. Not all teams are small and have as much ownership. Even in larger companies, however, I believe design patterns can be very useful and help make a case for development work (since they show how the design system is helping teams get things done). But in those contexts, design patterns may be small parts of other organizational processes and not as important overall.

In this small team, the struggle to justify time on a design system is for a different reason: there’s a great temptation to put it off because everyone wants very badly to ship something sooner, and it feels “extra.” But every member of the team also knows that the minute they want to iterate on their product, that work will be easier if they have created a design system, and so they keep their good practice going.

Putting It All Together

Once the patterns are established as a way for the entire team to collaborate, final designs and views come together more quickly (because the entire team was able to start together and finish together). The visual design happens at the end rather than being a bottleneck before people can start work.

Integrating Patterns In Product Planning

As working with patterns becomes more established and mature, patterns can be broken out into separate repositories and polished on their own, either as a separate library in Figma or a set of modules in development. If a team gets larger, there might even be an official owner for each pattern who handles bugs or polishes details.

Each pattern properties list can be turned into an API once a module is trustworthy to use in new design and development. In the WeTrip example, the scrolling list of places for today is reused in a search results view when it’s added later.

Since patterns are by their nature only the reusable parts that save designers and developers time, patterns can make working on the design system something with a hard-core product improvement impact. Re-use can be captured as a key metric and a factor in prioritization. The amount of reusable work being generated can be tracked automatically in design and development tools (much like test coverage).

If the reuse of patterns becomes common enough that it needs careful management, patterns can become part of a federated module build process (like what is built into WebPack 5). In short: patterns lend themselves very well to being part of the toolchain of many modern development processes.

Your Turn

I imagine that there are many teams that already practice some of these concepts in the collaboration between design and development, and I am very eager to hear about that! It has been a happy improvement as a method for myself and the people I have worked with, and I would love to hear your stories.

For others, I hope this has been a good introduction to a vision for you and your team of an alternate reality where you can seamlessly collaborate on design systems without as many pitfalls. I wish the best to you and your team as you find your way to such harmony and a happy design outcome!

(cc, yk, il)

At the start of the Coronavirus pandemic, I led the redesign of a tablet app used by sales representatives of the world’s largest food & beverage company. Never having been a sales representative, nor having ever played one on TV, I was curious about their typical workday. Adapting the first rule of design — Know Thy User — our lockdown approach was to conduct video interviews. As soon as company restrictions allowed, I met two sales representatives at a local Walmart.

Masked and socially distant, I walked a mile in their shoes through the dairy, pet food, and freezer aisles. This single visit uncovered many insights that had not come up in the video interviews and online walkthroughs. I shared this with the team, spread across the world, and everyone could empathize with the sales representatives: juggling multiple devices and printouts, struggling to make technology work in extreme conditions like a low-lit walk-in freezer, and trying to work without hindering harried shoppers. The sales reps would repeat these tasks between twenty and thirty times a day, five days a week, which sounds about as fun as it is.

Our team used these insights to experiment with different concepts, refine them based on feedback from sales representatives, and launch a redesigned app that received glowing feedback from the representatives and praise from the company stakeholders.

Curiosity, empathy, and collaboration were some of the designer-like or designerly behaviors we used to transform the sales representatives’ experience. These behaviors are a few of the behaviors and skills that designers use throughout the design process. Design researcher and educator Nigel Cross first used the word designerly to refer to underlying patterns of how designers think and act.

Designers spend years learning technical design skills, and as they use those hard skills to do their jobs, their designs are impactful when they actively use these non-technical designerly skills and behaviors. Designerly skills and behaviors make us creative and innovative and distinguish us from machines and technology like Artificial Intelligence (AI).

Yes, the same AI that you can’t avoid reading or hearing about on social media or in the news. Stories and posts about people being equally worried about layoffs and AI taking over their jobs, and some even suggesting that AI is why those jobs won’t come back. Creators and people traditionally considered creative, like artists, writers, and designers, seem especially concerned about AI making them redundant. Guesstimates of when AI will perform tasks better than humans just add to the frenzy.

The assumption that AI will replace people is based on the premise that both have the same qualities, abilities, and skills. But that’s just not true. Artificial intelligence is simply technology that is taught to mimic human intelligence to perform tasks. It is trained on large amounts of data — by some estimates, the equivalent of a quarter of the Library of Congress, the world’s largest library.

AI is better than humans in certain tasks that involve processing and analyzing large amounts of data quickly, accurately, rationally, and consistently. Artificial Intelligence may create, but it can’t be creative. It cannot match humans in areas that rely on skills and behaviors that are distinctly human, like intuition, emotional intelligence, cultural context, and changing situations.

Humans are conscious beings with a subconscious mind that can influence decisions and change those decisions based on experience, context, environment, wisdom, and understanding. This takes us years, decades, and even a lifetime to learn and apply, and it cannot be programmed in machines, no matter how sentient they may appear to be. Not for the foreseeable future.

Being designerly takes thinking, feeling, and acting like a designer. I’ve been thinking about and observing what it means to be designerly, and by using six such skills and behaviors, I will discuss how humans have an advantage over AI. I used the head, heart, and hands approach for transformative sustainability learning (Orr, Sipos, et al.) to organize these designerly skills related to thinking (head), feeling (heart), and doing (hands), and offer ways to practice them.

Using our head, heart, and hands together to make a transformative difference is what distinguishes us from AI and makes us human, creative, and innovative.

“

Head

The skills, behaviors, and habits to help you think like a designer and create a designerly mindset include curiosity and observation.

Cultivate Curiosity

Curiosity is the desire to know. It is a pleasure to ask, explore, experiment, discover, learn, and understand. We see this relentless curiosity in small children, who explore everything novel around them. As they grow up, that curiosity starts getting stifled in many, partly because they are taught to look for an answer instead of exploring questions.

This curiosity stifler of focusing on the answer is what AI is programmed to do. AI is also limited by its knowledge and understanding of the world, unable to explore beyond those boundaries. Also, without physical senses, AI cannot experience the world and be curious about things we see, hear, touch, taste, and smell around us.

This gives us a leg up on AI if we can overcome other curiosity-stiflers like self-consciousness, the shame of not knowing, and the fear of ridicule.

Let’s deconstruct curiosity to understand different types of curiosity we can nurture and build in ways AI cannot. In the 1950s, British-Canadian psychologist Daniel Berlyne presented a model distinguishing between two types of curiosity: perceptual, based on stimulation, and epistemic, driven by a genuine desire for knowledge. He also distinguished between two types of behaviors to address that curiosity: diversive exploration, motivated by a need for novel stimulation or a desire to explore, and specific exploration, motivated by curiosity and a search for new information.

This gives us four dimensions of curiosity, which have their time and place, but the quadrant we are discussing lies at the intersection of the desire to explore and the desire for knowledge. Diversive-Epistemic curiosity is where people use the desire to explore and apply it to learning new things. TED Talks are an example of knowledge exploration, where people can learn about just about any topic they care to explore.

You can cultivate curiosity by being intentional in developing the joy of exploration. Set some time aside every day to learn something new, and pick topics that interest you. Start small and gradually increase the time you spend learning something daily as well as for expanding the topics. I would suggest starting with just 10–20 minutes a day. That’s enough time to watch a TED talk, read a book summary, or start learning a new skill. Reading multiple book summaries on a topic is an easy way to identify the next book you should read cover to cover over a few days or weeks.

Curious exploration broadens the mind to new ideas, perspectives, and approaches, lays the foundation for the cross-pollination of ideas, and leads to creative and innovative solutions.

“

Advantage: People

Notice & Observe

While often used as synonyms, noticing is seeing something for the first time, while observing is paying close attention to something or someone. Being creative begins with noticing what others have overlooked, followed by closer, intentional observation when warranted.

In traditional ethnography, researchers observe people and cultures in an immersive manner. Design ethnography or digital ethnography is not as extreme; researchers and designers only spend days or weeks observing users, instead of years. The operative word is observing — watching and listening. The payoff is that ethnography can inform and improve design decisions. You don’t need to wait for your next project to observe people. Instead, make it an everyday habit, and you will not only hone your powers of observation, but it will also gradually become second nature.

AI cannot do this because it relies on the limited data it is trained with, unlike people who have an unlimited ability to notice and observe new things all the time. Even if it could overcome that hurdle, without emotions and context, AI would not be able to understand the feelings and emotions involved in the people or situation being observed. We can observe a situation and understand the context and meaning behind it as we process what we are noticing and observing.

We can build our power of observation by taking the time to pay attention to people and their behavior. You can do this anytime — while you are in a coffee shop or waiting in the grocery checkout line. Get your nose out of that glowing rectangle, remove your headphones, and look around. While you may end up seeing others captivated by their own glowing rectangles, start observing the details:

• What type of phones are they using?
• Are they passively consuming content or actively interacting with a game or person?
• What emotions do you notice?

When you start paying attention, you will be surprised by things you may have seen but not noticed or observed in the past. And the more you practice, the more natural it will become. Noticing and observing the world around you in new and different ways provides inspiration and helps reveal issues and patterns, leading to better ideas and solutions.

Advantage: People

Heart

The skills, behaviors, and habits to help you feel like a designer and create a designerly attitude include empathy and advocacy.

Be Empathetic

My favorite definition of empathy is by Roman Krznaric in his book, Empathy: Why It Matters, and How to Get It:

Empathy is the art of stepping imaginatively into the shoes of another person, understanding their feelings and perspectives, and using that understating to guide your actions.
— Roman Krznaric

There are three types of empathy, according to psychologists Daniel Goleman and Paul Ekman:

1. Cognitive,
2. Emotional,
3. Compassionate.

The empathy that results in thinking, feeling, and doing are all important and have their place in our lives, but the empathy that results in doing, compassionate empathy, goes beyond understanding others and sharing their feelings by driving us to do what we can to help them. This helps us make a difference in people’s lives. I am talking about genuinely employing empathy, not doing it as lip service or checking a box off in the process.

Successful designers routinely use empathy in human-centered design. They start with an understanding of the people they are designing for by observing them and immersing themselves in their users’ environments. Designers then apply that deep understanding to design products and experiences that work for those users.

While AI can measure people’s emotions from their expressions and is being trained to mimic human emotions, AI machines and tools don’t have consciousness and cannot understand or experience emotions. AI also lacks personal, shared experiences that allow us to show empathy to varying degrees.

Even if you are not empathetic by nature, try building it over the coming days with one or more interactions with others:

• Suspend judgment.
  It is difficult to be empathetic if you are mentally judging the other person. If you voice that judgment, you will not be able to be empathetic, and the other person may stop sharing with you.
• Listen attentively with your eyes and ears.
  Engage more than one sense to listen actively so that you can respond deeply. Pay attention to what the other person is saying, not how you need to respond. Be completely present with the other person, putting aside our modern distractions.

Being empathetic takes practice for most of us. Be empathetic.

Advantage: People

Advocate For Others

User advocacy is at the heart of designerly skills and behaviors. The skills and behaviors of curiosity, observance, and empathy create a deep understanding of users and their needs, but that is only the beginning. User advocacy brings all of the above to life and turns that respect for the user into action to address their needs. It also shares that understanding with others involved so they, too, can identify with users.

Being a user advocate means representing the interests of users in an ocean of competing interests. A user advocate represents the user throughout the design process, giving the user a voice, bringing them to life, and making the impersonal user personal.

Without curiosity, observation, and empathy, AI is unable to use those skills and behaviors to be an advocate. AI also lacks the creativity to come up with solutions to address the needs of others. AI can be programmed to follow rules and guidelines to protect people, an increasingly important area of ethical AI. If you’ve been following the news, this has led to mixed results, sometimes going off the deep end in some instances. No points for guessing that AI cannot make ethical judgment calls on its own.

However, people can do that. And we can manifest it in design by doing what’s right for users. I previously wrote about principles for designers; two of them summarized below:

• Do no harm.
  Your decisions may affect the minds, behavior, and lives of your users and others around them, so be alert and guard against misusing the influence of your designs. Ask yourself: Would you be comfortable with someone else using your design on you, your parents, or your child?
• Be aware of your responsibility to your intended users, unintended users, and society at large.
  Accept appropriate responsibility for the outcomes of your design. During design, follow up answers to “How might we…?” with “At what cost?”

Remind yourself that you are not the user and use your knowledge of the user to represent the user when they are absent. Advocate for them.

Advantage: People

Hands

The skills, behaviors, and habits to help you act like a designer are brought to life through visual communication and collaboration.

Communicate Visually

Storytelling is an important skill that vividly paints a picture in people’s minds, driving them to action. It converts words to a visual that people will remember, but even then, different people may all visualize the same thing differently. This happens whether you’re listening to your favorite inspirational speaker or reading your favorite fiction author. No matter how painstakingly a speaker or author describes a character or a situation, chances are high that two people sitting right next to each other both have different images in their minds. However, when there is an accompanying image or visual, people are literally on the same page (or slide, graph), which slashes the risk of them imagining different things. That’s the power of thinking and communicating visually.

Not all designers are artistic, but you don’t have to be artistic to be a visual thinker or communicator. Even a rough sketch on a whiteboard or a notepad can often communicate information faster than the written or verbal form. The aim is to make ideas tangible quickly, to get to the right idea faster. User researchers and designers commonly use visualizations to help them make sense of data and come up with new ideas.

Without physical senses, AI cannot think or communicate visually. Without emotions, the ability to understand context, and creativity, AI cannot ‘read the room’ or come up with ideas outside its dataset and communicate outside its current language abilities, making visual communication impossible. However, people can use AI as a tool to communicate visually, especially with tools that convert text prompts to images.

Next time you describe something, instead of writing a page of instructions or talking it out, use a quick sketch. Describing a process? Boxes and arrows are very powerful. Talking about a screen or two? A rough layout, highlighting the important parts, along with an arrow showing how you get from one to another, is more powerful. Or a quick screen recording. Sketching not your thing? Use images. I’ve been known to use LEGO photography in my articles and presentations. You can also mock up something without advanced design tools. For instance, I had a non-designer boss who communicated visually using PowerPoint. And if you are in the mood to explore and experiment, try one of the many AI text-to-image generators.

Show. Don’t only tell.

Advantage: People

Collaborate

We can achieve much more, much faster, working together. It is uncommon for a single person to come up with the best solution by themselves. Gone are the days of the lone designer working on a solution by themselves. No single person or discipline has the answer to all problems, design or otherwise. It usually takes a team from different disciplines and backgrounds to solve big problems.

A multi-disciplinary team working together toward a common goal is an example of collaboration. This brings different perspectives into the creation process, from idea generation to providing feedback and validation during the creation process.

Collaboration relies on understanding and navigating social dynamics. While some people struggle with that, AI fails. Ditto for the ability to negotiate or compromise. Some people struggle with that too, but AI cannot unless specifically programmed to. Collaboration also requires the ability to adapt based on live inputs, feedback, or the situation, which traditional AI has limited capability to do beyond its training phase.

That said, AI can support collaboration if you think about people collaborating with AI tools. We’ve seen how AI tools can generate designs, logos, layouts, code, write content, do homework, and generate legal documents. But there are enough examples of it being plain wrong, which is why we should use them as assistants in our workflow.

AI tools can support the efforts of designers and researchers by reducing manual human effort (e.g., transcribing), making people more efficient and saving time (e.g., text-based video editing), providing machine learning-based insight (e.g., attention prediction), and augmenting human effort (e.g., AI evaluation). Just remember that AI is not perfect, and there are plenty of mistakes and errors, as shown below (I’m not India-based, did not write The UX Book, and never taught at the schools mentioned).

Next time you are working on a project, get others involved. These could be different departments, different specialties, different backgrounds, and, where appropriate, even customers — maybe even AI.

Advantage: People

Conclusion

I’ll use an analogy from the restaurant industry of chefs and cooks to draw parallels between humans and AI. Chefs can cook meals by themselves, but they are more effective when they focus on the strategic work of planning the menu, overseeing the cooks who tactically follow recipes, sometimes improvising, and applying the finishing touches before the meal is served to customers. Robots have replaced parts of what cooks do and technology that may suggest recipes and meals, but it still needs the chef to make the final decisions.

Artificial Intelligence is changing the way we work and live, making us more efficient. As designers, we can use AI to support ideation, analyze data, generate variations, and predict behavior based on patterns. This will free us up to focus on more strategic aspects of design, using the designerly skills above which are impossible to duplicate, and for which people have the advantage over AI. We can use AI to make us more efficient and allow us to do what we do best — understand our users, stakeholders, and real-world constraints and then collaborate with others to design successful solutions. What we do won’t change as much as how we do it, with AI augmenting, instead of replacing us.

Advantage: People

AI cannot be trained to mimic these designerly skills the way we can practice and develop them because it is not conscious, cannot adapt, and does not have the experiences, emotions, or intuition that we have. AI can artificially mimic some but cannot match human abilities in these areas. Skills like curiosity, observation, empathy, advocacy, visual communication, and collaboration are key non-technical skills to help us use the head, heart, and hands together to be more designerly and thrive in a world of AI.

Resources:

Links

• “What Is ChatGPT Doing … and Why Does It Work?,” Stephen Wolfram
  Yes, AI is more than ChatGPT, but this is the AI tool that’s currently viral
• “Why Chatbots Sometimes Act Weird and Spout Nonsense,” Cade Metz
• “What Has Feelings?,” Kristin Andrews and Jonathan Birch
• “Achieving Transformative Sustainability Learning: Engaging Head, Hands And Heart,” Yona Sipos, Bryce Battisti, Kurt Grimm
• “The Ethics Of Persuasion,” Lyndon Cerejo
• “The Future Of Design: Human-Powered Or AI-Driven?,” Keima Kai
• “How AI Technology Will Transform Design,” Nick Babich & Gleb Kuznetsov

Books

• Designerly Ways Of Knowing, Nigel Cross
• Curious: The Desire To Know and Why Your Future Depends On It, Ian Leslie
• Empathy: Why It Matters, And How to Get It, Roman Krznaric

(cc, yk, il)

AI-generated art is everywhere on the web. If you are an active Instagram, Twitter, or Pinterest user, you likely saw interesting artworks created using text-based tools like DALLE, Midjourney, or Stable Diffusion. The magic of these tools is that to generate images, all you need to do is to provide a string of text that describes what the image is all about. Many AI-generated works look stunning, but it’s only the beginning. In the foreseeable future, AI tools will be so intuitive that everyone can express their ideas. The rise of tools that have AI at their core makes design practitioners wonder if AI will replace designers.

In this article, we will overview the current state of design, answer common questions designers have about AI tools and share practical tips on how designers can make the most of using AI tools.

Design Tools Learning Curve And Creativity

Mastering any skill takes time, and design is no exception. Designers have a lot of great tools in their arsenal, but the process of honing design talent takes years. You need to invest years of your life to get to the point when you can create decent artwork.

No matter how creative you are, you must spend time creating something using your hand. Most of the time, it’s impossible to go from idea to solution in a few minutes. As a result, sometimes it feels like design is 95% craft and only 5% art.

Much energy goes into the visualization of ideas, and it can be very frustrating to learn that your idea doesn’t resonate with the audience. Once you publish your work, you might learn that it’s not something your audience wants. An unsuccessful design pitch leads to a situation when your work goes straight to the garbage bin.

But in the near future, you will be able to use shortcuts and go from your idea to the final work in a minute rather than hours or days. You will be able to avoid the tedious process of physically making art and instead become a visioner who tells the computer what you want to build and lets the computer do the work for you. And you can experience the power of AI tools even today. Use Dalle.2 by OpenAI, Midjourney, or Stable Diffusion.

Let’s answer a few popular questions that designers have regarding AI.

Can I Take Credit For Artworks Created By AI?

The answer is yes, you can, but you shouldn’t. Many AI artwork generation tools available on the market don’t give designers much freedom to control the process of artwork creation. As a designer, you explain your intention to the AI system through plain words and let the tool do its magic. You have limited or no information on how the tool works.

Because modern AI tools don’t give you much freedom to impact the design direction, the final result misses the human touch. Right now, you cannot convey a lot of personality in works generated by AI tools. At the same time, it doesn’t mean this will be true in the future. We will likely see the tools that give designers more control over the process of creating visual assets.

Will AI Take My Job?

Many professional artists panic because they see how good artificial intelligence has become at creating artwork. AI-generated art fills the market and takes potential clients. Instead of hiring a human digital artist, many companies ‘hire’ AI to do the job because it can do design work for a fraction of the cost. This trend not only takes jobs but also lowers the market value of the art — the artworks become less valuable because people see how easy it is to generate artwork using AI.

What happens right now is a predictable situation. It’s just how business works. If a business can save money by following a more effective approach, it will do it. During the industrial revolution of the 19th century, some English textile workers intentionally destroyed textile machines because they were afraid that machines would replace them. Of course, machines replaced some of the roles (typically, roles where heavy lifting or monotonous work was required), but they didn’t replace humans. The same is true for AI tools. AI won’t completely replace human ingenuity; it will complement human potential.

The true power of AI is not about replacing humans but instead giving them a massive boost in productivity.

“

If you think about the primary reason why people invented new tools in the first place, it becomes evident that work efficiency was the number one reason — the same works for AI. AI will help us work more efficiently.

The quality of your ideas and your ability to understand user problems and create solutions that help people is critically important at any age of product design, including the age of AI design.

Will AI Tools Lead Us To Generic Design?

When designers use the same tools and data inputs, they could easily end up making a homogenized design that looks generic.

But the problem of homogenized design is not new. Dribbblisation of design was a massive topic in the design field for a few years. Many people in the industry worry about the situation when a vast majority of the product design work on Dribbble looks the same (the same styles are applied).

Will the problem become worse when AI tools are popularized? The answer is no. If you look closer at the artists who publish their work at Dribbble, you will notice that there aren’t many artists who set trends. Once a new trend emerges and it resonates with the audience, many designers start to follow it and designs that look trendy.

“Out in the sun, some painters are lined up. The first is copying nature; the second is copying the first; the third is copying the second.”
— Paul Gauguin

AI tools won’t replace all designers anytime soon because imagination and creativity will still be the powerful properties of the artist’s mind. Until AI technology becomes sophisticated enough to do creative thinking, we don’t have to worry about creating AI trends. The point is, soon, it will be possible to curate the data you will provide as an input to the system, and the AI system will learn from you, so the results will include a lot of your personality.

Can We Face Legal Troubles Using AI Tools?

Early in 2023, a group of artists filed a class-action lawsuit against Midjourney and Stability AI, claiming copyright infringement. Both Midjourney and Stability AI were trained using billions of internet images, and this suit alleges that the companies behind those tools “violated the rights of millions of artists” who created the original images. Whether or not AI art tools violate copyright law can be challenging to determine because the database used for training is massing (billions of images). But one thing is for sure — the AI tools create new images based on the knowledge they learned due to the training.

Can designers face legal troubles using AI tools in the future? So far, there is no single correct answer to this question, but the world is quickly embracing AI art (i.e., stock photo banks will start selling AI-generated stock imagery), and we will likely have more clear rules on how to use AI-generated images in the future.

The New Chapter In Design: Co-creation With AI

When Steve Jobs explained the power of computers, he said,

“What a computer is to me is it's the most remarkable tool that we've ever come up with, and it's the equivalent of a bicycle for our minds.”
— Steve Jobs

It’s possible to rephrase this quote in the context of AI, saying that AI is a bicycle for our creativity — our ability to create something new. Creativity is based on life experiences and ideas that creators have. AI cannot replace humans because it uses the work that humans create as an input to produce new designs. But AI can boost creativity greatly because it becomes a sort of ‘second brain’ that works with a creator and provides new inputs.

Of course, modern AI tools don’t give us much freedom to tweak the AI engine, but they still give us a lot of power. They can provide us with ideas we didn’t think of. It makes AI an excellent tool for discovery and exploration.

Here are just a few directions of how humans and machines can work together in the future:

Conduct Visual Exploration

AI tools capture the collective experience of millions of images from photo banks and give creators a unique opportunity to quickly explore the desired direction without spending too much energy. AI becomes your creative assistant during the process of visual exploration. You prompt the system with various directions you want to pursue and let the system generate various outcomes for you. You evaluate each direction and choose the best to pursue. The process of co-creation can be iterative. For example, once you see a particular design direction, you can tell the system to dive into it to explore it.

There are two ways you can approach visual exploration, either by following text-to-image or image-to-image scenarios.

In an image-to-text scenario, you provide a prompt and tweak some settings to produce an image. Let’s discuss the most important properties of this scenario:

• Prompt
  A prompt is a text string that we submit to the system so that it can create an image for you. Generally, the more specific details you provide, the better results the system will generate for you. You can use resources like Lexica to find a relevant prompt.
• Steps
  Think of steps as iterations of the image creation process. During the first steps, the image looks very noisy, and many elements in the image are blurry. The system refines it with every iteration by altering the visual details of the image. If you use Stable Diffusion, set steps to 60 or more.

• Seed
  You can use the Seed number to create a close copy of a specific picture. For example, if you want to generate a copy of the image you saw on Lexica, you need to specify the prompt and seed number of this image.

In the image-to-image (img2img) scenario, AI will use your image as a source and produce variations of the image based on it. For example, here is how we can use a famous painting, Under the Wave off Kanagawa, as a source for Stable Diffusion.

We can play with Image Strength by setting it close to 0 so that AI can have more freedom in the way it can interpret the image. As you can see below, the image that the system generated for us has only a few visual attributes of the original image.

Or set Image Strength up to 95% so that AI can only create a slightly different version of the original image.

Our experiment clearly proves that AI tools have an opportunity to replace mood boards. You no longer need to create mood boards (at least do it manually using tools like Pinterest) but rather tell the system to find ideas you want to explore.

Create A Complete Design For Your Product

AI can be an excellent tool to implement ideas quickly. Today we have a long and painful product design process. Going from idea to implementation takes weeks. But with AI, it can take minutes. You can create a storyboard with your product, specify the context of use for your future product, and let AI design a product.

Providing these details is important because AI should understand the nature of the problem you’re trying to solve with this design. For example, below are the visuals that you can create right now using a tool called Midjourney. All you need to do is to specify the text prompt “mobile app UI design, hotel booking, Dribbble, Behance –v 4 –q 2”.

I think that part “mobile app UI design, hotel booking, Dribbble, Behance” is self-explanatory. But you might wonder what –v and –q means.

• –v means a version of the Midjourney.
  On November 10, 2022, the alpha iteration of version 4 was released to users.
• –q means quality.
  This setting specifies how much rendering quality time you want to spend. The default number is 1. Creating the image in higher values takes more time and costs more.

It’s important to mention a couple of common issues that images generated by Midjourney have:

• Gibberish texts
  You likely noticed that the text on mobile app screens in the above example is not English.
• Extra fingers
  If you generate an image of a person, you will likely see extra fingers on their hands and legs.

In the foreseeable future, a design created by AI will automatically inherit all industry best practices, freeing designers from time-consuming activities like UI design audits. AI tools will significantly speed up the user research and design exploration phase because the tools analyze massive amounts of data and can easily provide relevant details for a particular product (i.e., create a user persona, draft a user journey, and so on). As a result, it will be possible to develop new products right during brainstorming sessions, so designers are no longer limited to low-fidelity wireframes or paper sketches. The product team members will be able to see how the product will look and work right during the session.

Create Virtual Worlds And Virtual People In It

No doubt that the metaverse will be the next big thing. It will be the most sophisticated digital platform humans have ever created, and content production will be an integral part of the platform design. Designers will have to find ways to speed up the creation of virtual environments and activities in them. At first, designers will likely try to recreate real-world places in the virtual world, but after that, they will rely on AI to do the rest. The role of designers in the metaverse will be more like a director (a person who will tailor the results) rather than a craftsman who does it with their hand. Imagine that you can create large virtual areas such as cities and get a sense of the scale of the city by experiencing it.

It’s Time To Open A New Chapter In Design

AI-powered design solutions have an opportunity to become much more than just tools designers use to create assets. They have the chance to become a natural extension of the team. I believe that the true power of AI tools will shine when tools will learn from a creator and will be able to reflect the creator’s personality in the final design. Next-gen AI will learn both about you and from you and create works that functionality and aesthetics meet your needs and taste. As a result, the output the tools will produce will have a more authentic human fingerprint.

The future of design is bright because technology will allow more people to express their creativity and make our world more interesting and richer.

Further Reading On SmashingMag

• “The Future Of Design: Human-Powered Or AI-Driven?”, Keima Kai
• “How AI Is Helping Solve Climate Change”, Nicholas Farmen
• “Building A Simple AI Chatbot With Web Speech API And Node.js”, Tomomi Imura
• “Algorithm-Driven Design: How Artificial Intelligence Is Changing Design”, Yury Vetrov

(yk, il)

This article is sponsored by Gong.io

Perhaps this is a controversial statement, but I hate it when UI and UX designers are referred to interchangeably. To my mind, at least, they are different roles, with the clue being in the names.

User Interface designers design the interface, while User Experience designers are concerned with the entirety of the user’s experience.

In most cases, that experience extends beyond a single interface, encompassing many touchpoints, both online and off. Nowhere is this more evident than in a business-to-business experience.

In this article, I want to explore some of the unique characteristics of a B2B sales experience and, hopefully, highlight how a UX designer would consider the entirety of the experience, not just the interface elements.

Let’s begin by exploring what makes B2B sales experiences an interesting challenge for us as UX designers.

Why B2B Is An Interesting UX Challenge

Although we must be wary of generalizing, in many cases, B2B experiences are more complicated than B2C.

This complexity is born out of the nature of B2B. Transactions between businesses tend to be:

• Higher in value.
• Involve more stakeholders.
• Take longer.
• Involve more interactions between parties.
• More highly regulated.
• Often include more complex products and services.

Take, for example, one of my enterprise clients. It is not uncommon for months to pass from them initially getting in touch about a project to me starting work.

Over that time, they may have:

• read one of my articles or heard me speak,
• viewed my website,
• reached out on LinkedIn,
• exchanged countless emails,
• spoken over Zoom,
• read my proposal,
• signed a contract.

Each of the above works together to shape the client’s experience, not to mention everything I do once work on their project begins.

While a UI designer may work on some of the above touchpoints, a UX designer cares about all of them and how they work collectively together to shape the experience.

With so many potential interactions in a B2B sales journey over an extended period, it is vital to have a clear picture of how they fit together. That is why journey mapping is so popular among UX designers.

Map The Customer Journey

Even if a client commissions me to address a part of a B2B experience, I still favor starting with journey mapping (if they haven’t done so already). Understanding where a particular touchpoint fits into the bigger picture is essential for success.

For example, I work a lot on optimizing the conversion rate of landing pages. Where users have come from is a significant factor in ensuring the success of that landing page. For example, traffic that comes from ads will have different expectations from those that come from organic search.

I care equally about what the user will do next. Any landing page has to prepare the user for that experience. For example, if salespeople contact every lead and users are not expecting that call, this will lower their conversion rate on those calls.

Understanding where in their journey a user also helps me to tailor appropriate messaging and calls to action. Get this wrong, and the experience falls apart. Mapping a journey is an excellent way of designing a sales funnel that gently nudges the user through the process without undermining the experience.

Decide On Calls To Action And Relevant Touchpoints

Have you ever visited a website that immediately displays an overlay when you arrive for the first time? Typically, they offer you a discount in return for signing up for their mailing list. The problem is that you haven’t seen their products yet, so you don’t know if you want the discount. This results in a poor conversion rate and a bad experience that alienates users.

If they displayed the overlay for returning visitors or showed it after they had time to look around the site, it would fit better into the journey. Doing so would increase conversion and leave the user feeling more positive about the experience.

A journey map doesn’t just show where to place a call to action. It also helps you shape the journey itself. For example, a typical B2B sales journey might be:

1. Discover an organizational need.
2. Research potential suppliers who could fulfill that need.
3. Shortlist suppliers.
4. Pick a preferred supplier.
5. Sign contracts.
6. Start work.

Once you understand that journey, you can start shaping the experience so that each stage is optimized, helping the user progress to the next stage. Knowing the stages in the funnel helps you identify the appropriate touchpoints, messaging, and calls to action.

For example, I use posts like this one, speaking slots, and organic search to reach prospective clients who are just discovering they might need help. This is not the moment for a hard sell but rather a chance to help them discover potential solutions to their need.

Often, my call to action at this early stage is to encourage them to subscribe to my mailing list to get more help. That allows me to nurture the relationship until they start looking for potential suppliers.

This is because there can often be a long gap between first discovering a need and securing a budget to find a supplier. It would be easy for them to forget me, and that lead would be lost.

This brings me to another crucial area that a UX designer needs to consider in the user journey: the gaps in the experience.

Mind The Gap

The user experience is not just about the touchpoints (website, email, etc.), but also about the gaps between these interactions. Gaps can be caused by time passing, switching channels, changing devices, or moving between business silos. These are dangerous moments when customers can easily be “dropped,” their experience undermined, and a sale lost. That’s why companies such as Gong.io use sales pipeline software and customer relationship management apps to ensure leads are not lost but instead nurtured over time.

But you still see examples of customers falling between these gaps all the time. Every time you’re put on hold while being transferred to another department, you have fallen into a gap. Or when you switch from a mobile device to your laptop to complete filling in a form, only to discover that all of your data has been lost and you have to start again.

A great UX designer will constantly be looking for these gaps to plug. For example, my banking app recently updated so that I no longer need to go through security to identify myself when I call them from the app. After all, I had already identified myself when I logged into the app, so why do I need to do so again on the call? That was a gap between systems that they had successfully plugged.

But while we strive as UX designers to plug gaps and design effortless digital experiences, there is one area we often overlook: human interactions.

Don’t Forget The Human Factor

At this point, you could argue we are straying into the realm of Customer Experience Design rather than User Experience, but it is still worth mentioning.

Throughout a customer journey (particularly in B2B), there will be interactions that are primarily between two people rather than a human and an interface. These interactions may use digital technology (such as webinars, Zoom meetings, emails, or chat) but are essentially one person speaking to another.

The B2B sales journey beautifully demonstrates these issues, as it has many digital communications between people.

As UX designers, we don’t have the luxury of ignoring these interactions, as they are crucial in shaping the user’s experience and the chance of a lead converting. For example, we have all had a frustrating experience with customer support teams who have emailed or messaged us a stock answer that fails to really address our question. Equally, we have encountered salespeople who have pushed too hard for a sale too early in our buying journey. And, of course, we have all read messages from organizations that have come across as impersonal, rude, or insensitive.

Technology makes these interactions feel worse, as we often cannot see or hear the person we are communicating with. Therefore, it falls to those of us seeking to improve the user experience to do at least something to try and mitigate these problems. That might be as simple as suggesting their sales team downloads a sales coaching plan template or something more ambitious, like running a workshop on how to communicate online better.

At this point, you might think all of this is way outside of your job description. But is it really?

Is This Outside Your Job Description?

We come full circle to where I started this article by saying that the role of UX designer is often mistaken for simply a more senior UI designer. It is not, and in fact, to suggest so is insulting to those who choose to specialize in UI.

If you have been hired as a UX designer and yet spend all of your time creating wireframes for websites, apps, and other interfaces, I would suggest your organization or clients are failing to utilize you to the full.

I would encourage you to break out of the box into which they have put you and start to look at the entire end-to-end user experience. Only then will you be fulfilling the role for which you have been hired.

It won’t happen overnight, and there will be some who would prefer to limit your role, but you cannot improve the user experience without considering the entirety of the journey.

(vf, il)

We’ve all been there. You might have a long-winded list of search results, products, orders or data entries. Of course, you have all kinds of filters and sorting and search already in place. However, you also need to help customers explore relevant entries, and to do so, you need to support and speed up browsing through entries.

Your natural design instinct might tell you to stay true to good old-fashioned pagination at first. Yet before you know it, you might start wondering if infinite scroll might be a good option to consider, given the very unique use case that you have. So is infinite scroll actually a good idea? Well, we all have strong opinions about infinite scroll, and usually not very good ones. This has a number of good reasons.

This article is part of our ongoing series on design patterns. It’s also a part of the upcoming 4-weeks live UX training 🍣 and will be in our recently released video course soon.

Problems With Infinite Scroll

The issues with infinite scroll are well-known. The most obvious one is the sheer amount of options on the page which is often too overwhelming and too difficult to manage. It really feels like drowning in an information abyss with no end in sight. No wonder that once the number of displayed options is beyond the comfortable range, a good number of users abandon the page altogether as a reaction to that.

Also, we don’t have any control over when and how many items appear on scroll. Just like there is no easy way to navigate between the “old” and “new” segments of the infinite scroll as they all fall into the same stream of items. Once you scroll up and down a few items, it’s hard to see immediately what we have seen already and what we haven’t seen yet — unless we meticulously scan through the last few items a couple of times.

Sometimes the URL in the address bar changes on scrolling, but more often it does not, leaving us out there starting all over again if we want to continue browsing later. And if we want to send the URL to ourselves or to our loved ones to explore a particular set of items at once, that’s usually painful as we can’t really bookmark a location in the list.

Should we want to reach the footer, every time we scroll, we need to scroll just a little bit faster to get a miraculous chance to reach the footer before the new stream of items comes in. Sometimes users find themselves taking on a scrolling challenge while hitting Esc at the same time — to cancel the infinite scroll just in time. (Usually unsuccessfully.)

On top of that, infinite scroll breaks the scroll bar as the user’s expectations of the page length have to be recalibrated with every scroll. The scrollbar is a promise of how lengthy the page actually is, but with newly loaded items, the promise is always faulty. Not to mention accessibility issues of announcing the newly loaded items properly to screen readers as well as performance issues on choppy connections.

All of the issues listed above are just poor usability. So it’s not surprising that we often disregard infinite scroll as a fashionable technique that produces more problems than solutions. And it’s not surprising that as designers, we tend to use other options instead: pagination and “load more” buttons.

Pagination And “Load More”

We can avoid all infinite scroll issues by falling back to the usual suspect: pagination. And it has plenty of benefits. With it, the user always has a clear beginning and a clear end. As users finish a page and move to the next one, there is a very clear “cut” of what has and what hasn’t been seen yet, along with a sense of completion during that navigation.

Plus, there is a sense of control how much data is being displayed on a given page (usually with controls to change the number of items per page), the URL is different for every page, the footer is easy to reach and the options appearing on pages are easier to manage.

Unfortunately, in usability tests, sometimes pagination doesn’t perform well at all. It’s much more predictable and easier to manage, but also much slower compared to infinite scroll, so users often browse significantly less and often feel “slowed down”. There seems to be more time spent on the first few pages, and filters and sorting are used more often in that time, but compared to infinite scroll, they view fewer items in total and are often less engaged.

If we want to keep the benefits of pagination but avoid overwhelming users with infinite scroll, we can use a “Load more” pattern instead. With it in place, as users start scrolling, eventually they can choose to load more items on tap or on click. In some implementations, as users start scrolling down, more items appear automatically at first, but then the “Load more” button appears, once a certain threshold is reached.

For example, we could display 10–30 products on the initial page load (10 on mobile, 30 on desktop). When the user reaches the end of the listing, we can use automatically fetch the next 10–30 products. When the user reaches 30–70 items, we then switch to “Load more”. We also provide an option to go back with the “Back” button, so users always have a sense of control about where they navigate.

We could also provide an option to continue browsing later by allowing users to type in their email and get a link that later would bring them to the position in the list where they currently are. This solves the problem of not being able to continue browsing later, perhaps on another device, or at a different time.

“Load more” works very well in eCommerce — users have control of what they see as all items appear on a single page and the footer is always in reach. Plus, if the URL is changed every time a user hits the “Load more” button, we bring together the speed of infinite scroll with the comfort and security of pagination. Users do seem to be browsing more and are more engaged. This makes this pattern a good option to consider for lengthy lists.

Does it mean that we can abandon infinite scroll altogether? Not necessarily. An important benefit of infinite scroll is the speed of displaying results — displaying new items just when users want to see more. As it turns out, there are a few techniques and strategies to make infinite scroll better. But it requires solving all of the issues we’ve outlined earlier.

Bookmarking The Position In The List

The easiest way to improve infinite scroll is by marking the breaks between “new” and “old” items in the list. When a new batch comes in, we separate the items visually and allow users to mark the position in the list from which they want to continue browsing later. We could also allow them to see all products they’ve seen on a separate page, so they can separate viewed options from the infinite stream of all options. An example of this interaction is displayed below.

Once a user clicks on the “Continue here later”, we could either show a checkmark and store the position in the browser, or display a modal asking users for their email address.

Alternatively, we could display the newsletter box directly, allowing users to copy a link to the current position on the page as well. As a positive side effect, this also gives us an option to collect users’ emails to send them a reminder about new items later.

Footer Reveal

The solution above might solve the problem with the lack of understanding of where users are, but since items will be loaded in automatically, we still have some other issues — e.g. reaching the footer. This is quite easy to solve though.

Just like we are used to sticky headers, we could integrate a footer reveal: a little helper that would stay persistent at the bottom right bar, and display the footer if needed while the rest of the page uses infinite scroll. A good example of it in action is Dahmakan, a food delivery service from Kuala-Lumpur in Malaysia (no infinite scroll in use at the moment). It’s worth emphasizing that the footer should be accessible via keyboard navigation as well, rather than just opening on click or on tap.

Combine Pagination And Infinite Scroll

As users scroll down a page and items are loaded in, we can present it as dynamic pagination to users (see Pepper.pl). On scroll, the URL of the page changes, and the page number is updated in the sticky bottom bar. Users can also navigate to a specific page in a pagination drop-down. And of course, an accordion opens up a footer on tap or click as well. Check the video example.

What do we do with the “Back” button though? For example, once a user has browsed through “pages” 1, 2 and 3 and now has landed on “page” 4, should a click on a “Back” button bring them from page 4 to page 3, or to the previous page that they visited before getting to the page 1 in the first place? In general, we probably don’t want to pollute users’ browsers’ history by adding every step of the infinite scroll in there. So selecting a specific page with a drop-down is indeed a good idea.

A great example of combining pagination and infinite scroll in one place; the only refinement could be slightly better focus styles and better navigation jumps for accessibility. Additionally, it would be fantastic to add some sort of a drop-down chevron next to the current page to make it obvious that one can actually jump to a specific page. The “Back” button, then, would bring the user back to the page from which they came to the list they have in front of them at the moment.

Scrollbar Range Intervals

Another useful technique is suggested by Baymard Institute, a research company for testing eCommerce sites. The idea is to make scrollbars more helpful by adding dynamic labels that are spaced out vertically. These would indicate to users where they currently are and where they can jump to. As users keep scrolling down, the labels would be shifting as the scrollbar is growing. Could be used by any criteria a user has chosen to sort the items by.

Pinning Sections On A Mini-Map

We could make it even more useful by allowing users to pin, or bookmark, areas of interest in the list, so they can return to favorites faster. An interesting prototype of such an experience is Minimap experiment (currently works only in Firefox), created by Rauno Freiberg, along with many other wonderful experiments.

Wrapping Up

With all of these techniques in place, we solved many problems that infinite scroll is known for. We now have better control of how many items appear on scroll, and can always stop browsing and continue later. We can easily spot “old” and “new” segments. The URL is being updated as the user scrolls down the page, and we allow them to copy the URL to the current position in the list as well.

Users can always reach the footer, and the scrollbar indicates where they currently are and where they can jump to. They can also jump to any specific page since we provide pagination as well. Additionally, we still need to implement infinite scroll in a way to ensure accessibility for the keyboard and announce new items. But: we make use of all the benefits that infinite scroll provides: especially the speed of browsing.

Now, all of this seems like a lot of work just to make infinite scroll better. The ultimate question of whether all the work is worth it has to be answered by the goals your users are supposed to achieve. Infinite scroll is not for every website, and an endless list of options needs to be complemented with proper filtering, sorting and search. In general, if your users are more likely to compare options or find very specific content, infinite scroll probably won’t be very useful.

However, if your users often explore many options, and browsing is a very typical attribute on your site, especially when customers add multiple items in a shopping cart or operate on a large set of data entries at once, infinite scroll might be very well worth it — but only if accessibility and performance considerations are the very heart of its design.

The ideas highlighted in this article are just that — ideas. Some of them might fail miserably in your usability tests, while others might perform fairly well. But: if you absolutely need to make infinite scroll work, there are ways and workarounds to do so — it’s just not as straightforward as it might appear at first.

Infinite Scroll Checklist

As usual, here’s a general checklist of a few important guidelines to consider when designing a better infinite scroll:

• If in doubt, always prefer pagination.
• With infinite scroll, always integrate a footer reveal.
• Consider separating “old” and “new” items visually.
• Provide an option to continue browsing later.
• Consider using “load more” + infinite scroll together.
• Consider using pagination + infinite scroll together.
• Change the URL as new items are loaded in and expose it to users.
• Allow users to jump to any page with a pagination drop-down.
• Consider using scrollbar range intervals.
• Consider allowing users to pin or bookmark items/areas of interest.
• Make sure accessibility and performance are major considerations in the implementation.

Meet Smart Interface Design Patterns

If you are interested in similar insights around UX, take a look at Smart Interface Design Patterns, our shiny new 10h-video course with 100s of practical examples from real-life projects. Design patterns and guidelines on everything from mega-dropdowns to complex enterprise tables — with 5 new segments added every year. Just sayin’! Check a free preview.

100 design patterns & real-life examples.
10h-video course + live UX training. Free preview.

Useful Resources

• “Infinite Scrolling Is Not For Every Website,” Hoa Loranger, Nielsen Norman Group
• “UX: Infinite Scrolling vs. Pagination,” Nick Babich, UX Planet
• “Infinite Scroll: Let’s Get To The Bottom Of This,” Yogev Ahuvia, Smashing Magazine
• “Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce,” Christian Holst, Smashing Magazine

If you find this article useful, here’s an overview of similar articles we’ve published over the years — and a few more are coming your way.

Related Articles

• Designing A Perfect Accordion
• Designing A Perfect Responsive Configurator
• Designing A Perfect Birthday Picker
• Designing A Perfect Date and Time Picker
• Designing A Perfect Feature Comparison
• Designing A Perfect Slider
• “Form Design Patterns Book,” written by Adam Silver

Further Reading

• How A Bottom-Up Design Approach Enhances Site Accessibility
• The Role Of Illustration Style In Visual Storytelling
• Creating An Effective Multistep Form For Better User Experience
• Alternatives To Typical Technical Illustrations And Data Visualisations

(il, mrn)

Imagine a shiny newsletter pop-up. A pop-up makes its splendid appearance on an eCommerce site just as you are about to make your way to a product page. You didn’t even have a chance to explore a single product yet; nor did you have a chance to learn about prices and materials and delivery options. But here you are, distracted and annoyed, almost instinctively dismissing that pop-up before even fully realizing what it says.

That pop-up is right there, and it’s there for a reason. It’s there because there are established KPIs and expectations that somebody in the company needs to reach. These KPIs expect leads, and the more charming (or intrusive) that pop-up is, the more leads it will generate, boosting revenue projections and bonus pay-outs.

A Short Story About A Large Pop-Up

A while back I was working with a large eCommerce retailer operating just like that. There was a strong desire to generate new leads, so the team has spent weeks tweaking headings and copy and labels and visuals and calls to action and their positions and backgrounds.

By the end, the pop-up was so large and so loud that you could barely see anything else on the page. And it worked! Indeed, just a few weeks in, the list has started to grow considerably, and there was even a dashboard set up to celebrate new leads coming steadily minute after minute.

It was weeks until the management has discovered that the growth of the list wasn’t resulting in the growth of the revenue.

The company was indeed getting plenty of leads, but those leads were poor and noisy. They were a mixed bag of disposable, temporary emails, creative and non-existent aliases and just random text strings, and as such, they weren’t generating any noticeable revenue at all. These very leads actually cost money because the pop-up — showing up on every other page — drove people away from the site.

It didn’t work because what the company wanted wasn’t just leads; they wanted good leads. They wanted emails with low bounce rates and high opening rates; emails that would have high conversion and high engagement; emails that wouldn’t get filtered out or marked as spam. They wanted new, engaged and excited customers who would trust and love the brand. A loud newsletter pop-up wasn’t helping them get there.

What did help the company was removing the pop-up altogether, and subtly integrating a bit of newsletter messaging all across the site, from product pages to confirmation emails.

Strategy To Generate Good Leads

Over the years studies showed over and over how reluctant people are to respond positively to any promotional message that disrupts their current workflow. This goes for a modal, a pop-up, a notification and anything in-between. In fact, any interruption of a task at hand is seen as a major distraction that needs to be dealt with urgently. And urgently rarely works in favor of user experience.

In the end, it’s all about the right timing. If we want a good response, we need to find the time in a user’s journey when we can almost guarantee that users will appreciate the disruption, and will respond positively. And that means being very thoughtful about the right time and the right places to surface our messages in a humble, respectful way.

There are a couple of options that we can explore:

• Integrated messaging.
  The more integrated our messages appear with the rest of the page, and the more connected they are with a task at hand, the better they will be performing. Think of empty states, 404 errors, product pages and blog posts.
• Success moments.
  Identify moments when a user completes a task or reaches a particular milestone, and integrate your messaging there. E.g. when an invoice is paid, when a request is approved, when a transaction is completed.
• Nonmodal dialogs.
  To ease distraction, consider using collapsible nonmodal dialogs that don’t block the rest of the UI. Users can dismiss them for a while, and return back if needed.
• Confirmation pages.
  That’s where users linger for a while until they get a confirmation email. That’s also a great place to ask users for more details, ask to review email or set up a password and get a 15% discount in return.
• Confirmation email link.
  As users are eagerly expecting that email, we can allow people to subscribe to a newsletter with one single click on a link in the confirmation email.
• Next to the price.
  We could integrate the newsletter box on the most important pages, right next to the pricing of a product, prompting them to subscribe to get 10–15% off the first purchase.

What About That eCommerce Retailer?

Of course, what has worked for one company might not work for you, so it’s probably a good idea to try out all these options and see what actually works best.

In the case of the eCommerce retailer, integrating the newsletter box next to the price and making the newsletter pop-up a collapsible nonmodal dialog worked best. This change didn’t produce as many leads as the initial pop-up, but the leads were much better in quality and longevity.

We need to give users a chance to develop trust towards the brand. This requires a more humble approach and a more patient team, but the results might be significantly better, with customers coming back and giving a company exactly what it has always wanted.

Meet Smart Interface Design Patterns

If you are interested in similar insights around UX, take a look at Smart Interface Design Patterns, a 10h-video course with 100s of practical examples. 10h of video content on everything from accordions and dropdowns to complex tables and intricate web forms — with 5 new segments added every year. Check a free preview.

100 design patterns & real-life examples.
10h-video course + live UX training. Free preview.

Further Reading

• Time To First Byte: Beyond Server Response Time
• The Importance Of Graceful Degradation In Accessible Interface Design
• Design Patterns Are A Better Way To Collaborate On Your Design System
• How To Create A Rapid Research Program To Support Insights At Scale

(il vf, mrn)

QR codes are a useful technology that simplify and enrich the customer journey. The technology is currently used almost everywhere: e-menus in restaurants, virtual business cards, customer feedback collection after food delivery, boarding passes at the airport. However, as with everything else, a business owner should consider several things when using this technology if they want to create a positive customer experience.

In this article, I’ve assembled a checklist of items to keep in mind as you try to leverage QR codes for your business, broken down by the steps of the customer journey. So, in this mini-journey, our customer:

• Sees the QR code for the first time,
• Examines the code,
• Scans it,
• Follows the link from the code.

Let’s take a closer look at what to consider in each stage.

Note: This list can and will be updated as it continues to grow, so if you have any ideas on what could be included, please do let me know. Let’s make this content even more valuable for everyone!

1. First Contact With The QR Code

Usage

A basic point: When appropriate, QR codes are worth using. The pandemic and the emergence of built-in code-scanning on our smartphones have set the stage: The public is ready for this technology. It’s a good time to use QR codes and to relieve your customers from having to memorize a long URL or type it in manually.

Gruzovichkof (a shipping company), for instance, states on its cars that its app is available in the App Store and Google Play, but it does not provide customers with any link to it:

Technopark (a retailer) performs this task more intelligently, allowing you to download the app by scanning the QR code placed on the surface of its delivery cars:

Code Visibility

Try to position the QR code in such a way that it is clearly visible from various points of the path that your customers are following. For example, if the QR code is not at eye level, then you run the risk of customers not noticing it at all.

IKEA is good at this, although initially I thought of mentioning it as a bad example. By placing QR codes under the feedback collection terminal, which seems illogical, it simplifies the process of providing feedback for visitors on wheelchairs:

Free Space

If possible, place the QR code in a way that it doesn’t “stick” to the other design elements on the surface. And minimize the visual noise around it, so that the client’s attention doesn’t dissipate and the code is easier to notice.

2. Examining The Code

Call To Action

Don’t show a QR code without an explanation. Let customers know explicitly what they are being asked. To increase the likelihood that customers will scan your QR code, place an explicit call to action (CTA) next to it:

Explanation Of Value

In addition to the CTA, explain to customers why scanning the QR code would be valuable to them. By managing their expectations, you further increase the likelihood that they will take action.

For example, the call to download the app in Nespresso’s boutique is accompanied by an infographic with key benefits:

Contact Details

Some businesses also place contact details next to their QR codes. It’s important not to overwhelm, but in some cases these details would be appropriate, such as for a hotline:

Company Logo

Most QR code generators allow you to brand the code by placing your company logo at its centre. This will make your code look more professional and increase the chance of drawing your customers’ attention.

Brand Colors

QR code generators also allow you to select a color for your code. This is a great opportunity to use your brand’s colors and make the code more visually appealing.

3. Scanning A QR Code

Size

Make sure that any QR code you place in offline media is not too small. Also account for the distance from which the code will be scanned. If it’s too small, customers will have trouble scanning it, and the code will be useless.

Non-Contact Surface

Minimize direct physical contact with your QR code. Otherwise, the surface will erode over time, and the code will become more difficult to scan. For example, for a storefront, stick the code inside the window, rather than outside.

In one of Street Beat’s stores (a sports apparel retailer), QR codes are placed on the checkout counter. The idea is quite good, but because it’s a contact surface, the sticker will come off gradually, and then it will look untidy and eventually have to be replaced.

Comfort Of Scanning

Place your QR code in a location where it’s comfortable to scan, without rushing. For example, a highway billboard will not only be inconvenient for customers, but will also increase the risk of accidents.

Mobile Network Availability

Many QR codes are links to websites. If yours is, make sure it’s somewhere where a mobile network or Wi-Fi is readily available. Otherwise, the value of the code will be close to zero.

Proper Surface

You’ll see some QR codes placed on transparent surfaces, which makes them difficult to scan or not scannable at all.

In Nespresso’s boutique, this issue is apparent: The code is almost unscannable. Store personnel found a solution: Every time a customer tries to scan the code, they hold up a sheet of paper as a background (which is still not the best customer experience at the end of the day):

X5 Retail Group (a food retailer) uses billboards along the streets to show its QR codes for downloading its app. Due to the format of the billboards, the codes are not as easy to read as they would be on a solid surface.

Environmental Factors

If you place a QR code outside, consider environmental factors such as lighting and weather. If the poster will be poorly highlighted at night, the code will be much harder to scan. If you’re using vehicles (such as delivery cars or cabs), ensure that they are cleaned regularly, especially in bad weather — the usefulness of a code covered with dirt is close to zero.

Explaining The Scanning Process

Despite the prevalence of QR codes, not everyone is aware of what to do with them. That’s why it’s a good practice to clearly explain this next to the code. For example, you could write, “Point your smartphone camera at the QR code to scan it”, along with an icon of a camera.

Scanning With Native Camera App

Set customers’ expectations correctly about how to scan the QR code, and if possible, do not implement a solution that requires people to install a specialized camera app.

When Auchan launched its innovative “Scan & Pay” system, corresponding QR codes were placed all over the store. Hundreds of visitors tried to scan the codes with a standard camera and encountered an error. They were not taken to the landing page but came across a system code. (The QR codes had to be scanned with the camera in Auchan’s app.)

Scanning From Different Devices

A QR code may be easily scannable on some devices and not scannable at all on others. Check the scannability of your code on different smartphone models before sending it for printing.

Color Contrast

Standard QR codes are black and white. If you use your brand’s color, make sure that it contrasts with the background enough to be scanned without any issue.

Dark On Light

Always use a color contrast of dark on light — that is, a dark QR code on a light background. Not all devices can scan the opposite correctly.

Resolution

Before submitting the code for printing, make sure the code is at a resolution high enough not to blur or pixelate. Otherwise, your effort and money will be wasted.

Website Code: Desktop

QR codes can also be used in a digital environment. For example, if I’m visiting a website on a desktop computer, the usefulness of an HTML button to download an app is questionable. However, a QR code can be scanned from the page with a smartphone, resulting in a smoother download process:

Website Code: Mobile

Unlike on a desktop website, where a transition to a mobile environment can be justified, think twice about whether to put a QR code on your mobile website. If a user encounters a code on their smartphone screen, they will not be able to read it with their camera. In this case, using a button makes more sense.

A while ago, I noticed that both the desktop and mobile versions of Auchan’s e-commerce website contained QR codes. While the former was justified, the usefulness of the latter was questionable:

An exception is when users can share a code with others. A particular and quite widespread case nowadays is the verification of a person’s COVID-19 vaccination status using the QR code from the mobile version of a public-service website.

4. Opening A Link From A QR Code

Active Link

This is a basic point, but I decided to include it nonetheless. Mistakes sometimes happen at the execution level of a business. Before sending a QR code for printing, check that the link in the code does not contain any errors and is active. Also, check regularly that all existing QR codes are active and working.

Content Relevance

Don’t forget to regularly check the relevance of content both on the page that is accessible via the link and in the area surrounding the QR code, especially if you’re using the code for a limited-time offer, an event invitation, or the like. Otherwise, it could result in unmet expectations and a negative customer experience.

Landing Page vs. Several Codes

If you want your customer to take several actions, don’t create a QR code for each action. A better solution would be to present one QR code, and then outline the CTAs on the page that is accessible via the link in the QR code. This way, the presentation of the code will look neater, and the customer won’t be distracted when scanning it.

Below is an example of a case when this point was not thought through (by Persona Sport, a gym and wellness club). Links to Google My Business, Yandex.Maps, and 2GIS could have been placed on the landing page that is accessible via the QR code:

A while ago, Coffeemania (a restaurant) used one QR code for patrons to submit reviews, and another one for patrons to send tips to servers (whereas these actions could have been combined in a single code):

Lenta (a retailer) does this more efficiently, allowing customers to choose the medium by which to communicate with support at the level of the web page, rather than from printed media:

Managing Expectations

The content accessed via the link should match the CTA next to the QR code. If an invitation to subscribe to a social media account is the CTA, and the customer is prompted to take several unrelated actions upon scanning the code, then their attention might get diverted, and they might not take any action at all.

The drawback of the last example is that the QR code, which allows the customer to choose the medium by which to communicate with customer support, leads not to a dedicated landing page, but simply to the main e-commerce page, blurring the customer’s focus:

Mobile Optimization

It’s important to understand that scanning a QR code is just one part of the journey that a customer takes. That’s why thinking through all of the steps is important. Specifically, if the customer scans a QR code with their phone and ends up on a page that isn’t optimized for mobile devices, it won’t do them (or you) any good.

App Downloads

You can use deep linking to reduce your number of QR codes and to simplify the customer journey. This strategy allows you, among other things, to identify the type of device that the customer is using when scanning your QR code. It is useful when you’re providing a link to download an app. iPhone users who have scanned the QR code will go to the App Store, while Android users, having scanned the same code, will go to Google Play. The customer’s focus is not distracted by multiple QR codes, and there is no need to choose, while the value is the same.

Coffeemania’s loyalty program offers several QR codes, depending on the way the client wants to register. This could be overwhelming:

Uniqlo, on the other hand, doesn’t ask what kind of smartphone I have. The relevant app store will open automatically when I follow the link from the QR code:

Personalization

You can personalize the customer’s experience by leveraging UTM parameters in the link from the QR code. For example, to allow customers to evaluate a restaurant server’s work, you can add the server’s ID as a link parameter and personalize the feedback page with their name.

Analytics

Besides personalization, UTM parameters can also be used for analytics. For example, when placing QR codes on different banners around the city, you can add corresponding parameters with the ID of each banner to see which banners get more traffic and which ones should be relocated in the future.

To Be Continued

QR codes can simplify the customer journey and make it more convenient. As with everything else, however, the effectiveness of this touch point depends on the details, and poorly implemented details can turn your bright prospects into a bad customer experience.

If you use QR codes in your business, be aware of the pitfalls along the way, and leverage all of the technology available, and don’t rely on having to learn from your own mistakes. I hope this article was valuable, and if you have something to add, drop me a message — we’ll continue to refine the best practices.

Good luck and keep in touch!

Further Reading

• Alternatives To Typical Technical Illustrations And Data Visualisations
• The Role Of Illustration Style In Visual Storytelling
• Creating An Effective Multistep Form For Better User Experience
• Timing is Everything: Good Design Is All About The Right Timing

(vf, il, al, mrn)

UX maturity is the presence and level of sophistication of UX in an organization. Organizational maturity goes beyond the skills of the individuals composing the UX roles on various teams, to the UX processes, philosophies, and tools underpinning the organization’s product development and business practices. As Chapman and Plewes (2014) state,

“Achieving great UX design is not just a function or talent of individuals, it is an organizational characteristic.”

Knowing this, means we must strive to understand and grow the maturity of UX practice within the organizations and product teams we work with. Simply being good at our own jobs isn’t enough. As UX practitioners, we are advocates and educators of our craft within the organizations we work for or with.

Note: This article is the first in a three-part series covering six tactics UX practitioners and managers can adopt to facilitate the growth of UX maturity at their organization.

Let’s take a quick look at the six tactics we’ll be covering and their relationship to UX maturity:

1. Finding and utilizing UX Champions
   Beginning stages: the UX champion will plant seeds and open doors for growing UX in an organization.
2. Demonstrating the ROI/value of UX
   Beginning stages justify more investment, later stages to justify continued investment.
3. Knowledge sharing/Documenting what UX work has been done (Jump to Part 2 →)
   Less relevant/possible in the earliest stages of maturity when there is little UX being done. Creates a foundation and then serves to maintain institutional knowledge even when individuals leave or change roles.
4. Mentoring (Jump to Part 2 →)
   Middle and later stages of maturity. Grow individual skills in a two way direction that also exposes more people to UX and improves the knowledge transfer of more senior UX, should lead to a shared understanding of how UX looks and is implemented in the organization.
5. Education of UX staff on UX tools and specific areas of UX expertise (Jump to Part 3 →)
   All stages of maturity require continued education of UX staff.
6. Education of non-UX staff on UX principles and processes (Jump to Part 3 →)
   All stages of maturity benefit from education of non-UX staff.

These tactics don’t build on the prior tactics — you can and should implement multiple tactics simultaneously. However, some tactics (e.g. mentoring) might not be possible in an organization with low UX maturity that lacks the support for a mentoring program.

UX is a skill, it can be practiced, grown, and improved. It can also languish and atrophy if not appropriately exercised. This is true for individuals and organizations. An organization’s UX maturity level impacts all aspects of how UX is prioritized and implemented throughout the organization and its products.

If we wish to meaningfully improve our UX practice, it is critical we look for opportunities to help grow the maturity of UX across our organization. We face a larger challenge when it comes to growing UX in a way that has impact across an organization than we do with growing our own UX skills.

In this article, I’ll briefly discuss some of the existing models you can use to provide a framework for thinking about an organization’s UX maturity. I’ll then explore two specific tactics for UX practitioners to make an impact to help grow UX maturity within their organizations when they are in the early stages of UX Maturity.

Defining UX Maturity

We don’t have one agreed upon model of what UX maturity looks like at different stages. Natalie Hanson has a blog post providing a collection and discussion of various UX Maturity models up to the point it was published in 2017.

Chapman and Plewes define five stages of organizational UX Maturity from “Beginning” which is essentially no UX, to “Exceptional” where UX has been fully integrated into the business processes, resources are plentiful, leadership understands the value of UX and how it works, and the organization’s culture is supportive and promotes UX.

Most of us probably work for organizations with some level of UX Maturity, meaning beyond Stage 1 where there are no resources. However, it’s also possible some of us work in organizations at the beginning or awareness stages. If you are in this situation, you might find yourself frustrated with the lack of support and understanding of UX within your organization and product teams. We should push to move our organizations and colleagues further along this UX maturity continuum if we wish for UX to grow as a field, increase opportunities to bring our peers into the fold, and ultimately to provide the best experiences for end users of the products or services our organizations offer.

Frameworks and models are helpful for understanding how researchers and professionals have observed UX maturity growing in organizations. They allow us to understand where we are and where we are headed, if we create a strategy to get there. We need to move beyond theory and into the application of specific tactics if we want to push our organization to grow in UX maturity. I’ll present two tactics for demonstrating the value of UX and documenting progress of UX in an organization that will help grow UX maturity in the section below.

What Can We Do To Grow Our Organization’s UX Maturity: Two Tactics

It can feel frustrating trying to make change in large organizations. Here are some tactics UX practitioners can consider applying to their situation. These two tactics are especially helpful for organizations with less mature UX, and more opportunity to grow:

• Finding and utilizing UX Champions,
• Demonstrating the ROI/value of UX.

These tactics are meant to create a broad impact across the organization and plant the seeds of UX in potentially fertile fields. I’ll tie them back to Chapman and Plewes factors composing the stages of UX Maturity as relevant within the discussion of the specific tactic.

Tactic 1: Finding And Utilizing UX Champions

Champions are people who enthusiastically support the growth of an innovation or idea within an organization. Researchers have long found champions are a critical component of overcoming social and political barriers to innovation within organizations. I would argue you cannot move a large organization out of Chapman and Plewes stage 1 without having a set of Champions. Champions do not need to be experts or practitioners of UX. However, we need to identify the correct people, in the right positions of power, who can advocate for UX as a concept, advocate growing UX, and push for UX resources in the form of budget and roles, if we wish to grow UX in organizations with low levels of UX maturity.

Effective champions display the following types of behaviors according to some researchers:

• Pursuing the idea
• Expressing enthusiasm and confidence about the success of the innovation/idea
• Persisting under adversity
• Getting the right people involved
• Building networks
• Taking responsibility

I’d add to these behaviors that champions need to be well educated on the idea or innovation (in this case UX) in order to maximize effectiveness. We cannot expect a champion to effectively convey the value of UX and to identify opportunities to get the right people involved if they do not have an understanding of how UX processes work, how to integrate them into existing processes, and what basic outputs and outcomes of UX work are expected. We are responsible for providing this education through conversation, examples, and providing resources supporting the champion in their learning.

We can tie champions back to Chapman and Plewes factors of Leadership and Culture, as well as potentially the Timing of UX factor:

• Champions should be in a position to influence leadership and culture over time;
• Champions should be able to identify and advocate for the proper time to insert UX into existing process.

Champions usually play this role in an informal capacity. This makes sense when we think about an organization at the fledgling stage of implementing UX — it is unlikely you would immediately go from having little to no UX, to hiring a specific role for championing the cause. Champions therefore are promoting UX in the course of their other everyday activities.

As a UX practitioner, your goal is to find the champions within your organization, educate them on the role and value of UX, provide them with real life examples of how UX is making a difference, and work with them to identify the opportunities to insert UX into other products or processes within an organization.

We need to be purposeful when we look to invest time cultivating a champion. You can answer these questions when looking to identify and work with a champion:

"Who are people willing to spend time and energy on ideas they believe in?

Who might be most receptive to UX working on a product or service they are in charge of?

Who has the ability to create and maintain networks? - Who would see an almost immediate benefit to having UX improve their product?

Who has been expressing dissatisfaction with current design and development processes?

Who can you develop a good and ongoing relationship with?

Who believes in the organization or product and continuously pushes for both to grow and improve?"

You can pick and choose which of these questions might apply most to the situations you are trying to find a champion, or you could use these questions as filters, start with the largest list of potential champions you can think of, then remove names when they don’t meet the qualifications. Your remaining names are the people you can pursue to become UX champions within your organization.

Case Study: Finding And Utilizing A UX Champion At A Large International Logistics Company

You might think it is a fairly daunting task to quickly identify an effective champion within your organization. This case study will show the opposite can be true. Within one month, I was able to identify UX champions in an organization I’d never worked with. Within three months, the champions had created meaningful change, identified more opportunities than we could handle with the resources we had, and set the course for a bright future for UX within the organization.

A major logistics company serves as the example for this case study. The company had familiarity with UX and CX, even espousing that it was transforming itself into a customer first organization. Unfortunately, these words were not reflected in the UX integration throughout the company.

I would classify the organization at Chapman and Plewes adopting stage in some products, however, it was clear other products or projects were only at the awareness stage (stage 2) in that there were no UX processes. This includes the project I was assigned to when I joined as a consultant. There were scattered products receiving some UX attention — one off efforts being run by small UX teams focusing on addressing key issues brought up by major clients. There was some legacy of having UX in the past, however, after many years of UX work being done in various pockets of the organization, there was still no true UX process identifiable across the company, UX was not required for products or workstreams, and when budgets contracted, UX titles were some for the first to be eliminated.

The company was undergoing a complete backend technology transformation in order to move it’s many disparate entities onto the same technology platforms. When I became involved, I was brought in to see how to infuse UX into the process. I knew this was going to be challenging, as the ways of working had already been defined and the focus was on getting things quickly to production, with developers also doing the design based on requirements created by large groups of product owners and managers.

I began by listening. I sat in on meetings for different groups involved in the project. I interviewed many client stakeholders to understand some of their habits and how we could integrate UX into the current ways of working. I mapped out relationships between products, projects, people, and outcomes/goals. There was a huge appetite for the UX work, but much less appetite to incorporate the process into the already break-neck pace of the development underway. We worked to find ways to contribute to the current development efforts through testing, and found we were able to get a foothold into some of the key areas the effort was focusing on.

Specifically, what we did was take on a UX research and design project with a product owner who we’d identified as key to having as a champion during our preliminary interviews with stakeholders. This champion was ideal because they were highly motivated, well connected with people in powerful positions across the company, and perhaps most importantly, had a product that was key to the success of the endeavor and was in a position to immediately have us start conducting research that would lead to design.

I want to note here that the champion was not an executive level employee. They did not have the power to make people do things just because they told them to. This champion had all of the traits referenced in research on the role of an innovation champion:

• Pursuing The Idea
  Our champion traveled, spent time in meetings and workshops, reached out to countless others, educated themself, and spent time outside of their typical duties in order to push for UX to grow in the organization.
• Expressing Enthusiasm And Confidence About The Success Of The Innovation/Idea
  Our champion maintained a positive attitude and was able to readjust without giving at multiple points during our time there.
• Persisting Under Adversity
  The general conditions on the ground were adverse to UX — with the focus on production. However, there were other mountains that were in the way that our champion needed to overcome. One specific example was that there was immediate and then constant pushback from colleagues on the ability for the product to incorporate research and redesign. This was relentless, however our champion did not let it stop them.
• Getting The Right People Involved
  Our champion was well connected and knew how to get the right people involved. They had been in the organization for a decade and had a stellar reputation. For example, they knew the right executives and could get them to attend meetings to make a statement on the need for UX, when they were facing the adversity referenced in the bullet above.
• Building Networks
  Our champion introduced us to key people, set up meetings between people across products and teams, and had the ability to get the right people to network without the need of being present in every meeting themself.
• Taking Responsibility
  Our champion assigned and delegated tasks as needed, but they also took it upon themselves to review all work, spend time learning UX processes and value, and advocate for UX.

This case study highlights the power and importance of a UX champion in growing UX in an organization. Thanks to the presence of our champion, we used our foothold to gain the ear of key executives as well as many champions who were able to advocate a need to “walk the talk” on saying we were customer focused. This allowed UX to define some key processes and contribute to the broader group.

While our work there did not last beyond the end of this key workstream, when we left there had been an established library of reports, a defined process for UX to integrate with building technology, and a philosophy shift that not only did the words customer focused need to be stated, but the actions of customer-focused behavior needed to be reflected in what was being done.

Additionally, the champion had secured a new UX resource as a permanent hire for their product, they had a backlog of UX projects to complete, and had created a larger network of UX practitioners across the organization than had previously existed.

Tactic 2: Demonstrating The ROI/Value Of UX

As UX practitioners, we often focus on the value our work provides through the lens of a more satisfactory, efficient, or enjoyable experience. We take pride in meeting our users’ needs.

However, we work in settings where decisions are scrutinized based on their impact to the bottom line of profit and loss. We avoid reality if we don’t acknowledge the need to justify UX based on the return on investment a business or organization can expect. However, ROI can be more than a monetary calculation, with other metrics and key performance indicators useful for showing how UX impacts an organization or product.

Nielsen Norman Group notes ROI encourages buy-in, which is key for growing UX in organizations less familiar with the value UX work brings. NNG also states there are three myths that tend to prevent us from moving forward with calculating UX:

• The ROI of UX is all about money;
• The ROI of UX has to be perfectly accurate;
• The ROI of UX has to account for every detail.

You will need work to overcome these myths as they might exist within your organization as you start to measure UX ROI if you want to start increasing buy in for UX.

You can use a number of different metrics to show ROI, as NNG notes, it isn’t limited to money. Your product and industry might best dictate what metrics or key performance indicators tell the story of the ROI of improving UX. Yes, if you design for an e-commerce site, increasing conversion and sales will be a story you’d want to tell. But this tale might focus on additional metrics such as speed to completing a task, cart abandonment, or ratings on an app store or review platform.

I do believe many executives, across industries, are looking for the financial benefit of the decisions they make. We do need to present a business case for anything we propose that will cost money or resources such as time, training, and tools.

At face value return of investment is the increase in value or profit (return) an investment (in this case adding UX resources to a product) divided by cost (investment) in that resource (budget, UX software subscriptions, UX training, etc.). There isn’t a magic number, but you can assume you’d like the final number to be greater than 1, suggesting a positive return on the investment. You can potentially consider many items as part of what goes into the cost and return, depending on the product.

Anders Hoff provides a website roi calculator. Human Factors International provides six different calculators depending on what you are trying to measure, from increased conversion to increased productivity, to reduced costs on formal training and reduced learning curve and more.

Moving beyond the specific monetary return requires deeper research and/or collecting analytical data. You will use these metrics to tailor your conversation on the need to grow UX to a specific audience that might. In other words, for some of these metrics you might benefit from being currently low or less than desirable, as they bolster your case for improving an experience to enhance the return.

Many product teams do collect analytics, even if they aren’t invested in UX, as this has become industry standard and easy to do. However, if you don’t know how to use these analytics, or haven’t had upfront conversations about what to collect, you’ll need to connect with the people in charge of collecting and reporting analytics to ensure the data you need will be available.

• Finding information/navigating a site or application
  How long does it take a user to go through a typical workflow? Do they encounter errors? Do they drop before reaching a critical destination, but after starting down the path?
• Ratings on app store or industry rating platforms
  How are users rating the current experience? What qualitative information are they providing to support their ratings? Does any of this tie back to UX or would any of it be addressed with improved UX.
• Use/time spent
  Overall visits or time spent on an app or using your site. If you provide information or an experience that needs people to focus and pay attention this might be a number that is low and you think go up. However, if you are providing a way to apply for goods and services, or do something like pay a utility bill, you might want to focus on how time spent could be reduced as a good return for users.
• Service/support calls and the frequent topic of calls
  How frequently does your support receive calls or emails related to usability issues, or issues that could be easily resolved with an improved UX? My experience has suggested confusing login credentials and inability to self service basic account issues online are frequent reasons people contact support. These are UX issues with a direct cost — and most companies know the cost of their support center calls. How much would you save by reducing these calls with better UX?

These are all examples of ways you can communicate ROI to your stakeholders, as part of a justification to grow UX in your organization. You need to determine what metric might speak clearest to the audience you are hoping to sway.

Case Study: Demonstrating ROI/Value Of UX At A Medical Insurance Provider

A large medical insurance provider had acquired a number of small providers over the past decade. Each of these separate companies had different systems their agents used. The company undertook and effort to shift all agents onto the same, new to everyone, platform.

The company planned the rollout in phases focusing on geographic regions. Initially, the company had no UX roles or processes, and they did not intend to account for any UX in their budget. Independent agents who were part of the first phase immediately stopped running policies through this provider. Exclusive agents flooded the call center with cries for help, needing to be walked through basic everyday tasks such as running quotes and binding policies. The provider pushed pause on subsequent releases while they determined how to best move forward.

I was brought in, along with my colleagues, to form a usability workstream on this project. However, we knew that budget was tight and we would need to show our value. We immediately engaged end users in a series of interviews and usability testing. From there, we made design recommendations, from small tweaks to major overhauls. Some of them were adopted, others were not considered feasible. The project moved on to release the usability fixes to the phase one agents, and into the subsequent phases of release.

The project leadership had to request any future budget for UX on the project from an executive committee. Project leadership knew what was meaningful to convince executives UX was making an impact, and therefore had a positive return on investment. We had a workshop with project leaders to determine key metrics. We landed on user satisfaction, calls to the call center requesting assistance, number of quotes run, and many other industry specific methods.

I need to note the importance of collecting benchmark metrics here. For example, We weren’t able to speak to the increase or decrease in the number of quotes run, because this metric wasn’t being purposefully tracked during phase one. However, we set a line in the sand and from that point forward we created a benchmark that could then be compared in future updates and releases.

Using a combination of user surveys, interviews, and data analytics, we were able to create the case that phase 1 users had the lowest satisfaction, but was trending upward, with the recipients of the UX improved phase 2 showing higher initial satisfaction, that UX was making an impact on reducing calls to the call center, and as noted we started purposefully documenting specific analytics. Project leadership presented these findings to the executive committee as part of their ask for continued funding — which was approved.

Fast forwarding a few years, UX remained onboard the project, with a budget for testing and revising designs prior to release, and was touted as a must have part of any future projects and digital products.

Conclusion

We all stand to benefit from increasing awareness and growing UX maturity in our organizations or on the product teams we work with. As practitioners, we are responsible for advocating UX to others.

I’ve presented two tactics that are especially potent in less mature UX organizations, however, they could be useful in any organization — especially larger ones where UX might be more robust on some products or projects (and almost unknown on others). The tactics highlight the need to choose the right people to be persuasive in your organization and use data in supporting our arguments for UX to play an expanded role.

The next article in this series will explore internal processes we can take to document and share UX work that has occurred, and mentorship needed to take UX maturity to higher levels. The final article will discuss education of both staff with UX roles and staff who do not have UX roles.

Author Note: I want to thank my colleague Dana Daniels for assistance with background research on UX maturity models.

Further Reading

• The Scent Of UX: The Unrealized Potential Of Olfactory Design
• Alternatives To Typical Technical Illustrations And Data Visualisations
• How To Improve Your Microcopy: UX Writing Tips For Non-UX Writers
• Build Design Systems With Penpot Components

(cc, vf, yk, il, mrn)

What impact has COVID-19 had on companies across the UK and beyond? I’ve been hosting a series of monthly webinars with senior accessibility guests from global brands such as Microsoft and ATOS, and UK giants like Barclays and Sainsbury’s. We’ve been talking Covid, the challenges and opportunities the crisis brings, agile adjustments, digital inclusion and much, much more.

Top Tips From The Experts

Visit our website for this evolving series of webinars for full interviews and transcripts, but in this article, I’ve brought together the top tips on Covid challenges and opportunities covered by my guests to date. Let’s start with the Chief Accessibility Officer (CAO) at Microsoft.

Jenny Lay-Flurrie (Microsoft)

The very fact that Microsoft has a CAO — an accessibility lead at C-level — demonstrates its commitment to accessibility (AKA ‘Digital inclusion’. Follow the accessibility guidelines and you end up with a product that is inclusive and easier to use by all.) Importantly (in my opinion) Jenny also has ‘lived experience’ of disability.

Jenny began by emphasising the priority that all companies should place in digital inclusion;

“It’s never been more important to think about accessibility during these times. I think while accessibility’s clearly been a priority for Microsoft… the limelight the pandemic has put on the need for Access has been pretty humbling and one hell of a learning journey.”

Jenny is deaf and has, before Covid, always been accompanied by an ASL (American Sign Language) interpreter. Since that first day of lockdown they’ve never been together in the same room;

“We had to learn how to work remotely. This isn’t something that we’re used to doing. We had to really learn that skill set. I will tell you that was its own journey and I think every individual has been on their journey sort of figuring out how this works.”

This is why having senior team members and decision-makers with lived experience of disability is so vital to ensure that accessibility is sufficiently and continually prioritized within your organization — and that decisions are based upon input from those who really know what both inclusion and exclusion looks like.

Microsoft’s Disability Answer Desk — its free customer support service for those with disabilities — saw volumes rocket after lockdown;

“They doubled pretty much overnight. We’ve been steadily running at two to three hundred percent of volume expectations, and we’ve been running this for seven years.”

Whether you decide to provide well-signposted channels specifically for disabled customers, or whether you ensure that individuals flagging a disability to the general customer support agents are provided the level of specialist support they need, the ability of users to get answers to questions relating to alternative formats, accessibility settings or assistive technologies is crucial.

Video conferencing has obviously been one of the key technologies that has made home working possible. After lockdown, the majority of questions that Microsoft’s Disability Answer Desk received were about Teams. Because Teams was already accessible, they could then go on to address additional requests (most commonly-requested was AI-powered captions) without having to scramble to retrofit inclusion that hadn’t been sufficiently prioritized pre-Covid. Jenny says;

“We’ve had a 20 year plus history with accessibility, but really our focus in the last few years of infusing it across a company stood us in good stead. It meant we have the foundation so that we could lift quicker. So yeah, it’s been one heck of a ride and, my gosh, very humbling. “I think there’s a pull, a natural human pull to go back to the way it was. I actually don’t think that is possible anymore. I think from a technology perspective, it’s definitely driven a ton of innovation and I think that there’s risks with that.”

She goes on to highlight the challenge associated with disabled employees working from home without physical support on-hand;

“If you do put out something that’s inaccessible, the impact is far more profound because you, for example, don’t have the ability to just grab a pair of eyes. I don’t have the ability to grab a sign language interpreter and understand a video if it doesn’t have captions.”

Accessibility has always driven innovation in digital products — and Covid has prioritized their implementation. Many of the new features in Teams, for example, were driven by a strategy of inclusion. Something as simple as hand raise (which lets the host see that you’re waiting to ask a question) was included after feedback from users experiencing anxiety around when to interrupt the conversation — but as a result had significant benefits for those with disabilities or impairments. Jenny says,

“That’s got really cool implications for cognitive neurodiversity, let alone deafness and other disabilities … With every scenario like this one you do get an innovation boost.”

A big thanks to Jenny for her insights into how an inclusion agenda has both benefitted Microsoft and its customers around the world during the Covid crisis and beyond.

Now let’s turn to the ever-so-slightly important issue of accessible banking…

Paul Smyth (Barclays)

Paul Smyth is a fellow MBE recipient, and founder and leader of Digital Accessibility at UK retail bank; Barclays. It goes without saying that effective access to online banking is very important and, during this period of the pandemic, absolutely essential. Imagine the impact of delivering those services in a way that excludes around 20% of your customers — and in a way that often makes it harder for the other 80% too. A commitment to accessibility and providing sufficient support to disabled and vulnerable customers is key.

Paul chose to focus first on supporting disabled and vulnerable customers:

“I always thought that accessible customer service comes down to three things; offering flexibility, choice and personalization. I think now, in this Covid crisis, there’s maybe two more things that are important for brands to respond to; about being responsive and being responsible … and again making sure they can do their banking how, where and when they want.”

At the onset of lockdown, the use of cash and branches reduced significantly. Barclays proactively reached out to all disabled and otherwise vulnerable customers, outlined extra support and services available, made sure that those customers were fast-tracked when they used phone banking along with NHS workers, and elected to provide specialist support through their main number and not a special one “buried away”. Both this approach and that of Microsoft to provide a specific support line for disabled customers are valid — the main thing is that people can easily find out about the channel and easily find the information and support they need when using it.

Barclays also put in place some very practical measures aimed at bridging the absence of ‘hands-on’ support that vulnerable customers may experience during the pandemic. These included contactless wearables, that the customer could top up for family or friends to then take to do their shopping without having to give them their credit or debit card, as well as ’Cash to the Doorstep’ for those who are shielding. Finally, Barclays reviewed its talking ATMs to confirm that user journeys spoke well for blind and visually impaired customers.

Paul then turned to digital banking. He confirmed that millions more are now using its website and app to do online banking.

“For many of those customers that are quite new to digital and being forced to do it, it’s great that we have our main website and app that you know are accessible — they’re accessibility accredited by AbilityNet. We’re serious and committed about that, we go to great pains to make sure they’re [ATMs] are technically accessible and we do disabled user testing to give a great experience for a greater number of people.”

Barclays has also seen a massive increase in features such as cheque imaging to process and pay a cheque using your mobile’s camera. To help all customers get to grips with these novel new capabilities, Barclays has also created simple guides for those new to digital, on how to use and get the most out of their online and mobile services. Being simple, and inclusive, they will be accessible and understandable to the broadest possible audience.

Paul also had much to say on Barclays’ response to Covid when it comes to its employees. For those with a disability, they were quick to duplicate at home any assistive kit needed at work. As lockdown went on, they had a ten-fold increase in similar requests from other employees without an impairment and, as a result of needing to process the needs of those with disabilities, were then more readily able to put into place scalable solutions for the broader workforce — getting ergonomic chairs and monitors out in volume. They didn’t take a reactive role, however, but proactively invited requests for equipment driven by awareness campaigns.

With regards to transitioning back to the workplace:

“We ensured that diverse voices of all employees were canvassed in terms of how and when they might return to the office, rather than relying on the decisions of senior leaders in their spacious smart home offices.”

Paul also flagged that more socially-distanced workspaces going forward might have advantages for disabled employees, such as better wheelchair access and lower noise levels.

He concludes;

“So it’s really important that we amplify the voices of the disability community in particular as well as people with a whole wide range of backgrounds, to make sure we’re going in eyes wide open to review the ways we’re going to be working from home and the tools that everybody needs to succeed, as well as how the offices of the future are also going to be slightly different from what we have now.”

A huge thanks to Paul for some really practical and impactful tips on what prioritizing inclusion looks like in practice. Now let’s turn to a truly global tech giant…

Neil Milliken (ATOS)

Neil Milliken is Global Head of Accessibility at ATOS, host of AXS Chat and winner of the 2019 Business Disability Forum award. We got started by talking about the shift to home working and how this was handled in such a massive organisation as ATOS. As an early adopter of flexible work patterns, ATOS were well-prepared for the shift to home working:

“As an organization, we were actually doing flexible working quite some time ago, so it’s been really quite good for us in that we were fairly well prepared, not just technologically, because we had the set‑up to enable people to work from home, but in terms of organizational mindset. Because actually a lot of the stuff about working from home isn’t about the technology. It’s about trust. It’s about understanding and allowing your employees to work on their own without micromanaging and seeing them. That said, you know, we still need to make sure that all of the accessibility features work on remote. We need to make sure that people have suitable environments to work in, and that’s problematic if people are working from home.”

Neil emphasized the importance of virtual face-to-face contact, but also warned of overload:

“I think there is a real Zoom fatigue. I’m amazed we have people on this webinar because everybody’s doing a webinar! Me included. We have been doing AXS Chat for six years. It is great to turn the video on to get the visual cues from someone. As a very visual person, that lag between what is being said and the microsecond delay actually puts a fair amount of strain on you. I know that’s not relevant to you so much. But it certainly is among the dyslexic and neurodiverse community.”

As a blind person, I can still see the benefit of having my camera on so that others can get visual signals while I speak, but others may wish to have theirs off for a host of reasons including bandwidth, visual overload, self-consciousness of their appearance or background or a whole host of other personal circumstances.

Neil also talks about a proactive approach to up-skilling employees:

“We work quite closely with organizations like the International Association of accessibility professionals, as does AbilityNet, so we are both parts of the UK chapter there. I have been working with them on strategic leadership certification in accessibility.”

I couldn’t agree more with Neil here. Professionalizing accessibility within your leads and champions is an important element to ensuring an adequate level of knowledge of both guidelines and testing techniques.

He also flags the importance of identifying future accessibility champions via the apprenticeship route:

“At the other side, shifting left, in terms of not leadership, but people to deliver, we have been working on apprenticeships. It’s actually quite hard to find enough people to address the scale of the problem with the skills that we need in the market. So we determined a few years back, that we needed to grow our own skills and we started doing apprenticeships. When we found that people were interested in poaching our former apprentices, I thought maybe this is a signal that we need to go wider.”

As a result, ATOS decided to collaborate on a standardized approach to accessibility apprenticeships:

“Again, working with AbilityNet and Shell and Barclays and a consortium of other organizations, we have created this accessibility apprenticeship standard. It’s for accessibility specialists. It’s the equivalent of a foundation degree; so the first year of a degree — a Level 4 apprenticeship. That’s almost ready to go. I expect that we should be ready to have a first cohort at the beginning of next year… all being well, because Covid is definitely throwing a spanner into the works with things right now.”

Lastly, let’s hear from another company delivering a key service during Covid; Sainsbury’s.

Bryn Anderson (Sainsbury’s)

Bryn Anderson, formerly of SiteImprove, is now an accessibility specialist at Sainsbury’s and a key part of its on-going mission to be market-leaders in digital inclusion in the retail sector. Himself disabled, he flags how digital inclusion shot to the top of the agenda during lockdown:

“I’m visually impaired, born with albinism and certainly I did not identify as someone who was disabled, which was a lot down to my parents … but I find myself identifying with it more and more. Especially during the pandemic, it really carried weight. And the topic, accessibility, disability, it was really mainstream. We were having tech huddles and digital huddles of hundreds of people. 600 people on the calls and accessibility and disability are at the top of the agenda. So incredible in that respect but it does not mean that people understand it, right? …Just because it is being talked about, does not mean that everyone understands it.”

I think Bryn’s point here is key. Even though it’s crucial to get buy-in for digital inclusion at the highest level — with the protection of time and resources required to ensure it’s achievable and maintainable in the long-term — it still takes a concerted effort for all those who are involved in digital in any way to get to grips with what inclusive design looks like in their role and daily tasks. Moreover, it’s vital that they hear first-hand from disabled colleagues or guest customers to have the confidence that their interpretation of the accessibility guidelines is appropriate. Don’t do accessibility in a vacuum — involve those with lived experiences and make sure this approach is formalized and frictionless — not ad-hoc and erratic.

I asked Bryn whether Sainsbury’s’s long-standing prioritization of accessibility helped it during Covid:

“If we take the business as a whole, we were well-prepared in that a lot of people understand what inclusion and accessibility is. Our drivers, pre-Covid, would make exceptions for people, help to carry shopping on the delivery front, and like you mentioned, we have had an accessibility agenda for some time.”

And it seems that Covid has thrown a new focus on the importance of ensuring that its products are accessible and reflect a user’s preferences:

“I was reporting on iOS statistics in the build-up to Covid about font scaling … what is the percentage of sessions completed with a larger font setting? It was 30% of the iOS sessions, which is huge, right? So, that knowledge is there. So we knew that, actually, I beg your pardon, it was 27, it went up to 30 through March, April and May which is also interesting.”

Bryn continues:

“But the other piece, the biggest piece — and I think companies like Sainsbury’s have a massive opportunity here, like Microsoft as well and other large corporates — to really utilize the workforce to leverage their voice as people with disabilities. We know that a huge amount of our workforce (we have 190,000 employees) have impairments. There is a lot of grassroots stuff. A lot happens at that level.”

He goes on to say how important it is to bring those voices together in a way that ensures they are evaluated and acted upon. Called the Enable Network, it comprises colleagues with disabilities at every level within the organization.

“We have people in logistics talking to designers in my team about colleague applications, for example. It gives people a voice, it raises awareness and of course, the most important thing, which is the education piece … You can talk theoretically about someone with a cognitive impairment or dyslexia, but when someone with dyslexia says ‘I tried to do this on your application, it does not work,’ that is where the education happens.”

I asked Bryn about how best to ensure that you can utilize the experience of this wonderfully diverse workforce without it clashing with their day-jobs:

“I think that the reason it can exist in a business is because you have a policy, and you have the initiative from the top-down in the first place. It is hard to do that guerrilla-style underground revolution approach. So everything, every time we have a meeting, every time we connect a colleague to a colleague, it is under the banner of: We want to be the most inclusive retailer where people want to work and shop. So you better turn up!”

We briefly talked about the role of an automated accessibility checking solution (software that can scan a website and highlight a portion of those accessibility errors present) and if it will ever be able to do a full accessibility audit of a website;

“We build and maintain the Sainsbury’s design system which is called Luna. We built a dashboard that monitors a few pages of each of our main customer-facing brands. Obviously, I will caveat that by saying automation is great for doing top of the funnel stuff, but … it can’t test if every task can be completed with a keyboard, for example, so I think we are a long way from that.”

Bryn goes on to warn of organizations that claim to take care of accessibility for you:

“I don’t want to name names but there are solutions out there saying that this sort of remediation solution where: We will bring you 100% compliance, you only have to pay £1,000 a month — whatever. Completely limited solutions … band-aid solutions. There is nothing clever about them.”

It’s true. There’s no shortcut to accessibility — but with some effort, education, and prioritization we see the results.

Lastly, I asked about the challenge of ensuring that inclusive design comes from the content creators and developers, rather than retrofitting, where the onus and responsibility shifts from the people that are developing the solutions to those who must patch and repair accessibility where possible:

“There are too many cooks in the whole process. That is one of the biggest problems. Not everyone has the same level of knowledge … it is a huge challenge and a huge education piece for all of the parts of the system that accessibility touches so, ironically, it is hard to be inclusive without a specialist at the moment.”

It’s true. As we’ve heard from my other guests above, accessibility issues touch every department and every role to some extent — and yet, until it is taught as a standard part of every digital worker’s role, it will require champions with additional knowledge to be actively involved. That’s a tough ask across an organization of the size of Sainsbury’s (or indeed ATOS, Barclays or Microsoft) but these amazing organizations are definitely giving it the priority and resources it deserves.

Some Straightforward Steps To Better Websites

Accessibility can be a daunting topic if you’re just beginning to get to grips with it. Let’s finish off by looking at some simple, straightforward steps to get you started — for websites at least.

These five tips will make your site slicker and better to use for a wider audience and will help you meet your obligations under the Equality Act 2010.

1. Hide Your Mouse To Check Keyboard Accessibility

Making your site accessible without using a mouse is a legal requirement and something that will benefit many of your visitors. People with little vision rely on keyboard access as they cannot easily see the mouse cursor on the screen. Sighted users with motor difficulties such as Parkinson’s or a stroke can find keyboard access simpler as well.

Just by hiding your mouse and trying to access your site and all its options with only a keyboard can show how you’re doing and how to improve this. In particular, make sure that a visible focus indicator is always present (preferably a highly visible one), ie, so it is very obvious where your mouse or cursor is at any given time. Also make sure that there is a logical focus order around the page, ie that the page is set up in a way that doesn’t mean screenreaders or other technology jump all over the page and don’t make sense to all users.

2. Avoid Poor Contrast

Everyone finds low contrast text difficult to read, particularly people with low vision. Use a contrast checking tool such as Tanaguru’s Contrast Finder, this allows you to enter two different colors and check the contrast between them. It can also suggest alternatives if the colors have insufficient contrast. Alternatively, a color picker tool like the Contrast Analyser from the Paciello Group will help.

Hint: Trust your eyes too — it can be simple to spot offending text colors by eye, and then just verify them with the tool. This is best used early in the design process, so that issues can be addressed before the site goes live.

3. Do A Free Accessibility Check

The organization WebAIM (Web Accessibility In Mind) provides a free, automated, online checker here. This can give you quick feedback on some more technical issues on your website, e.g. if forms are correctly marked up with labels. This is a great way to highlight issues during the development process. Be aware that any automated testing can only cover a small subset of all possible accessibility issues. However, it is a valuable technique when used alongside manual testing.

4. Provide An Accessibility Page

An accessibility page is often an opportunity for organizations to state what measures they have taken to make their site accessible. You can also use this page to let people get in touch with any difficulties they experience while using your site. (See AbilityNet’s accessibility page for an example.)

Getting feedback from people visiting your site is very valuable. By making it easier for users to feedback to you directly, you will benefit greatly by both demonstrating your commitment to improving your site, and being able to respond to individual issues as they arise.

5. Content Is King: Know Your Audience

People come to websites to find information, or to carry out an action. It makes sense to make this process as easy as possible for people. Know your expected audience, and write copy accordingly. Using financial jargon may be fine for visitors with a financial background, but other users may miss out. Good practice is to avoid jargon, or if it is necessary, provide a glossary.

Make use of headings, paragraphs, and bulleted lists to break text up into meaningful sections. Make one key point per paragraph. Use different methods to convey information. Some users will prefer to read content, others will benefit from a video, others prefer a simplified, or illustrated guide.

Covid: More Opportunity Than Challenge

In conclusion, it looks like Covid has brought organizations to a realization that now, more than ever, is the time to embrace accessibility and ensure that products are usable by all; all your customers and all your employees. Your organization can also benefit from the digital inclusion bonus by following some of the approaches outlined above.

So, how’s your organization doing? Are you proactively and systematically benefitting from your diverse employees and customers — or are your accessibility efforts ad hoc and uninformed? Do you distribute the responsibility for digital inclusion across departments, or do you rely on an isolated team without the reach or authority to make a real impact? Are you prioritizing accessibility early and putting the right tools and training in place — or are you choosing to reactively retrofit inclusion?

If you’re not sure about the answers to any of the above and you’d like to be stepped through the process of evaluating the level of accessibility that currently exist within your organization’s digital properties, policies, processes, and practices — and systematically assisted in compiling a roadmap to compliance — then organizations such as AbilityNet can help.

At present, only a vanishingly small proportion of websites are accessible and legally compliant. As a disabled person myself, I am only too acutely aware of what digital exclusion means to those shut out of online services. Some of these services (like food shopping, banking or video conferencing) will be vital to survival and employment during this unprecedented time of pandemic and isolation. Others, arguably less essential, will nevertheless immeasurably add to our quality of life. Let’s learn from the mega-brands who have chosen to be inclusive, and let’s help make everyone’s life a little better during Covid and beyond.

AbilityNet’s digital accessibility experts can offer advice about how to improve your website’s accessibility. Visit the AbilityNet website for more information.

Other Resources

If you’ve found this article useful, here are a few more I’ve written recently on related topics:

• Why Is Web Accessibility Important?
• The Carrots And The Sticks Of Inclusive Design
• Three Simple Steps To Accessible, Compliant Procurement
• COVID-19 And The Digital Divide: Insights From The Experts
• Helping Government Push Digital Inclusion During COVID-19
• 9 Years Of Global Accessibility Awareness; How Far Have We Come?

You can read all my articles on the power of tech and inclusion on the AbilityNet website.

Further Reading

• How A Bottom-Up Design Approach Enhances Site Accessibility
• Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size
• How To Build Custom Data Visualizations Using Luzmo Flex
• How To Improve Your Microcopy: UX Writing Tips For Non-UX Writers

(ra, il, mrn)

We are living in a world exploding with information, but how do we find what is relevant to us at the time that we need it? I believe that good information architecture is key to helping us navigate through the mountains of data and information we have created for ourselves. 

In this article, we will first describe what information architecture is, why it’s important, and approaches to effective implementation. Then we explore ideas around the broader view of the information age, how we use information, and how it impacts our world and our lives. These insights are designed to help you to understand the bigger picture, which enables us to grasp the value that good information architecture delivers to help our information-overloaded lives.

What Is Information Architecture And Why Is It Important?

“Information architecture is the practice of deciding how to arrange the parts of something to be understandable.”

— The Information Architecture Institute

From a user experience perspective, this really means understanding how your users think, what problems they are trying to solve, and then presenting information in a logical way that makes sense from within this context. 

Whether it is a website, a software application or a smartphone app, it’s about first designing the structure of how your information is organized, and then translating this into a logical navigation hierarchy that makes sense to the users who will be accessing it. In this world where we can sometimes feel as though we are drowning in data, information architecture provides us with a logical way of organizing this data to make it easier to locate. 

Here are some other reasons why good information architecture is important:

For The User

• It reduces cognitive load.
  Too much information on a screen with no clear pathway can make it difficult for a user to focus. Too many options can lead to choice deferral where a user chooses not to make a decision at all.
• It speeds up the process of finding the right information.
  This is the opposite of choice deferral, where the user is able to easily locate what they are looking for with clear navigation choices.
• It can keep the user focussed on the task they are trying to achieve.
  If the task a user is engaging in is easy to follow without additional non-contextual navigation elements, it’s less likely they will be distracted.
• It makes it easier to analyze and understand information by the addition of context.
  Providing a visual navigation path of exactly where the user is within a website can provide more context for the content they are viewing. For example, during an online bank account application, displaying the total number of steps in the process and visually indicating exactly which step you are at, and what the next steps may involve gives context to the flow.
• Reduces frustration and contacting support.
  If it is clear to the user where they can find what they need, there is no need to request help. For example, if a customer has received a purchased item that is faulty, without obvious instruction on how to rectify the situation, they may call the customer support center. 

Below are a couple of examples helping to illustrate the points about the user.

The example above demonstrates:

• The use of a “wizard” style application form and illustrates many of the points above. 
• Clear navigation steps across the top of the page providing context as to where the user is in the process.
• Simple choices to guide the user. 
• Contextual information links in the form of FAQs relating to the step the user is at. 
• Navigation button at the bottom of the page giving specific instructions for the next step.

The website example above, Punk Avenue shows another example of clear main navigation, with a brief summary of what you will find on each page. Below that is a series of tabs that keep you on the same page and visually indicate what information you are viewing. 

For A Business

• Keeps customers on their website for longer.
  Research shows that visitors to a website will often leave within 10-20 seconds, but with a clear purpose, you can engage your visitors for a longer period. Although good design and messaging help to present the site’s value proposition, a well-designed navigation display can also contribute to demonstrate what kind of information supports this value proposition.
• Increases the chance of customer conversion.
  If your site visitor can find what they want via the navigation, and there are simple and minimal steps provided on how to acquire it, the chances of conversion are far higher than a site design that is unable to direct the user to the right information.
• Reduces risk of customers going to a competitor.
  If a visitor to your site can easily find what they are looking for through effective navigation and good design, chances are they’ll stay there rather than move onto the next Google search result.
• Reduces duplication of information (by design).
  Good information architecture can ensure that the same or similar content is not replicated. Understanding and documenting the content structure, particularly on information-heavy sites, can prevent these potential issues.
• Better ROI through efficient use of the platform.
  The investment spent on ensuring that the information architecture on your site is effective and makes sense to your users is a compelling way to increase your customer conversions and the income derived from those sales.
• Reduces cost of support when a user can’t find something.
  As described earlier, creating an unnecessary load on the customer support team is an additional cost that can be avoided by a site that functions well and provides assistance for customers when they need it. 

The example below helps to illustrate some of the points above about business.

The example above demonstrates how poor navigation displays can impact customer conversion. This case study shows an increase in customer revenue by 53.8%. The additional information in-between the search bar and the products was removed which also served to move the product display closer to the top of the page. The vertical information that was removed created the effect of what may have been perceived as a superfluous navigation bar, or maybe just information that was not considered relevant for a user in their product search. 

When thinking about designing the information architecture for your website or app, efficient site navigation is crucial.

As a designer, ask yourself “Does the language resonate with the user, does the hierarchy make sense to the user flow, can they easily find their way back to where they were?”

“

If your website is content-heavy, you may also consider the use of site search. Let’s explore some research around site search vs navigation.

Search Vs Navigation

In 1997, Jakob Neilson conducted a study that showed over 50% of website users would use the search function over site navigation. In 2012, econsultancy.com reported that 30% of website visitors to e-commerce sites will use the site search, while a Kiss metrics study found that 40% of users preferred using search. In 2010, Gerry Mcgovern’s study demonstrated 30% of users preferring search.

Although the relationship between these findings may seem elusive, one thing is clear; and that is that users will use both site search and site navigation to find information, in varying proportions.

In order to provide the best user experience for your customers, you may need to consider integrating a site search, in conjunction with an effective and well-designed site navigation if your website has a complex structure and large amounts of information.

Here is a practical example of where a site search would be useful for site visitors. Let’s say you visit a website that sells cleaning and health products, and you were looking to buy some antibacterial hand wash. There are two categories you can see, “Body Washing Products” and “Skin Cleansers”. Which one do you choose? 

And if you were to browse these categories that may have products listed alphabetically, there may be a large list to scan through. Below are some similar phrases that could be used, depending on what any individual’s idea of antibacterial hand wash could also be called:

• hand sanitizer
• sanitizing soap
• hand disinfectant
• disinfectant hand wash
• hand sterilizer
• hygienic soap
• antiseptic handwash

If you are looking for “hygienic soap”, it may take you a while to scan the list to find the “antibacterial hand wash”. As it is difficult to cater to all possible synonym variations in the navigation structure of a site, a well-designed site search can allow users to search for these variations, by adding what we call metatags to each piece of content. For example, the “antibacterial hand wash” product could have additional hidden information or tags that include all the terms listed above, allowing users to search for any of these and return search results that match.

The Politico website below uses both navigation and a search function. It demonstrates an example of a content-heavy site that groups the information into categories making it easier to find topics. The site utilizes a “megamenu” which is accessed from the top left corner of the page. This is a common way to provide a menu of options with categories and subcategories that can be used for those visitors that want to browse content, and the search function can be used to locate a specific piece of information.

According to research from measuringu.com, about 14% of users will start with a search and the rest will start by browsing through the navigation options.

Good And Bad Information Architecture Examples

Let’s review some website examples demonstrating good and bad uses of information architecture. Great navigation is a reflection of well-designed information architecture that considers the target audience’s needs.

Useful Navigation

This Sears website makes good use of mega drop-down menus. These help to provide navigation options to sub-categories that are clearly grouped. It also uses images to provide much faster cognition for the user.

Visual Navigation Driven By Search

Pinterest demonstrates a useful way to present visual user-generated content based on search terms. The search is the navigation. This works well based on the sheer amount of content available on the site, which would make it difficult to provide a simple navigation system based on categories.

Overwhelming Navigation

This website example is complete information overload with bad use of white space and way too many choices. It doesn’t help that the design of the website is cramped making it hard to identify all the options available.  

How Do You Get It Right?

Here is a brief list of considerations and processes to use when you are designing the information architecture for a product or service.

• First understand your user’s needs and what tasks they are trying to achieve.
  You can conduct user interviews to really understand what problems your product or service is solving. From here, think about how they might interact with your website and what pathways they could take to achieve their objectives.
• Try to create a hierarchy with minimal sub-levels.
  If you can achieve this, then the user can access any information on your site with a maximum of two clicks.

• Don’t use jargon in the navigation language.
  Understand the language of your audience. Test with your users to ensure they understand the correct meaning of the language used.
• Don’t rely on images or icons alone as a navigation tool.
  There are very few universally understood icons, such as Help, Error, and Print, and these may differ culturally. 

• Always indicate to the user exactly where they are within the site so they can easily navigate back to a previous page. Breadcrumb navigation is one example of how to do this effectively as shown in the example below. It can sit below the main navigation showing you each page you have clicked on with the current location displaying as the last on the right.

• Use design to create distinct visual differences between the hierarchy levels.
  For example, a top-level hierarchy heading may be displayed with a larger font size. These visual differences can guide the user’s eye to more important information first. It can also be the job of the visual designer to help differentiate these areas.

Methods To Test Your Navigation

Card Sorting

Write out the name of each information section on paper, and have participants sort cards containing all your navigation sections into groups that make sense to them. Try doing this same sort with at least five participants so you can start to identify patterns and preferences for the categories and subcategories that are created. This is called an open card sort. A closed card sort can be used if you decide to have predetermined top-level categories that the participants place the cards under based on what makes sense to them.

Recommended reading: Card Sorting Beginner’s Guide: Improving Your Information Architecture

Scenario Testing

By using a wireframe or prototype, ask participants to complete a specific task by navigating through the site. You can use a clickable wireframe to test this by observing how clear it is for a user to carry out the activity. An example task (refer to the wireframe below) might be to register on the website and then make a booking for a single event and publish it.

Tools

Treejack is a tool that allows you to validate your navigation structure. It asks the participants to indicate where they would look to find specific information and provides you with insightful actions.

Free Keyword Tools

You can use free tools to help to identify commonly used search terms that can help with language choice in your navigation. For example, answerthepublic.com is a free site that allows you to enter a search term to see what other related search terms are being used.

We’ve covered the basics of information architecture, and now it’s time to move onto the bigger picture, the Information Age. Understanding context around the massive amounts of data and information we are surrounded by can help to shape your outlook as a UX designer, as it has helped inform the direction and approach to my own design practice.

The Information Age

We live in a time where our access to information is unprecedented. It is instantaneous, it is global, it is everywhere, it is the Internet. News stories are broadcast as they unfold, communication with friends and family in other parts of the world has never been easier, and Google has become our personal library of virtually limitless topics. Information is king and queen. 

Key Facts About Information

• 90% of the world’s data has been created in the past 2 years.
• The amount of data in the world doubles every two years.
• If all the data in our world was stored on 128G iPad tablets, they would create a stack going from the Earth to the Moon 6.6 times! 
• Only 37% of all data is considered “useful”. And of that 37%, a much smaller percentage is actually analyzed.
• 33 percent of managers feel that information overload was impacting their health.
• 66 percent of managers reported increased conflict with teammates as well as reduced job satisfaction.

And finally, let’s examine how information can be used and abused in this age of information.

“We live in a time where our access to information is unprecedented. It is instantaneous, it is global, it is everywhere, it is the Internet.”

“

The Power Of Information

“With power comes great responsibility.”

This famous quote is often attributed to Uncle Ben from Spiderman. We can think of this in reference to how powerful information can be, but when in the wrong hands, there is an opportunity to abuse this power. Below is my perspective on how the power of information can manifest in our world, and why it is both a precious and dangerous commodity. 

“Information Is Power”

Internet activist, Aaron Swartz, took his life in 2013 at the age of 26. Aaron was the original creator of Reddit, and among many achievements, his untimely death occurred when he was fighting felony charges for illegally accessing and downloading academic information. He wrote a manifesto that called for activists to “liberate” information secured by corporations, and campaigned against Internet censorship. 

We recognize that information alone is useless if no one can find it. And then once it is made available, it needs to be acted upon. On a large scale, information can be shared to protect public health and safety, to help governments to create better policies and to empower individuals to live better lives. It can also be used for propaganda purposes for political gain, to create fear for the purpose of control, and to instill beliefs for the sole purpose of financial profit. 

Information Can Change World Events In An Instant

How quickly have governments pivoted and changed their approach to the COVID-19 pandemic based on new information? Not to mention the release of conflicting information from alternate sources that has also created mass confusion.

An example of this pivot was seen in Australia, when our Prime Minister announced non-elective surgery would be suspended from March 26, but just hours later, it was moved to April 1st after the health minister met with the private hospital sector that afternoon. This was due to the updated information received that would see the stand-down of medical staff, even as hospitals prepared for a surge in COVID-19 cases. 

Dangers Of Misinformation

In current times, examples: “Fake news” claims, presidential tweets, and allegations of misinformation coming from China around the COVID19 pandemic. Donald Trump who is attributed with the reference to “Fake News”, now more generally attributes incorrect news reporting to journalists and media outlets such as CNN.

Unfounded “conspiracy theories” are another example of ways to link seemingly related information points that have no solid relationship evidence. For example:

• Allegations that the Coronavirus was created in a lab in Wuhan, China, currently has no evidence to support it.
• There are also stories circulating that 5G is somehow connected to Coronavirus.
• Bill Gates is responsible for the pandemic.
• US Army Reservist Maatje Benassi has been accused of being patient zero in the COVID-19 pandemic by bringing the virus to Wuhan in 2019 in collusion with the US Government.

Information Security

In 2018, it was revealed Facebook was exposed to a massive security breach after hackers exploited a vulnerability to access user’s personal data. The impact of the access to this kind of personal information could have ramifications for those individuals impacted for years to come.

In July 2017, shortly after I left employment at Equifax (no connection whatsoever!), a data breach impacting over 147 million people occurred in the US. The data exposed included Social Security numbers, birth dates, and some credit card details. After spending $1.4 billion on security upgrades, it is still resolving ongoing class actions from consumers that were impacted.

The importance of protecting privacy and personal data has become increasingly important throughout the world. 132 of 194 countries currently have legislation in place to protect the sharing of personal information without consent, and the data and privacy of individuals. In 2017-18 there was a 10% rise in the number of countries enacting data privacy laws.

Based on the examples above, it is clear that information in itself doesn’t discriminate for good or for evil. That’s why it is so important to validate data sources and analyze information before taking it on board.

Conclusion

We have reviewed how we use information, the power it yields, the sheer volume of data we have created, the impacts of information overload, and how information architecture can be used to organize and structure this information for those seeking it. There is no denying that in this age of Information why it is so important to focus on information architecture as a solid foundation for delivering the right information to your customers to make their lives easier.

Further Reading

• Is Your Website Stressing Out Visitors?
• What Vitruvius Can Teach Us About Web Design
• Readability Algorithms Should Be Tools, Not Targets
• Designing The Words: Why Copy Is A Design Issue

(ah, ra, il, mrn)

If you spend enough time interacting with digital accessibility practitioners, you may encounter the phrase “equivalent experience.” This saying concisely sums up a lot of the philosophy behind accessibility work.

Our industry tends to place a lot of focus on how, often at the expense of why. For accessibility-related concerns, it is vital to learn about the history, and lived experiences of disabled people as a context for understanding the need for design and code created with access in mind.

This is the first of two articles on the topic of equivalency, and how it relates to digital accessibility. It will help us define what an equivalent experience is. Once we have a common understanding established, I’ll then discuss how to go about implementing equivalent experiences for common accessibility-related issues.

The State Of Things

The truth of the matter is that even though we live in a multi-device world full of smartphones, augmented reality, voice assistants, and IoT smart sensors, our default is still predominately:

• Visual,
• large screen,
• fast connection,
• powerful computer and display,
• male,
• white,
• wealthy,
• young,
• Western,
• technologically-literate,
• and abled.

This is reflective of the biases that are inherent in how we design, develop and grow products.

The previous list may not be the most comfortable thing to read. If you haven’t closed the browser tab already, take a moment to consider your daily workflows, as well as who your coworkers are, and you’ll begin to understand what I’m getting at.

At its core, delivering an equivalent experience is ultimately about preserving intent — with the intent being the motivating force behind creating a website or web app and all the content and features it contains.

This translates to making the meaning behind every interaction, every component, every photo or illustration, every line of code being understandable by the widest range of people, regardless of their device or ability.

Prior Art

I’m not the first person to discuss this topic (and hopefully not the last). Speaker, trainer, and consultant Nicolas Steenhout is one such advocate. His great post, Accessibility is about people, not standards, is well worth reading.

If you’re the kind of person who is into podcasts, his A11y Rules has a wonderful series called Soundbites. It features “short discussions with people with disabilities about the barriers they encounter on the web.” These insightful interviews also touch on what this article discusses.

What Isn’t An Equivalent Experience?

Showing examples of what something is not can be a way to help define it. For equivalent experiences, an example would be a web app geared towards use by the general public not having a mobile breakpoint.

With this example, everyone using a device with a small display is forced to pinch, pan, and zoom to get what they need. Here, the burden is placed on anyone whose only crime was using a smartphone.

Most likely, whoever conceived of, designed, and developed this didn’t stop to think about circumstances other than their own. In this sort of (unfortunately still all too common) scenario, I all but guarantee that the web app looks great on the laptops or desktops of the designers and developers who made it.

A designer saying, “it has enough contrast for me and my ‘old’ eyes” is the same as when a dev says, “works on my machine.”

The thing is though, we don’t design or develop for ourselves.

So, are we really ok with saying, “you don’t matter” to folks who are not like us? #a11y

— Heather (@_hmig) December 19, 2019

People using a smartphone to access this website are victims of circumstance. The extra effort someone needs to do to get it to work indirectly communicates that they weren’t a priority, and therefore not valued. If you’ve used the web for any significant portion of time, I’m willing to bet this, or a similar experience has happened to you.

This example is also a hop, skip, and a jump away from another common, yet serious accessibility issue we often don’t consider: screen zooming:

Screen Zooming

Screen zooming is when someone is prevented from being able to zoom their displays and make text larger—many native mobile apps are guilty of this. When you disallow this sort of behavior, you’re telling prospective users that unless they have vision similar to you, you aren’t interested in them being able to use your app.

For this scenario, a gentle reminder that we will all get older, and with aging comes a whole host of vision-related concerns. A question you should be asking yourself is if your future self will be capable of using the things your present self is making. A follow-up question is if you’re also asking the people you’re managing this.

I just had my eyes dilated, so I can’t read any text that isn’t comically large. I don’t know how to use a screen reader. I’ll be fine in a few hours, but this has been a fascinating journey into how well third-party iOS apps respect text size accessibility settings!

(Thread)

— Em Lazer-Walker (@lazerwalker) January 29, 2020

Accessible Experiences Aren’t Necessarily Equivalent Ones

This might be a little difficult of a concept to grasp at first. Let’s use this Rube Goldberg machine made by Joseph Herscher to pass the pepper to his dinner guest to compare:

To pass the pepper, the machine, sends it through an elaborate system of weights, counterweights, ramps, rolling objects, catapults, guillotines, burners, timers, carousels, etc. — all constructed from commonly found kitchen items. While this setup will technically ensure the pepper is passed, it is an annoying, overwrought, time-intensive process.

Many digital experiences are a lot like a Rube Goldberg machine when it comes to accessibility. Since accessibility issues are so prevalent, many forms of assistive technology provide a large suite of features to allow their user to work around common obstacles.

Unfortunately, discovering obstacles, and then figuring out and activating the appropriate combination of features to overcome them can take a disproportionate amount of time and effort.

To say it another way: A simple click on a button for an abled person may take far more time and effort for a disabled person, depending on how the button has been made.

Chilling Effects

Frustratingly, the extra time and effort a disabled person has to put into operating a technically accessible experience may feed back into their disability condition(s). For example, the presence of a motor control disability such as arthritis may make the overall experience even more taxing.

Cognitive accessibility concerns are also another important thing to consider. What may seem easy to understand or intuitive to use for one person may not be for another. This is especially prevalent in situations where there is:

• Specialized domain knowledge,
• education on a new concept,
• and/or a lack of common affordances for how the user interface operates.

Cognitive accessibility isn’t an abstract concern, either. Poor user interface design that ignores the circumstances of the end user and dumps too much cognitive load onto them can have very real, very serious consequences.

Compounding Effects

These factors are not mutually exclusive. Proponents of Spoon Theory know that inaccessible experiences conspire to sap a person’s mental and physical energy, leaving them exhausted and demotivated. Worse, these sorts of scenarios are often more than just a person perpetually operating at a diminished capacity.

Frustrating digital experiences can lead to a person abandoning them outright, internalizing the system’s fault as their own personal failure. This abandonment may also translate to a person’s willingness and ability to operate other digital interfaces. In other words: the more we turn people away, the more they’ll stop trying to show up.

“Nobody has complained before” is a silly excuse for not caring about accessibility. You’re right, they didn’t complain. They left.

— Vote blue, no matter who. (@karlgroves) December 8, 2018

Don’t Take My Word For It

To make the abstract immediate, I reached out on Twitter to ask people about their experiences using assistive technology to browse the web.

I also took a purposely loose definition of assistive technology. All-too-often we assume the term “accessible” only means “works in a screen reader.” The truth of the matter is that assistive technology is so much more than that.

The way the web is built — its foundational principles and behaviors — make it extraordinarily adaptable. It’s us, the people who build on and for the web, who break that. By failing to consider these devices and methods of interacting with web content, we implicitly drift further away from equivalency.

Consistency

For some, assistive technology can mean specialized browser extensions. These micro-apps are used to enhance, augment, and customize a browsing experience to better suit someone’s needs.

Damien Senger, digital designer, uses a browser extension called Midnight Lizard to enforce a similar experience across multiple websites. This helps them “to focus on the content directly and to limit having too big differences between websites. It is also helping me to avoid too harsh color contrasts that are really uncomfortable.“

Damien also writes, “Often websites are really difficult to read for me because either of the lack of consistency in the layout, too narrow lines or just not enough balance between font size and line height. Related to that, color can create a lot of unhelpful distraction and I am struggling when too harsh contrast is nearby text.”

How To Maintain Equivalency

• A larger font size and comfortable line height goes a long way towards making content pleasant to read.
• A well-considered color palette with good contrast ratios helps to keep the reader immersed in your content.
• Consistent application of color can also help communicate what elements can be interacted with, so long as it is not just the color alone that indicates interactivity.
• Ensure that text content is written using text (not presented as an image), allowing it to be read aloud, restyled, and reformatted.
• Use semantic HTML, sectioning elements, and structured microdata to allow your content to adapt to specialized reading modes and browser extensions.
• Understand that branding includes how something behaves, responds, and reacts in addition to how it looks.

In addition, Damien also augments their browsing experience by using ad blocking technology “not only for ads but to block animations or content that are too distracting for my ADHD.”

It’s not too difficult to imagine why distracting and annoying your users is a bad idea. In the case of ads, the industry is unregulated, meaning that rules to prohibit ADHD, migraine, and/or seizure-triggering animations aren’t honored. Through this lens, an ad blocker is a form of consumer self-defense.

I'll say it again: Telling users their access isn't as important as your bottom line is a BAD take. Ads are fine as long as they don't create a barrier by moving! #ADHD #A11y #PSH #WCAG https://t.co/i6mifI0JRE

— Shell Little 🧜‍♀️ (@ShellELittle) February 27, 2020

Kenny Hitt also chimes in about ads: “…regardless of the platform, the thing that annoys me most are websites with ads that essentially cause the site to constantly auto update. This prevents me as a screen reader user from reading the content of those websites.”

Again, a lack of regulation means the user must take measures into their own hands to keep the experience equivalent.

How To Maintain Equivalency

• Avoid scripts that refresh the page automatically.
• Avoid flashing and strobing animation, especially animations that are known seizure triggers.
• Provide methods to pause any and all animation.
• Use the prefers-reduced-motion media query to disable animation, if requested.
• Don’t use scripts that try to detect ad blocking.
• If a modal is used to inform someone about a newsletter signup, cookie policy, or that they’re using an ad blocker, ensure that the modal traps focus and can be dismissed using a keyboard.

Opportunity

A lack of an equivalent experience translates directly to lost opportunity. Many individuals I spoke with mentioned that they’d abandon a digital experience that was inaccessible more often than not.

Brian Moore mentions, “there are web sites where I like their products a lot but won’t buy them because the site itself is such a struggle, and attempts to reach out have met with either silence or resistance to taking any action.”

Brian cites the Fluance website as the most recent example. The bugs present in its shopping user flows prevents him from buying high-end consumer audio equipment.

Fluance’s entire web presence exists to sell products. While updating a website or web app to be accessible can be an effort-intensive process, it would definitely be in Fluance’s best interest to make sure its checkout user flow is as robust as it could be.

Opportunity isn’t limited to just e-commerce, either. As more and more services digitize, we paradoxically push more people out of being to live in the society that relies on these digitized services—people with protected rights. Again, this shift away from an equivalent experience is the culprit.

Justin Yarbrough was “applying for an accessibility-related job with the Arizona Department of Economic Security over the summer, where they wanted me to take an assessment. The button to start the assessment was a clickable div. They wound up waving the assessment requirement for the position.”

Jim Kiely tells me about his brother, who “has stopped paying his water bill online because the city water website [doesn’t] work well with a screen reader and high contrast.”

Personally, I have friends who have been prevented from submitting résumés to multiple sites because their job application portals were inaccessible.

How To Maintain Equivalency

• Use semantic markup (the button element for buttons, the anchor element for links, input and label elements for forms, etc.).
• Perform an initial test of your user flows using assistive technology to make sure they make sense.
• View your website or web app using High Contrast Mode and inverted colors to make sure interactive content is being displayed properly.
• Use actual assistive technology users to test your user flows.
• Demand third-party vendors to sign off on the accessibility of their product, including a Voluntary Product Accessibility Template (VPAT).

Adaptability

Soren Hamby, product marketing manager and design advocate, writes of their experiences using screen magnification software and screen reading capabilities. Soren has “varying levels of vision so [they] tend to not always need the same level of accommodation.”

Of note, Soren mentions their struggles with grocery delivery apps, specifically “the carts often only read the quantities rather than the item name. It’s much easier to order with a sighted person.”

There are three things to consider here:

First is the surface-level acknowledgment that the app operates differently for different people, the main point this article is driving at.

Second is the fact that Soren uses multiple forms of assistive technology, with the mix a shifting combination depending on a combination of their task at hand and how well the digital interface meets their access needs.

How To Maintain Equivalency

• Make sure that the labels for your interactive controls are relevant and concise.
• Incorporate disability scenarios and conditions into your design personas.
• Avoid using absolute length units. (No, seriously.)
• Avoid setting maximum widths and heights.
• Avoid using fixed and sticky-scrolling components, especially larger-sized ones.
• Test your layouts by zooming and/or increasing your default type size to make sure that content does not get obscured.

This brings us to our third and most important point:

Autonomy

Having to rely on the help of a sighted person to order groceries is not ideal. For many, the acquiring, preparation, and consuming of food can be highly personal acts. Being forced to incorporate outside assistance into this process is far different than willingly inviting someone in to share an experience. The same notion applies to every other digital product, as well.

Kenny also mentions grocery apps: “…my local Kroger grocery store has started an app redesign in June 2019 that is breaking accessibility with their app.” In discussing this regression, he goes on to elaborate, “Because I can’t financially change to another business, I won’t let it drop. Kroger is going to discover that I don’t stop with a problem. Persistence in solving problems is a requirement for any disabled person if you want to succeed in the world.”

Equality

Kroger would be wise to listen to Kenny’s feedback. The grocery company Winn-Dixie was recently successfully sued for not being operable with a screen reader. The lawsuit argued that the grocer’s website was heavily integrated with their physical stores, and therefore violated the Americans with Disabilities Act (ADA).

Another recent case involves the Domino’s Pizza franchise. Taken all the way to the Supreme Court, the ruling clearly and unambiguously states that preventing someone from using a website or app, simply because they used screen reading software, is unconstitutional.

For both cases, the cost to implement fixes were far cheaper than going to court—something to think about the next time you’re deciding where to order pizza.

Despite some ugly misconceptions about the ruling, the evidence is clear: in the United States, there is now legal precedent for private companies to be sued for violating civil rights via an inaccessible digital experience. Europe and some parts of Asia have similar laws, as well.

How To Maintain Equivalency

• Understand that technical decisions can have legal consequences.
• Honor the law and don’t create circumstances that lead to discrimination.
• Familiarize yourself with the Web Content Accessibility Guidelines (WCAG).
• Add accessibility requirements to your acceptance criteria.
• Add manual and automated accessibility checks to your design and development workflows.

Reactivity

Another way to maintain an equivalent experience — one that is often not thought about — is to give reports about accessibility issues the same weight and concern as other software bugs.

Reported accessibility issues are oftentimes downplayed and ignored, or are sent to someone ignorant of the issue and/or powerless to fix it.

Kenny, who started using a computer with a screen reader in 1984 says, “When I run into accessibility issues nowadays, I’ll try reporting it, when I get the usual response from the feedback of the person not caring, I just give up and walk away. If [the response] comes from somebody in marketing who doesn’t understand accessibility, I just give up and go away. There’s no point in trying to teach these people about accessibility.”

Kenny’s view is shared by many others in the disability community. Remember what I said about compounding effects earlier.

Brian reports that,

“If I find significant issues with a site, I do report it. Depending on who I talk to it ranges from ‘here’s what doesn’t work’ to all kinds of technical detail about why if I can get to the right people.”

Getting it to the right people is key. Another part of equivalent experience is handling feedback in a timely and constructive way, much as how you would with any other issue with your product or service.

Responding to an accessibility issue is easy:

• Thank the person for taking the time and effort to report the issue.
• Acknowledge the issue and identify what person or team will be handling it.
• Ask clarifying questions as needed.
• Offer potential workarounds, with the understanding that they’re only temporary until the underlying issue is addressed.
• Offer to involve them in the process, including notifying them when the issue has been fixed.

Being open, honest, and transparent about your bug fixing process goes a long way to establishing trust in a population that has historically and routinely been overlooked.

Also know that assigning someone to mind an email address to conduct tasks on behalf of an assistive technology user is not an appropriate, effective, or sustainable solution. Remember the concerns surrounding autonomy discussed earlier.

How To Maintain Equivalency

• Create an accessibility statement, including known issues, a tentative timeline for their fixes, and easy to discover contact information.
• Ensure that anyone customer-facing (quality assurance, customer support, marketing, etc.) are trained on protocol for accessibility-related issue reporting.
• Quantify accessibility-related issues, both internal and reported.
• Be on the lookout for patterns and trends with discovered accessibility issues, as they represent learning opportunities.
• Understand that not all platforms to collect feedback are created equal.

Motivation

We’ve covered actual people’s everyday frustrations, as well as civil rights and the current legal landscape. If these don’t motivate you, allow me to present another factor to consider: profit.

There are two provoking studies I’d like to call attention to, but they are by no means the only studies performed in this space.

First is the Click Away Pound Survey, a survey conducted in both 2016 and 2019 to “explore the online shopping experience of people with disabilities and examine the cost to business of ignoring disabled shoppers.”

The survey discovered that more than 4 million people abandoned a retail website because of the access barriers they found. These people represent 17.1 billion pounds (~$21.1 billion USD) in lost potential revenue.

Second is the The Purchasing Power of Working-Age Adults With Disabilities (PDF), conducted in 2018 by the American Institutes for Research. This study discovered that there is an estimated $490 billion in disposable income amongst disabled working-age adults. That’s billion with a capital B.

There are two of the (many) takeaways from these studies I’d like to highlight:

First is that from a historical perspective, the web is still very much new. On top of that, its ubiquity is even more recent, meaning that use by the general population is a small sliver of the amount of time it’s been around.

Second is that the general population contains many people who are disabled, and that their needs are not being met. These unmet needs represent billions of dollars of potential revenue.

This is a gigantic market that we, as an industry, are only now becoming aware of. Rather than approaching accessibility with a mindset of risk aversion, why not use this learning as a great way to view your current and future business opportunities?

Complying with the ADA is by definition the legally required minimum for accessibility. It doesn't account for a good user experience, usability, and innovation. Unless you strive for the minimum all the time, compliance is not enough.https://t.co/qOYw6ji23u

— mikey is at home (@mikeyil) March 5, 2020

Let’s Not Stop Here

Too often we think of accessibility as a problem to be solved, rather than a way of looking at the world. Equivalent experiences necessitate that we question our assumptions and biases and think about experiences outside of our own. It can be an uncomfortable thing to think about at first, but it’s all in the service of making things usable for all.

As web professionals, it is our job, and our privilege to ensure that the experiences we deliver are equivalent. In the second part, we’ll investigate how to do just that.

Other Resources

• “WCAG Primer,” Tetra Logical
• “The Web Accessibility Basics,” Marco Zehe’s Accessibility Blog
• “Web Accessibility Checklist: 15 Things To Improve Your Website Accessibility,” WebsiteSetup.org
• “The Importance Of Manual Accessibility Testing: Call The Professionals,” Eric Bailey, Smashing Magazine
• “Taking Accessibility Beyond Compliance,” Dennis Deacon, 24 Accessibility
• “Videos Of People With Disabilities Using Tech,” Hampus Sethfors, Axess Lab
• “Web Accessibility Perspectives: Explore The Impact And Benefits For Everyone,” Web Accessibility Initiative (WAI), W3C

Thank you to Brian Moore, Damien Senger, Jim Kiely, Justin Yarbrough, Kenny Hitt, and Soren Hamby for sharing their insights and experiences.

Further Reading

• Mobile Accessibility Barriers For Assistive Technology Users
• How Accessibility Standards Can Empower Better Chart Visual Design
• Rethinking The Role Of Your UX Teams And Move Beyond Firefighting
• How To Improve Your Microcopy: UX Writing Tips For Non-UX Writers

(ra, il, mrn)

“Design is not just what it looks like and feels like. Design is how it works.”

— Steve Jobs

Like written words are to language, fonts, colors, shapes and icons are to visual design. An effective visual design language not only acts as a communication framework for all stakeholders on a product development team, but unites a brand and its customers to ensure that a company’s brand identity matches a customer’s brand perception.

We use language as a tool for communication with other people. Writers use words to communicate with their readers, while designers use visual language to communicate with their users. Fonts, colors, shapes, visual elements such as icons — those are elements of design language. Effective design language streamlines communication.

While working at Fantasy in 2016, my team was tasked with designing the interface for Huawei’s mobile OS (EMUI 5 interface). I personally was responsible for the visual design language for this OS. Surprisingly, the company didn’t have its own language at initiation; instead, they relied on a customized version of Android that was plagued by inconsistency and lacked a coherent vision. This was largely due to the existence of multiple teams and multiple functional roles with different skillsets and perspectives all grasping at straws to invent a way to communicate. UX designers, interaction designers, visual designers and graphic designers had all worked on the OS in the past, all using their own best efforts to communicate.

Without a uniform system of communication, not only was the user experience jumbled and confusing, it was extremely difficult to integrate changes into a final design. It was a true Tower of Babel.

Writers use words to communicate with their readers, while designers use visual language to communicate with their users.

“

What Does Design Language Provide?

By unifying the project teams under one shared language, a project can move forward with clarity, cohesion and speed.

Consistency

Digital design has few physical constraints compared to industrial disciplines. This gives designers a lot of power to experiment and propose a variety of solutions to any given challenge. However, this can easily lead to disjointed user experiences.

To achieve consistency in design, it’s vital to define reusable and cross-platform components and styling options. Consistent design makes it much easier to ship products on a multitude of platforms and devices, which is especially crucial for companies like Huawei.

Brand Recall

When they interact with a product that has a strong visual language, users tend to remember it better. Unfortunately, a majority of products available on the market have generic designs. It is too easy to confuse one product with another when they share the same visual styles.

Creating a strong visual identity is a goal that design teams should state when working on visual design. This is the personality of a digital product! The colors, typefaces, photos, illustrations, animations are all part of a brand, and they should be designed in a way that helps people remember the product. When an authentic design language is followed consistently, it creates recognizability for the brand.

Clarity

We put a strong focus on clarity — we wanted to make our GUI clean, not cluttered. By following a minimalist approach, we minimized the number of elements that users have on every screen and created a highly-focused experience.

A Way To Innovate

With so much competition in the phone market, companies invest significant resources to make people try their products. Companies invest in innovation and try to break new ground to attract users and peak their interest. Visual design is often the fastest and cheapest way for a product to innovate.

How Do We Create A Design Language?

For me and my teams, the process of creating a design language, we follow the same rubric we would create any complete consumer product: research-ideate-design-validate- implement. This is how we ensure that the language will work for our target audience.

Research

Often, the VDL is the most important, cornerstone product we create. And like every product you design, research should always be the first. When we started this Huawei project, it was important to understand the opportunities for our design. Jeshua Nanthakumar, a lead UX designer on this project, and his UX research team analyzed all mobile OS available on the market and identified the full range of challenges typically faced by users.

The UI Audit

As I’ve mentioned above, achieving consistency was one of the goals of creating a shared design language. It’s essential to standardize the visual design. That’s why even before starting work on a visual language, we decided to conduct a UI audit. Our goal was to understand the anatomy of the Android OS.

We broke down the whole mobile OS into atomic elements—colors, shapes, shadows, lines, transitions. By decomposing the design, our team was able to see how individual pieces work together and form a greater whole. At the end of UI audit, we had all the elements that make up the digital product (buttons, navigation bars, icons, etc.) grouped into distinct categories.

Understand How Users Perceive The Brand

When working on visual language, it’s essential to have a clear understanding of who you’re designing for and how they perceive your brand. Ideally, brand identity (the way the brand wants to be perceived by users) should match with the brand image (the way users actually perceive the brand). Designers have a direct impact on brand identity. Aesthetic styles, language & tone, iconography, and illustrations — all these are elements of brand identity.

Our goal was to create an innovative design language that feels customized for its audience. To understand how your users perceive the Huawei brand, our team invested in user research. We knew that design language should successfully meet the needs of both Eastern and Western design sensibilities, so we categorized large groups of users and created summaries based on the available information about our target groups. Every summary about our audience had the following information blocks — demographics, what they care about, and their expectations. Here is an example of the summary of the group of North American customers:

• Huawei’s core audience lives both Urban and Suburban environments;
• They are driven by business, social status, and personal organization;
• Age range 30-64;
• Average income: USD $75.000 per annum
• They care about:
  • Being organized and ordered
  • Efficiency and productivity to enable them to enjoy their own time
• Their expectations
  • Contributing to something bigger than themselves
  • Maximizing life and living for happiness

With the idea that design should match the audience’s lifestyle and be extremely refined, we evaluated every design decision in accordance with the needs of our target segments. This understanding will give you a reason for your visual direction.

Analyze Major Competitors

To identify strategic design opportunities, our team conducted the competitors’ analysis. We’ve identified four major competitors who had strong design languages and focussed on identifying their strengths and weaknesses. For example, when we evaluated Apple iOS, we’ve mentioned the following strengths of the language — scalable across devices, great focus on standardization, unique identity — and the following weakness — inconsistency with iconography, overuse of blur effects.

This analysis helped us to identify four major directions that brands followed when they create products:

1. Empathetic to me (design tailored for the needs of the target audience; design that demonstrates real empathy with the human and truly reflects the audience)
2. Novel design (design that uses innovative visual styles and interaction patterns)
3. Commonplace design (design that utilizes conservative style elements)
4. Standardized for all (heavy standardized design)

We put every brand on the plot with those four directions.

This process helped us to identify the opportunities for Huawei language:

• Scalable Design Language
  The language should scale across devices and across third-party developer apps as well.
• Unique Design DNA
  The language should be unique and distinct from the major competitors.
• Be Bold Yet Timeless
  The language should be long-lasting.

Define Requirements For Visual Hierarchy

When UX researchers analyzed typical user complaints, they found that the location of key interactive elements was one of the most common problems that many mobile users mentioned. In 2016 mobile screens become larger and larger, but the location of key functional elements in Android remained the same — the top area of the screen. As a result, users had to stretch their fingers or change their grip in order to interact with the elements.

Today a bottom-area navigation is an industry-standard, but back in 2016, the situation was a bit different. We’ve reached the Huawei engineering team with this insight and asked about the technical feasibility of moving controls to the bottom area of the screen — this area is more comfortable for user interaction. The engineering team confirmed that it was possible to move the elements, and we helped define the new default location for functional elements.

Ideation: Defining A Design Vision

Creating A Philosophy Of Design

Imagine that you need to design a language that will be integrated into products that will be used by people all over the world. The natural language we use in interpersonal communications cannot be separated from a culture because it has a close relation to the attitude or behavior of speakers of the languages. The digital language is absolutely the same — it should look natural for customers in the Americas, Europe, Asia, Africa, and Oceania.

The success of any visual design highly relates to how people perceive it. Many factors are influencing human perception, and the significant part goes to psychology. To create a sophisticated design, you need to consider the meaning of shapes and the impact which they have on users’ minds.

Creating a philosophy of design is extremely challenging, and you cannot do it alone. That’s why I worked with Abigail Brody, a former Apple creative director who joined Huawei in September 2015 as Chief UX design and VP of Huawei Devices. At Apple, Abigail was responsible for iOS design. She was the one who described the methodology of visual language to me.

Together we spend a lot of time trying to find the direction for visual design, and we’ve decided to use the philosophy of organic design as a foundation for our design language. Organic design is centered around using nature as the biggest inspiration.

According to this philosophy, design should help to achieve harmony between people and nature. When we worked on our visual language, we focused on incorporating natural forms (smooth curves and organic forms) in our visual design. As a result, all visual elements, such as buttons, icons, and shapes, had an organic design aesthetic.

Using Motion Design To Create A Distinct Visual Identity

There is no doubt about the importance of the role that motion plays in mobile design. For many product motion serves a purely-functional role—it provides feedback for user action and connects different states of the mobile app together. The well-crafted motion also makes things more attractive, and as we know, attractive things work better (the aesthetic-usability effect says that people are more tolerant of minor usability issues when they find an interface visually appealing).

Our team put high stakes on the motion. Our ultimate goal was to use motion to breathe life into our products — make the interface feel alive and dynamic. We wrote a motion design manifesto with solid design principles. Every animated effect and transition that we wanted to introduce in our design was measured in accordance with the functional and emotional benefits it delivers to end-users.

We know that early impressions of a product design are especially important. And for that very reason our key focus was on creating magical moments — surprise and delight users while they interact with the OS.

Design And Testing: Build, Test, Iterate

Baking Meaning Into Every Design Element/Design Decision

Just like we have rules for using words in sentences in a natural language, we should have rules for using visual elements in visual language. Strong semantics is what makes visual communication efficient.

When a team works on a visual language, it should take two rules into account:

• There are no random visual elements in a visual language. Every element serves a purpose.
• There should be no isolated units in visual language. Every unit in a visual language should be a part of a greater whole.

Experimentation And Design Review

It’s impossible to create a great design from the first attempt. Design is an iterative process, and whenever our team created a new visual solution, they evaluated it by comparing it with previous solutions. The comparison was visual—the screens were laid side by side on a board, so everyone could see the parts that require additional polishing. Team members gather together on informal design reviews where they discuss the pros and cons of individual solutions.

Pattern Libraries, Style Guides And Design Principles

Pattern libraries (reusable building blocks such as UI bars), style guides, and design principles (principles that allow developers to propagate design language in their own apps) are essential elements of design language. They are the foundation of the design system — a shared resource that teams use when they create interfaces. The fact that we’ve conducted a UI audit during the research phase helped us to categorize the visual design elements. We’ve established a toolbox for everyone who worked on the project. So, when a new member joins a team, all they need is the toolbox, and they are set to maintain consistency.

There are no random visual elements in a visual language. Every element serves a purpose.

“

Test Early, Test Often

The Huawei EMUI project was an extremely important project for the Huawei Corporation. It was essential to ensure that the language we’ve defined work for the users. And the only way to get this understanding is to test our design as soon as possible.

We’ve followed a simple but effective technique — build, measure, learn. By following this approach, the design team didn’t postpone the testing design until the release. We’ve incorporated visual language into functional prototypes and tested them both inside our group (dogfooding) and outside (with real users). The feedback collected during the testing allowed us to understand what worked/doesn’t work for users.

Implementation

If you have had a chance to use the Huawei EMUI 5 interface, you are probably thinking to yourself, “Um, that doesn’t look exactly like Gleb said!” And that’s true.

It is a sad reality that almost no design team is responsible for the implementation of this solution. Unfortunately, a lot of solutions we proposed to the engineering team weren’t implemented properly, or at all. As a result, the design language we’ve created and the design language the end-user saw in Huawei products end up as two different animals. But this is purely my opinion. In 2018, Huawei surpassed Apple in smartphone sales. The UI was a critical element to user confidence.

Based on my experience, the challenge of implementation is common for large-scale corporations. When designers who created the language aren’t invited into the process of implementing this language into the product, the final results will always be compromised. What usually happens is the engineering team follows a path of least resistance — they adjust the design solutions to the technical constraints they face when they start.

Every company needs a top-manager who cares about design and is ready to fight for it. It’s a well-known fact that when the original minimize animation in macOS that was proposed by the Apple motion design team, the engineering team said that it was impossible to implement that. At that time, Steve Jobs insisted that this animation is a must-have for MacOS. As a result, this animation became not only the most memorable transition for first-time users but also one of the things that contribute to good UX in MacOS.

A Robust Visual Design Language Is The Heart Of Good UX

Visual language can have a dramatic impact on user experience. It’s able not only to reduce friction by making UI more predictable but also to create delight. By pairing great form with excellent function, we will have an excellent user experience.

Visual language is a by-product of product design, and it requires a similar design process. It’s iterative and requires validation at every step along the way. When you build a visual language, you establish a new ecosystem for designers, and this ecosystem creates harmony between different teams involved in product development.

Further Reading

• The Principles Of Visual Communication
• Decision Trees For UI Components
• Inspired Design Decisions With Max Huber: Turning Mundane Subjects Into Exciting Visual Communication
• Recreating YouTube’s Ambient Mode Glow Effect

(cc, ra, il, mrn)

Consumers are motivated by need and desire. And sometimes, just sometimes, they’re motivated by FOMO. That’s right: we can now add the ‘Fear Of Missing Out’ to the list of drivers that get consumers onto our websites and into our apps.

With that said, when we take a closer look at what FOMO really means and the negative impact it can have on consumers, is it something we really want to be encouraging as we build digital experiences for them? My answer to that is:

"Yes, but you must use FOMO responsibly."

FOMO can be a really effective tool to add to a marketing and sales strategy. As a web designer, though, you need to find ethical ways to appeal to your users’ fear of missing out. Today, I’m going to show you some options for doing this.

A More Ethical Way To Design With FOMO

FOMO stands for “fear of missing out”, and while it might seem like some innocuous acronym like YOLO or LMAO, this isn’t a cute way of saying “Wish I were there!”.

The fear part of FOMO is all too real.

A 2013 study titled “Motivational, emotional, and behavioral correlates of fear of missing out” defined FOMO as:

"A pervasive apprehension that others might be having rewarding experiences from which one is absent, FoMO is characterized by the desire to stay continually connected with what others are doing."

One of the conclusions from the report was that “FoMO was associated with lower need satisfaction, mood, and life satisfaction.”

It’s not just scientists taking note of the negative effects of FOMO in marketing, social media or otherwise. The Competition and Markets Authority went after hotel booking sites for using misleadingly urgent and deceptive discount marketing messages to increase sales.

Even without the fear of retribution from some standards authority, you really need to think about how your web and mobile apps leave your users feeling. A little bit of envy might be fine, but once the general sentiment trickles over to jealousy, disappointment or stress, it’s time to reassess what you’re doing and why.

Let’s take a look at some ways you can leverage the underlying concept of “missing out” and strip away the fear elements.

Quick note: All of the examples below are from mobile apps, however, you can use these design principles on websites and PWAs as well.

Gently Remind Visitors About Limited Availability

There’s nothing wrong with presenting limits to your users on what’s available or for how long it will remain available. It only becomes a problem when how you convey this sense of urgency or limitation causes stressful decision-making.

This is something I talked about in a recent post, “How to Stop Analysis Paralysis with Web Design”.

Basically, when you induce stress in your visitors or consumers, it makes the decision-making process more difficult and can lead to regretful purchases or no purchases at all. In that last article, the focus was on the drawbacks of presenting customers with too many choices.

However, the same kind of response (i.e. dissatisfaction and overwhelm) can happen when you put pressure on them to make a choice on the spot.

So, instead of displaying a large timer counting down the minutes left to buy items in their shopping cart or a bright red banner that screams “24-Hour Sale!”, use more gentle reminders around the site or app.

Best Buy has an entire section on its product pages dedicated to in-store and online availability:

Now, if this were a product with only one color or memory option, I’d suggest removing it from the online inventory altogether. If you can’t provide a date when the product will become available again or put customers on a waitlist, don’t bother teasing them with an out-of-stock listing.

That said, this item has multiple variations, which makes the “sold out” notice quite potent.

Paul Messinger, a professor of business and researcher at the University of Alberta, commented on this phenomenon:

"Sold-out products create a sense of immediacy for customers; they feel that if one product is gone, the next item could also sell out. Our research shows there's also an information cascade, where people infer that if a product is sold out, it must have been good and therefore a similar available product will also be desirable."

What’s also nice about displaying sold-out products is that it reduces the number of choices consumers have to make. Granted, some may be unhappy because the silver phone they wanted is unavailable, but, as Messinger says, this limitation on what they can buy might encourage them to try another variation of the product.

One of my absolute favorite examples of gently nudging consumers to use or buy your products is Hulu:

There is an entire tab in the app that lets users know which content is about to expire.

For those of you who stream content like a maniac (like myself), you know how easy it is to lose track of shows and movies you’ve added to your list. You also know how hard it can be to find the perfect thing to watch when you have dozens of options sitting in your queue, especially if you use more than one streaming service.

That’s why this “Expiring” tab is brilliant. The second I see it, I think, “Either use it or lose it, Suzanne” — which is incredibly motivating. Also, the fact that I have a much shorter list to work with helps me get to a decision more quickly.

This would be useful for e-commerce websites, for sure. If you have products that are low in inventory, give them a dedicated space for shoppers to peruse — kind of like a bargain bin without the bargain.

If your website runs a number of offers simultaneously, you could use a similar approach as well. Create a page for “Offers” or “Rewards” and break out a separate tab that shows users all the offers that are about to expire.

Call Attention To Rewards

When selling something online — be it a subscription to a repository of plugins or a store full of products — don’t forget to enable account registration. Sure, it’s a nice touch for users that want the convenience of saving account details so they don’t have to input them with each new purchase. There’s another reason to encourage your users to register though:

So you have a way to call attention to their spendable rewards.

FOMO isn’t always the fear of missing out on what others are doing. Sometimes it’s just a fear of missing the chance to get a really good deal. Promoting attractive sales offers (“75% off everything in store!”) is one way to do that, but, again, you have to recognize that that’s only going to stir up issues caused by the paradox of choice.

A softer but still effective way to compel users to buy sooner rather than later is to show off their rewards totals or expiration dates.

As a Gap customer, this is one of my favorite things about shopping with them. Whether I’m in store, on the app, shopping through the website or looking through my email, I receive these kinds of reminders:

The “Redeem your Super Cash” reminder is the first thing I see when I log in. Even if I’ve gone to the app with the intention of just window browsing, that rewards reminder (and the impending expiration) almost always motivates me to buy something so I don’t lose my member perks.

Unlike sales banners that promote generic offers, this approach works really well because you’re appealing to loyal customers — the ones who’ve already signed up for an account and have a history of buying from you.

And if you’re worried about a banner of that size taking up too much space in your app or mobile website, think again:

Gap doesn’t continually show the rewards reminder.

See the icon in the top left corner with the circle over it? That circle is pulsing. It’s there to let customers know that there’s something to look at before they check out. And that something are the rewards they need to spend before they lose them.

Hotels.com, on the other hand, dedicates an entire page to rewards:

It’s similar to that urge people feel to log into social media just to check on what’s going on and to make sure they’re not missing anything. This “Rewards” tab should send a similar vibe: “Hmmm… I wonder how close I am to my free night?”

Although you can’t see it here, Hotels.com has a policy about how long customers can hold onto these earned nights before they lose them. (It’s just below this section.) By gently reminding users about this stipulation, it likely encourages its rewards members to book more trips so they can get their free night.

Encourage Sharing With Friends And Family

One of the problems with building FOMO into a website — much like any marketing you do for business — is that it’s coming from you. Until you’ve earned the trust of visitors and users, how are they supposed to believe a product marked as a “Top Seller” really is what you claim it to be? Social proof is supposed to help mitigate these kinds of concerns, but even that can be faked.

You know what I think is a more effective way to generate FOMO? Let your customers and clients do it for you.

Here’s how Airbnb does it:

The “Invite friends” feature encourages users to let their friends, family and colleagues know about how awesome the Airbnb experience is.

"Hey, I just booked this awesome apartment in Montreal for Christmas. You’ve got to check this out! Oh yeah, you also get $40 off your first booking!"

Even the headline on the landing page encourages them to share the experience; not just do it to get free travel credit (though that’s a nice incentive, too):

Imagine that friend who’s busy running a business and in dire need of a vacation. They receive this offer from you — a person they know and trust. Of course, their reaction is going to be, “I need to do that, too!” And with a discount code in hand, that’s a pretty strong source of motivation to get in the app and make a purchase.

You’ll find another great example of generating FOMO through your users from the 23andMe website:

For those of you who haven’t signed up for one of these genetic testing services, it’s actually pretty cool. You submit a saliva sample and they tell you what your ancestral background is (as well as how it can affect your health). But it’s more than just, “Your maternal family originates from Turkey.” It gets super-specific on what parts of the world your ancestors are from.

Notice that banner in the screenshot above that says “Share your Ancestry”? That’s where users find auto-generated social posts that are designed to be share-worthy (they look like Facebook and Instagram Story cards):

This is my ancestral breakdown according to 23andMe. So, let’s say I want to joke about how boringly anti-nomadic my ancestors were on Twitter. I could edit the banner or share it as is. And guess what? That’s free advertising for 23andMe, even if I chose to ditch the logo they placed at the bottom of the file.

As those posts reach social media connections — those that know the user or those that are only acquainted with them online — FOMO starts to rear its head. “Oooh! I really want one of these! Where’d you find this out?”

With this kind of FOMO marketing on your site or app, you can stop relying so much on heavily-discounted sales events and other urgency-inducing tactics (which will cost you more in the long run). Instead, let your users generate that intensified interest.

Use More Grounded Photos And Designs

You’ve no doubt heard about lifestyle influencers using shady promotional tactics to increase sales.

One of the most well-known examples of this is the Fyre Festival, which created a bunch of buzz on social media thanks to promotional videos of celebrities and supermodels partying it up in the Caribbean. The people behind this failed festival didn’t care about the experience. They focused solely on the image of it and consumers ate it up with a spoon — until they realized that image was a lie once they got there.

Then, you have micro-influencers who try to make money from affiliate sales. However, all is usually not what it seems as Jordan Bunker explained to The Guardian:

"All isn’t how it is perceived on Instagram. People assume I have a great life and everything is handed to me. I live with my parents and I work from a desk in my room; it’s not like I have a separate working space or office."

That’s not the only deception. Influencers often make their luxurious lives seem like something that’s easy to achieve. The reality, however, is that many of them have to work really hard to stage their life, every second of every day, hoping to get the perfect shot that will make consumers want to follow them or buy the stuff they promote.

But as Lucie Greene, an analyst who specializes in consumer behavior, pointed out:

"We’re seeing a rising awareness of how social media use and influencer culture affects mental health, from Fomo (Fear of Missing Out) to driving compulsive, addictive consumption, to feelings of isolation."

Granted, the messages alone that influencers send to followers are often problematic. But so, too, are the images. So, as you design your website and integrate photos from your clients or from stock photo sites, think about what message you’re really sending.

Sephora, for instance, promotes its products with photos of the actual products. You might see a model or two on the top of the home page. For the most part, though, the focus is on the products.

That said, cosmetics and other beauty products can be used to convey a certain image and lifestyle — one that consumers desperately want. So, is Sephora missing out on an opportunity to create a “Sephora Lifestyle” by not photographing models using its products?

Unlike many other retailers who might share photos of models living their lives in some far-off, exotic locale while wearing their products, Sephora doesn’t do that. The only time you really see photos of its cosmetics and products in action is here, in its “Inspire” community.

So, rather than leave its customers pining for some life that they may unconsciously associate with the red lipstick they were thinking of picking up, real customers get the chance to paint a more realistic portrait of its products.

As consumers grow weary of artificially enhanced photos and scenarios, you’re going to find it harder to make them feel like they’re missing out. However, by allowing your customers to provide a real look at what your products can do (and this goes for any kind of product, physical or digital), that’s where you’ll start to see consumers responding to feelings of missing out.

Before I wrap up here, I want to point out that this isn’t just for companies that sell affordable products.

The Inner Circle, for example, is an exclusive dating app. In order to join, users must first be prescreened and approved.

Now, you might think that a luxury brand like that would want to use influencer-like photos to show users how much they’re missing out by not dating in their “class”. But they don’t.

In this first example from the app’s signup page, you can see that the focus is on finding a popular spot to hang out and meet people. While the black-and-white filter does give it a swankier vibe, there’s nothing about the people in the photo that necessarily screams “Exclusive!”

The same thing goes for this photo:

This is the kind of date most people would go on: a date in the park. The people in the photo aren’t all glammed up or wearing clothes made by high-end luxury designers.

These photos feel accessible. They let users know that, at the end of the day, they’re using this app to make real-life connections. There’s nothing exclusive about that.

And if a luxury brand like The Inner Circle can send that kind of message to its users with photos, then any brand should be able to do the same and be successful with it. Just be honest in what you’re portraying, whether it’s a photo of someone cooking with your products or a look inside the real (not illustrated) dashboard of your SaaS.

If you want to give prospects the feeling that they’re about to miss out on something worthwhile, just be real with them.

Wrapping Up

Maybe not today and maybe not tomorrow, but deceptive FOMO tactics will eventually catch up with you when customers start to realize they were misled by inflated numbers, exaggerated scenarios or seemingly time-sensitive or exclusive offers.

Remember: the websites and apps you build for clients shouldn’t just attract and convert customers. They also need to help your clients retain that business and loyalty over the long term. By being more responsible with the messages you’re sending, you can help them accomplish that.

Further Reading

• How To Improve Your Microcopy: UX Writing Tips For Non-UX Writers
• Meet Hydrogen: A React Framework For Dynamic, Contextual And Personalized E-Commerce
• Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study)
• Using AI For Neurodiversity And Building Inclusive Tools

(ra, yk, il, mrn)

Have you heard of the French artist Marcel Duchamp? One of his most famous works is the “fountain” which was created from an ordinary bathroom urinal. In simply renaming this common object, Duchamp successfully birthed a completely new style of art.

The same can be done with AI. Why do humans only have to use this powerful invention to solve business-related issues? Why can’t we think a little more like Duchamp and use this ‘all-powerful’ technology to solve one of the scariest problems that mankind has ever faced?

The Global Threat Of Climate Change

If you’ve read any recent reports and predictions about the future of our climate, you’ve probably realized that mankind is running out of time to find a solution for the global threat of climate change. In fact, a recent Australian policy paper proposed a 2050 scenario where, well, we all die.

To those who aren’t scared of water levels rising 25 meters by 2050, there have been other studies that suggest human hardships are right around the corner. In March of 2012, the World Water Assessment Programme predicted that by 2025, 1.8 billion people on earth will be living in regions with absolute water scarcity.

So what data and research is leading scientists to believe there will be a water or food apocalypse scenario in the future?

According to NASA, the main cause of climate change is the rising amount of greenhouse gases in our atmosphere. And sadly, ‘mother earth’ is not doing this all by herself.

In 1830, humans began engaging in activities that released greenhouse gases, contributing to the rising temperatures that we are feeling today. Some of these activities I refer to include the burning of fossil fuels, the pollution of oceans, and deforestation. However, even the mass production of beef is contributing to climate change.

Now, you may be wondering how humans could combat and limit our greenhouse gas emissions. Obviously, we should be limiting all of the activities that I alluded to above. This would mean limiting our electricity, coal, and oil usage, planting trees, and sadly for many, giving up steak dinners altogether.

But would all of this be enough to undo centuries of atmospheric pollution? Is all of this even accomplishable before humans are forced to face the extinction of their species? I don’t know. Humans haven’t even been able to cease the production of beef, let alone our daily oil-guzzling automobiles and airplanes.

If only there was a very intelligent software that could run some emissions numbers, and tell us if all of these efforts would be enough to prevent future disaster scenarios...

AI Approaches And Environmental Use Cases

Solving any problem takes time. With climate change, it took scientists about 40 years to to gain any sort of understanding of the problem. And that’s fair — humans had to first study the climate to make sure climate change existed, then study the causes of climate change to see the role humans have played. But where are we today after all of this study? Still studying.

And the problem with climate change is that time is not on our side — mankind has to find and implement some solutions relatively fast. That’s where AI could help.

To date, there are two different approaches to AI: rules-based and learning-based. Both AI approaches have valid use cases when it comes to studying the environment and solving climate change.

Rules-based AI are coded algorithms of if-then statementsthat are basically meant to solve simple problems. When it comes to the climate, a rules-based AI could be useful in helping scientists crunch numbers or compile data, saving humans a lot of time in manual labor.

But a rules-based AI can only do so much. It has no memory capabilities — it’s focused on providing a solution to a problem that’s defined by a human. That’s why learning-based AI was created.

Learning-based AI is more advanced than rules-based AI because it diagnoses problems by interacting with the problem. Basically, learning-based AI has the capacity for memory, whereas rules-based AI does not.

Here’s an example: let’s say you asked a rules-based AI for a shirt. That AI would find you a shirt in the right size and color, but only if you told it your size and preferences. If you asked a learning AI for a shirt, it would assess all of the previous shirt purchases you’ve made over the past year, then find you the perfect shirt for the current season. See the difference?

When it comes to helping solve climate change, a learning-based AI could essentially do more than just crunch CO2 emission numbers. A learning-based AI could actually record those numbers, study causes and solutions, and then recommend the best solution — in theory.

AI Impacting Climate Change, Today

To most, AI is buzz word used to describe interesting tech software. But to the companies below, AI is starting to be seen as a secret weapon.

SilviaTerra

Forests are important for our climate. The carbon dioxide that’s emitted by many human activities is actually absorbed by trees. So if we just had more trees.

This is why SilviaTerra was brought to life.

Powered by the funds and technology of Microsoft, SilviaTerra uses AI and satellite imaging to predict the sizes, species, and health of forest trees. Why is this important? It means that conservationists are saved countless hours of manual fieldwork. It also means that we can help trees grow bigger, stronger, and healthier, so they can continue to help our climate.

DeepMind

Sometimes, we may ask ourselves, “What can’t Google do?” Well, it turns out Google can’t really do everything.

Looking to improve their costs (and potentially their carbon footprint), Google turned to a company called DeepMind. Together, the two companies developed an AI that would teach itself how to use only the bare minimum amount of energy necessary to cool Google’s data centers.

The result? Google was able to cut the amount of energy they use to cool their data centers by 35%. But that may not even be the coolest part! DeepMind’s co-founder, Mustafa Suleyman, said that their AI algorithms are general enough to where the two companies may be able to use them for other energy-saving applications in the future.

Green Horizon Project

All of you data-lovers out there know that it’s hard to say you’re impacting something if you’re unable to measure your impact. This is why the Green Horizon Project came about.

IBM’s Green Horizon Project is an AI that creates self-configuring weather and pollution forecasts. IBM created the project with the hope that they could help cities become more efficient, one day.

Their aspirations became a reality in China. Between 2012 and 2017, IBM’s Green Horizon Project helped the city of Beijing decrease their average smog levels by 35%.

CycleGANs

So here’s a term you may never heard of in your life: “GAN.” It stands for Generative Adversarial Network. Basically, it’s a network that generates statistics or information without you having to do anything.

Why is the term important? Because automation is important when you have limited time and resources to solve a problem.

Intellectuals of Cornell University used GANs to create an AI to train itself to produce images that portray geographical locations before and after extreme weather events. The visuals produced by this AI could help scientists predict the impacts of certain climate changes, helping humans prioritize our combative efforts.

Software With The Potential To Impact Climate Change

In studying the number of AI that is already being used to have a positive impact on climate change, you may be thinking that we don’t need any more new software. And maybe you’re not wrong — why don’t we repurpose the software we do have?

With that being said, here are a few software with the potential to be secret weapons:

Airlitix

Airlitix is an AI and machine-learning software that is currently being used in drones. While it was originally developed to automate greenhouse management processes, it could quite easily be used to manage the health of national forests. Airlitix has the capacity to not only collect temperature, humidity, and carbon dioxide data, but the AI can also analyze soil and crop health.

But with humans needing to plant over 1.2 trillion trees to combat climate change, we should consider automating our efforts further. Instead of taking the time to tend to national parks, the Airlitix software could be built upon so that drones could plant our trees, release plant nutrients, or even deter forest arsonists.

Google Ads

Both Google and Facebook have very powerful AI software that they currently use to create relevant consumer ads using consumer browsing data. In fact, Google’s AI ‘Google Ads’ has helped their company earn hundreds of billions in revenue.

While revenue is cool, the Google Ads algorithm currently promotes consumer purchases relatively objectively. Imagine if the AI could be rewritten to prioritize the ads of companies that are offering sustainable products and services.

Nowadays, there isn’t much competition for Google. There’s Bing, Yahoo, DuckDuckGo, and AOL. (Out of the people I know, I don’t know any that use AOL.) If you’re feeling fearless, maybe you could develop a new search engine that helps connect consumers with environmentally-friendly companies.

Sure, it would be hard to compete with companies as large as Google, but you don’t have to compete forever to make a profit. There’s always a chance your startup gets acquired, and then you ride off into the sunset.

AlphaGo

While AlphaGo is an AI software that could help scientists find the next ‘wonder drug,’ it was originally created by DeepMind to teach itself how to master the game of chess. After beating the world’s best chess players, the AlphaGo AI has since moved on to conquer the strategy of more complex board games.

But what do board games have to do with climate change? Well, if the AlphaGo AI can outsmart humans in a game of chess, maybe it can outsmart us in coming up with creative ways to limit and reduce the number of greenhouse gases in our atmosphere.

Future Outlook For AI And Climate

As I see it, the purpose of AI is to assist mankind in solving problems. Climate change has proven to be a complex problem that humans are becoming great at studying, but I have yet to see a very positive future-outlook from environmentalists in the news.

If not to help humans influence climate change directly, couldn’t we use AI to portray doomsday scenarios that scare the world into coming together? Could we use AI to portray positive potential outlooks that would be possible if people were to do more in their daily lives to help triage climate issues?

Even with the latest Amazon fires, I didn’t see any tweets about the idea of using drones to combat the spread of flames. It’s clear to me that even with all of the impressive AI software and tech available to humans today, environmental use cases are still not widespread knowledge.

So my advice to readers is to try the ‘Duchamp approach’ — today. Consider the AI and tech that you use or develop regularly, and see if there’s a way to reimagine it. Who knows, you may be the one to solve a problem that has stumped some of the best climatologists and scientists of our time.

Further Reading

• So Your Website Or App Is Live… Now What?
• 2-Page Login Pattern, And How To Fix It
• The Scent Of UX: The Unrealized Potential Of Olfactory Design
• Presenting UX Research And Design To Stakeholders: The Power Of Persuasion

(cc, yk, il, mrn)