Accessibility is key in modern web design. A site that doesn’t consider how its user experience may differ for various audiences — especially those with disabilities — will fail to engage and serve everyone equally. One of the best ways to prevent this is to approach your site from a bottom-up perspective.

Understanding Bottom-Up Design

Conventional, top-down design approaches start with the big picture before breaking these goals and concepts into smaller details. Bottom-up philosophies, by contrast, consider the minute details first, eventually achieving the broader goal piece by piece.

This alternative way of thinking is important for accessibility in general because it reflects how neurodivergent people commonly think. While non-autistic people tend to think from a top-down perspective, those with autism often employ a bottom-up way of thinking.

Of course, there is considerable variation, and researchers have identified at least three specialist thinking types within the autism spectrum:

• Visual thinkers who think in images;
• Pattern thinkers who think of concepts in terms of patterns and relationships;
• Verbal thinkers who think only in word detail.

Still, research shows that people with autism and ADHD show a bias toward bottom-up thinking rather than the top-down approach you often see in neurotypical users. Consequently, a top-down strategy means you may miss details your audience may notice, and your site may not feel easily usable for all users.

As a real-world example, consider the task of writing an essay. Many students are instructed to start an essay assignment by thinking about the main point they want to convey and then create an outline with points that support the main argument. This is top-down thinking — starting with the big picture of the topic and then gradually breaking down the topic into points and then later into words that articulate these points.

In contrast, someone who uses a bottom-up thinking approach might start an essay with no outline but rather just by freely jotting down every idea that comes to mind as it comes to mind — perhaps starting with one particular idea or example that the writer finds interesting and wants to explore further and branching off from there. Then, once all the ideas have been written out, the writer goes back to group related ideas together and arrange them into a logical outline. This writer starts with the small details of the essay and then works these details into the big picture of the final form.

In web design, in particular, a bottom-up approach means starting with the specifics of the user experience instead of the desired effect. You may determine a readable layout for a single blog post, then ask how that page relates to others and slowly build on these decisions until you have several well-organized website categories.

You may even get more granular. Say you start your site design by placing a menu at the bottom of a mobile site to make it easier to tap with one hand, improving ease of use. Then, you build a drop-down menu around that choice — placing the most popular or needed options at the bottom instead of the top for easy tapping. From there, you may have to rethink larger-scale layouts to work around those interactive elements being lower on the screen, slowly addressing larger categories until you have a finished site design.

In either case, the idea of bottom-up design is to begin with the most specific problems someone might have. You then address them in sequence instead of determining the big picture first.

Benefits Of A Bottom-Up Approach For Accessible Design

While neither bottom-up nor top-down approaches dominate the industry, some web engineers prefer the bottom-up approach due to the various accessibility benefits this process provides. This strategy has several accessibility benefits.

Putting User Needs First

The biggest benefit of bottom-up methods is that they prioritize the user’s needs.

Top-down approaches seem organized, but they often result in a site that reflects the designer’s choices and beliefs more than it serves your audience.

“

Consider some of the complaints that social media users have made over the years related to usability and accessibility for the everyday user. For example, many users complain that their Facebook feed will randomly refresh as they scroll for the sake of providing users with the most up-to-date content. However, the feature makes it virtually impossible to get back to a post a user viewed that they didn’t think to save. Likewise, TikTok’s watch history feature has come and gone over the years and still today is difficult for many users to find without viewing an outside tutorial on the subject.

This is a common problem: 95.9% of the largest one million homepages have Web Content Accessibility Guidelines (WCAG) errors. While a bottom-up alternative doesn’t mean you won’t make any mistakes, it may make them less likely, as bottom-up thinking often improves your awareness of new stimuli so you can catch things you’d otherwise overlook. It’s easier to meet user’s needs when you build your entire site around their experience instead of looking at UX as an afterthought.

Consider this example from Berkshire Hathaway, a multi-billion-dollar holding company. The overall design philosophy is understandable: It’s simple and direct, choosing to focus on information instead of fancy aesthetics that may not suit the company image. However, you could argue it loses itself in this big picture.

While it is simple, the lack of menus or color contrast and the small font make it harder to read and a little overwhelming. This confusion can counteract any accessibility benefits of its simplicity.

Alternatively, even a simple website redesign could include intuitive menus, additional contrast, and accessible font for easy navigation across the site.

The homepage for U.K. charity Scope offers a better example of web design centered around users’ needs. Concise, clear menus line the top of the page to aid quicker, easier navigation. The color scheme is simple enough to avoid confusion but provides enough contrast to make everything easy to read — something the sans-serif font further helps.

Ensuring Accessibility From The Start

A top-down method also makes catering to a diverse audience difficult because you may need to shoehorn features into an existing design.

For example, say, a local government agency creates a website focused on providing information and services to a general audience of residents. The site originally featured high-resolution images, bright colors, and interactive charts.

However, they realize the images are not accessible to people navigating the site with screen readers, while multiple layers of submenus are difficult for keyboard-only users. Further, the bright colors make it hard for visually impaired users to read the site’s information.

The agency, realizing these accessibility concerns, adds captions to each image. However, the captions disrupt the originally intended visual aesthetics and user flow. Further, adjusting the bright colors would involve completely rethinking the site’s entire color palette. If these considerations had been made before the site was built, the site build could have specifically accommodated these elements while still creating an aesthetically pleasing and user-friendly result.

Alternatively, a site initially built with high contrast, a calm color scheme, clear typography, simple menus, and reduced imagery would make this site much more accessible to a wide user base from the get-go.

As a real-world example, consider the Awwwards website. There are plenty of menus to condense information and ease navigation without overloading the screen — a solid accessibility choice. However, there does not seem to be consistent thought in these menus’ placement or organization.

There are far too many menus; some are at the top while others are at the bottom, and a scrolling top bar adds further distractions. It seems like Awwwards may have added additional menus as an afterthought to improve navigation. This leads to inconsistencies and crowding because they did not begin with this thought.

In contrast,

Bottom-up alternatives address usability issues from the beginning, which results in a more functional, accessible website.

“

Redesigning a system to address a usability issue it didn’t originally make room for is challenging. It can lead to errors like broken links and other unintended consequences that may hinder access for other visitors. Some sites have even claimed to lose 90% of their traffic after a redesign. While bottom-up approaches won’t eliminate those possibilities, they make them less likely by centering everything around usage from the start.

The website for the Vasa Museum in Stockholm, Sweden, showcases a more cohesive approach to ensuring accessibility. Like Awwwards, it uses menus to aid navigation and organization, but there seems to be more forethought into these features. All menus are at the top, and there are fewer of them, resulting in less clutter and a faster way to find what you’re looking for. The overall design complements this by keeping things simple and neat so that the menus stand out.

Increasing Awareness

Similarly, bottom-up design ensures you don’t miss as many accessibility concerns. When you start at the top, before determining what details fit within it, you may not consider all the factors that influence it. Beginning with the specifics instead makes it easier to spot and address problems you would’ve missed otherwise.

This awareness is particularly important for serving a diverse population. An estimated 16% of the global population — 1.6 billion people — have a significant disability. That means there’s a huge range of varying needs to account for, but most people lack firsthand experience living with these conditions. Consequently, it’s easy to miss things impacting others’ UX. You can overcome that knowledge gap by asking how everyone can use your site first.

Bottom-Up vs. Top-Down: Which Is Best for You?

As these benefits show, a bottom-up design philosophy can be helpful when building an accessible site. Still, top-down methods can be advantageous at times, too. Which is best depends on your situation.

Top-down approaches are a good way to ensure a consistent brand image, as you start with the overall idea and base future decisions on this concept. It also makes it easier to create a design hierarchy to facilitate decision-making within your team. When anyone has a question, they can turn to whoever is above them or refer to the broader goals. Such organization can also mean faster design processes.

Bottom-up methods, by contrast, are better when accessibility for a diverse audience is your main concern. It may be harder to keep everyone on the same overall design philosophy page, but it usually produces a more functional website. You can catch and solve problems early and pay great attention to detail. However, this can mean longer design cycles, which can incur extra costs.

It may come down to what your team is most comfortable with. People think and work differently, with some preferring a top-down approach while others find bottom-up more natural. Combining the two — starting with a top-down model before tackling updates from a bottom-up perspective — can be beneficial, too.

Strategies For Implementing A Bottom-Up Design Model

Should you decide a bottom-up design method is best for your goals, here are some ways you can embrace this philosophy.

Talk To Your Existing User Base

One of the most important factors in bottom-up web design is to center everything around your users. As a result, your existing user base — whether from a separate part of your business or another site you run — is the perfect place to start.

Survey customers and web visitors about their experience on your sites and others. Ask what pain points they have and what features they’d appreciate. Any commonalities between responses deserve attention. You can also turn to WCAG standards for inspiration on accessible functionality, but first-hand user feedback should form the core of your mission.

Look To Past Projects For Accessibility Gaps

Past sites and business projects can also reveal what specifics you should start with. Look for any accessibility gaps by combing through old customer feedback and update histories and using these sites yourself to find issues. Take note of any barriers or usability concerns to address in your next website.

Remember to document everything you find as you go. Up to 90% of organizations’ data is unstructured, making it difficult to analyze later. Reversing that trend by organizing your findings and recording your accessible design process will streamline future accessibility optimization efforts.

Divide Tasks But Communicate Often

Keep in mind that a bottom-up strategy can be time-consuming. One of the reasons why top-down alternatives are popular is because they’re efficient. You can overcome this gap by splitting tasks between smaller teams. However, these groups must communicate frequently to ensure separate design considerations work as a cohesive whole.

A DevOps approach is helpful here. DevOps has helped 49% of its adopters achieve a faster time to market, and 61% report higher-quality deliverables. It also includes space for both detailed work and team-wide meetings to keep everyone on track. Such benefits ensure you can remain productive in a bottom-up strategy.

Accessible Websites Need A Bottom-Up Design Approach

You can’t overstate the importance of accessible website design. By the same token, bottom-up philosophies are crucial in modern site-building. A detail-oriented approach makes it easier to serve a more diverse audience along several fronts. Making the most of this opportunity will both extend your reach to new niches and make the web a more equitable place.

The Web Accessibility Initiative’s WCAG standards are a good place to start. While these guidelines don’t necessarily describe how to apply a bottom-up approach, they do outline critical user needs and accessibility concerns your design should consider. The site also offers a free and comprehensive Digital Accessibility Foundations course for designers and developers.

Familiarizing yourself with these standards and best practices will make it easier to understand your audience before you begin designing your site. You can then build a more accessible platform from the ground up.

Additionally, the following are some valuable related reads that can act as inspiration in accessibility-centered and user-centric design.

• Inclusive Design for a Digital World: Designing with Accessibility in Mind by Regine M. Gilbert
• Practical Web Inclusion and Accessibility: A Comprehensive Guide to Access Needs by Ashley Firth
• Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability by Steve Krug

By employing bottom-up thinking as well as resources like these in your design approach, you can create websites that not only meet current accessibility standards but actively encourage site use among users of all backgrounds and abilities.

Further Reading On SmashingMag

• “Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size,” Eric Bailey
• “How To Make A Strong Case For Accessibility,” Vitaly Friedman
• “A Guide To Accessible Form Validation,” Sandrina Pereira
• “Creating A High-Contrast Design System With CSS Custom Properties,” Brecht De Ruyte

(yk)

I place myself firmly in the category of being an introvert when it comes to my role as a UX researcher. I love the process of planning and executing research. I have never felt a need to be the loudest or most talkative person in a meeting. I contribute after I have developed something worth saying (or have a really bad joke worked up).

I also love interviews and usability testing, where I interact with users and engage in meaningful conversation. And then I am exhausted. I love speaking about the findings of research and sharing the spotlight with my colleagues during a presentation, and then I want to go to bed underneath the conference room table. I facilitate workshops with ease but have trouble mustering up the energy required to attend what often feels like mandatory post-workshop socializing.

In truth, I have sometimes felt introverted tendencies set me back at work, particularly as a consultant who needs to build relationships to keep the work flowing (in theory). An example would be getting called out by a manager in my junior days for not engaging in as many networking activities as I could have been with some of our clients. My defense of feeling overstimulated, overwhelmed, and uninterested in socializing fell on deaf ears.

I think we have grown in our understanding of introverts and what they need to be high performers, particularly since Susan Cain’s 2013 best-selling book Quiet: The Power of Introverts in a World That Can’t Stop Talking was released.

This article aims to celebrate the power of introversion in UX research and design. We’ll debunk common misconceptions, explore the unique strengths introverted researchers and designers bring to the table, and offer practical tips for thriving in a field that sometimes seems tailored for extroverts. My goal is to build on some of the work on UX and introversion that already exists. I’ve cited other articles where appropriate and shared the resources I’ve found on UX and introversion at the end of this article.

Introversion is not the same thing as being shy, just as extroversion isn’t the same thing as being brash. For simplicity and the sake of this article, I am going to use the following definitions provided by de Jongh & de la Croix:

“Extroverts get energy from interaction with others and like to share ideas with others to help develop their thinking, whereas introverts need to recharge on their own after much social contact and prefer to share ideas only when they are fully formed.”

There are many potential reasons one could have introvert or extrovert tendencies (McCulloch 2020), and these come on a scale where one might lean or introvert or extrovert depending on the occasion. Those who straddle the middle ground of introversion and extroversion are considered ambiverts.

As Jonathan Walter notes in a series of articles on introverts and UX, many UX professionals find themselves drawn to the field because of their introverted nature. Introversion, often misunderstood as shyness or social awkwardness, is simply a preference for internal reflection and processing. It’s about drawing energy from solitude and finding fulfillment in deep thought and meaningful connections.

As UX is clearly a space where introverts are drawn, there is already a decent amount of literature aimed at introverted UX practitioners. In writing this article, I wanted to differentiate from what is already out there, as well as extend.

I wanted to include some personal stories of introverts who aren’t myself and work in UX. To do this, I went to LinkedIn and asked people to send me personal anecdotes. My post, at least by my standards, was well received, with over 100 reactions and a dozen people sending me direct messages sharing anecdotes. I was even introduced to Tim Yeo, who has recently released a book on introverts in the workplace. I’ll be sharing some of the stories people shared with me over LinkedIn, where appropriate (and with their permission), throughout this article to help draw the connections to real life.

First, let’s talk a little about what we know about measuring if you (or others) are introverted, extroverted, or in between.

Measuring Introversion & Extroversion: Self-Assessment Tools

Understanding where you and your team members fall on the introversion-extroversion spectrum can be invaluable for tailoring your approach to work, collaboration, and personal development. Reinoud de Jongh and Anne de la Croix, two medical school professors, write that medical educators should know where they fall on the introversion — extroversion spectrum to deliver great teaching experiences. I’d extend this to UX practitioners, including UX managers, UX researchers, and designers. If we collaborate with others, we will benefit from knowing where we fall on this scale.

While there’s no single definitive test, here are a few simple and accessible tools that can offer insights:

1. Online Quizzes: Numerous online quizzes and assessments are available, often based on established personality frameworks like the Myers-Briggs Type Indicator (MBTI) or the Big Five personality traits. These quizzes can provide a general sense of your tendencies and preferences. Popular options include:
   • 16Personalities: Offers a free, comprehensive assessment based on the MBTI.
   • Truity: Provides a variety of personality tests, including the Big Five and Enneagram.
   • Verywell Mind: Offers a quiz specifically focused on introversion and extroversion.
2. Reflection and Journaling: Take some time to reflect on your daily experiences and interactions. Ask yourself the following questions:
   • What activities energize me vs. drain me?
   • Do I prefer to work alone or in groups?
   • How do I recharge after a long day?
   • Do I prefer deep conversations with a few people or socializing with a larger group?
3. Observation: Pay attention to your behavior and reactions in different social settings. Notice what triggers your stress response and what environments make you feel most comfortable and productive.
4. Professional Assessment: If you’re seeking a more in-depth analysis, consider consulting a career coach or psychologist who specializes in personality assessment. They can administer standardized tests and provide personalized feedback and guidance.
   • Multidimensional Introversion-Extroversion Scales (MIES): This scale specifically focuses on the multifaceted nature of introversion and extroversion. It measures several sub-traits associated with each dimension, such as social engagement, assertiveness, enjoyment of social interaction, and preference for solitude. Professional psychologists often reference this test, which can be accessed freely here, but might be best done with the guidance of a professional.

There’s no right or wrong answer when it comes to introversion or extroversion. You might even find some folks are ambiverts who display different personalities in different settings. You can’t force your teammates to take these types of tests. But if you are able to get buy-in, it can be a fun activity to see who considers themselves more introverted or more extroverted. The goal is to understand your own preferences and tendencies and those of your colleagues so you can create a work environment that supports your well-being and maximizes your potential.

Introverts’ Super Powers

The idea that UX is an extrovert’s game couldn’t be further from the truth. As Jeremy Bird notes in his article on the strengths of introverts in design, it’s a field that demands a wide range of skills, including deep listening, empathy, observation, analysis, and creativity — all of which introverts excel at. With so much information already available from articles on UX and introversion noted in the biography below, I’m going to briefly highlight the commonly accepted strengths of introverts.

Deep Listening

Introverts are often exceptional listeners. In user interviews, they give participants the space to fully express their thoughts and feelings, picking up on subtle cues and nuances that others might miss. This active listening leads to a deeper understanding of user needs and motivations, which is crucial for both research and design.

One practitioner shared their experience on LinkedIn:

“In a nutshell, being introverted gives a natural advantage in giving the user space to tell their story. I’m more likely to embrace pauses that others may feel are awkward, but this allows users to either double down on their point or think of another point to add (“lightbulb” moment).”

— Dominique S. Microsoft User Research via LinkedIn

Empathy

Many introverts possess a high degree of empathy. They can easily put themselves in users’ shoes, feeling their frustrations and celebrating their successes. This empathy fuels user-centered design, ensuring that products and services are not only functional but also emotionally resonant.

Observational Skills

Introverts are naturally observant. They notice details in user behavior, interface interactions, and environmental context that others might overlook.

Thoughtful Analysis

Introverts often prefer to process information internally, engaging in deep, solitary reflection before sharing their insights. This leads to well-considered and insightful findings and well-crafted data-informed design.

Independent Work

Introverts tend to thrive in independent work environments. As Heather McCulloch notes, teachers should allow introverted students to work independently or in pairs. This way, they can focus deeply on research tasks, design problems, or data analysis without the distractions that come with constant collaboration.

Now that we’ve covered the commonly recognized strengths introverts bring to the table, let’s cover some common hurdles and explore effective strategies for overcoming them that empower introverts to thrive.

Potential Challenges (And How To Overcome Them)

Being introverted can bring up some challenges when it comes to doing things that require a lot of social energy. However, many introverts in UX find ways to push beyond their natural tendencies to meet the demands of their profession. One UX practitioner shared their experience on LinkedIn:

“I’ve been extremely introverted all my life, but have always been able to proceed beyond my introverted boundaries because of a commitment to (perceived) duty. My passion for synergizing user needs, business needs, and the assorted bevy of constraints that arise helps me downplay and overlook any challenges arising from my tendency to be withdrawn.”

— Darren H. MS UXD via LinkedIn

Networking

Introverts might initially feel overwhelmed in networking situations or workshops due to the continual social interaction and the need to navigate unfamiliar environments and interact with new people, which can be particularly daunting for those who prefer solitude or small-group conversations.

• Researchers & Designers: Building professional relationships can be challenging for introverts. Large conferences or networking events can feel overwhelming. Small talk can feel forced and inauthentic.
  • Solutions for researchers and designers:
    • Focus on quality over quantity: Instead of trying to meet as many people as possible, focus on building a few meaningful connections.
    • Utilize online communities: Connect with other UX professionals on platforms like LinkedIn or Twitter. Engage in discussions, share your insights, and build relationships virtually before meeting in person.
    • Attend smaller events: Look for niche conferences or meetups focused on specific areas of interest. These tend to be more intimate and less overwhelming than large-scale events.
    • Leverage existing relationships: Don’t be afraid to ask a colleague or mentor to introduce you to someone new.

Presenting Work and Public Speaking

Introverts may initially avoid presenting because they tend to prefer avoiding the spotlight. They may also worry about being judged or scrutinized by others.

• Researchers: May feel anxious about presenting research findings to stakeholders, especially if they have to do so in front of a large audience.
• Designers: Can struggle with pitching design concepts or justifying their decisions to clients or colleagues, fearing criticism or pushback.

For the introvert, you might not like this, but you need to get comfortable presenting, and the sooner you do, the better.

Solutions for researchers and designers:

• Practice, practice, practice
  The more you rehearse your presentation or pitch, the more comfortable you’ll feel. Practice in front of a mirror, record yourself or ask a trusted friend for feedback.
• Use visual aids
  Slides, mockups, or prototypes can help you illustrate your points and keep your audience engaged.
• Focus on clear communication
  Structure your presentation logically, use simple language, and avoid jargon. Speak slowly and confidently, and make eye contact with your audience.
• Build confidence over time
  Start with small presentations or informal feedback sessions. As you gain experience and positive feedback, your confidence will naturally increase.

I’ve personally found presenting in front of a large anonymous crowd to be less intimidating than smaller, intimate meetings where you might know a few people mixed in with a few strangers. In the end, I always remind myself I am supposed to be the expert on what I’ve been asked to present or that my job is to clearly state the outcome of our research to stakeholders hungry to see the relevance of their work. The audience wants to support you and see you succeed. I take confidence in that. I’m also exhausted after giving a presentation where I’ve left it all on the floor.

Now, let’s move on to topics beyond what I’ve found covered in existing articles on UX and introversion and cover workshop facilitation and managing group dynamics.

Managing Group Dynamics

Introverts may find group dynamics challenging, as they often prefer solitary activities and may feel overwhelmed or drained by social interactions. In group settings, introverts may have difficulty asserting themselves, sharing their ideas, or actively participating in discussions. They may also feel uncomfortable being the center of attention or having to make decisions on the spot.

Additionally, introverts may struggle to build relationships with their peers in a group setting, as they may be hesitant to initiate conversations or join in on group activities. These challenges can make it difficult for introverts to fully engage and contribute in group settings, leading to feelings of isolation and exclusion.

One UX designer responding over LinkedIn eloquently shared their experience with communication challenges:

“Introversion can sometimes create challenges in communication, as my thoughtful nature can be misinterpreted as shyness or disinterest. To step out of my shell, I need to build trust with those around me before I can feel truly comfortable. However, I don’t see this as the worst thing in the world. Instead, I view it as an opportunity to identify areas where I need to improve and learn to advocate for myself more effectively in the future. In embracing both the strengths and challenges of being an introvert, I’ve found that my introverted nature not only enhances my work as a designer but also drives continuous personal and professional growth, ultimately leading to better outcomes for both myself and my team.”

— Arafa A. via LinkedIn

• Challenge: Large groups can be overwhelming, and introverted facilitators might find it difficult to assert control or manage dominant personalities who may derail the discussion.
• Solutions:
  • Clear Ground Rules: Establish explicit ground rules at the beginning of the workshop to ensure respectful communication and equal participation.
  • Assertive Communication: Practice techniques like “broken record” or “fogging” to politely but firmly redirect the conversation when necessary.
  • Partner with a Co-Facilitator: Collaborate with an extroverted colleague who can complement your strengths. They can take the lead in managing group dynamics and energizing participants.

Managing group dynamics covers a broad number of situations UX professionals face on a daily basis. Let’s get a little more specific and focus on how introverted UXers can thrive as workshop facilitators.

Facilitating Workshops

If you’re an introverted UX professional who shies away from leading workshops, it’s time to reconsider. Here are some of the reasons introverts can be perfect workshop facilitators:

1. Preparation:
   • Introverts tend to be meticulous planners. We thrive on preparation and often go above and beyond to ensure a workshop is well-structured, organized, and aligned with learning objectives. This thoroughness translates to a smooth, well-paced session that instills confidence in participants.
2. Thoughtful Facilitation:
   • Introverts are known for their active listening skills. We genuinely want to hear what others have to say and create a safe space for diverse perspectives to emerge. We ask thoughtful questions, encourage reflection, and facilitate meaningful discussions that lead to deeper understanding.
3. Empathy & Connection: We’ve already discussed in the section on superpowers how introverts excel at empathy and connection.
4. Observation Skills: We’ve already discussed in the section on superpowers how introverts excel at observational skills.
5. Comfort with Silence:
   • Introverts understand the power of silence. We’re not afraid to pause and allow reflection after asking a question or during a brainstorming session. This creates space for deeper thinking and prevents premature conclusions or groupthink.

We’ve reviewed many of the challenges introverts might face in their daily work life. Let’s turn our attention to a more recent phenomenon, at least in terms of its widespread availability as an option for many UX professionals: remote work.

Working Remotely

Increased telecommuting offers a unique opportunity for some introverts. Introverts, who often find comfort in solitude and derive energy from spending time alone, sometimes find the constant socialization and bustle of open-plan offices overwhelming and draining.

Remote work provides introverts with an opportunity to control their surroundings and create a workspace that promotes focus, productivity, and creativity. Remote work allows introverts to communicate and collaborate on their own terms. Introverts often prefer one-on-one interactions over large group meetings, and remote work makes it easier for them to engage in meaningful conversations with colleagues and clients.

Potential Challenges For Introverts Working Remotely

While remote work has been a game-changer for many introverts, it is important to acknowledge that it is not without its challenges. Introverts may miss the camaraderie and social connections of an in-person workplace, and they may need to make a conscious effort to stay connected with colleagues and maintain a healthy work-life balance.

Introverts working remotely may need to develop strategies for self-advocacy and communication to ensure that their voices are heard and their contributions are valued in a virtual work environment.

• Isolation and Disconnect: The lack of face-to-face interaction can lead to feelings of isolation and detachment from the team.
• Communication Barriers: Virtual communication can be less nuanced, making it harder to convey complex ideas or build rapport with colleagues.
• Meeting Overload: Excessive video calls can be exhausting for introverts, leading to burnout and decreased productivity.
• Limited Non-Verbal Cues: Virtual interactions lack the subtle body language and facial expressions that introverts rely on to understand others’ perspectives.

Overcoming Challenges: Strategies For Introverts Working Remotely

Introverted remote employees can implement some of these strategies and tactics to enhance their productivity, reduce burnout, and maintain a positive work environment:

• Proactive Communication: Initiate regular check-ins with colleagues and managers, both for work-related updates and casual conversations.
• Schedule Breaks: During long virtual meetings, take short breaks to recharge and refocus.
• Advocate for Your Needs: If you’re feeling overwhelmed by meetings or social interactions, don’t hesitate to speak up and suggest alternatives, such as asynchronous communication or smaller group discussions.
• Build Virtual Relationships: Participate in virtual social events, share personal anecdotes in team channels, and find opportunities to connect with colleagues on a personal level.
• Embrace Video Calls (Strategically): While video calls can be tiring, they can also be valuable for building rapport and understanding non-verbal cues. Use them strategically for important discussions or when you need to connect with a colleague on a deeper level.

Implementing what we’ve covered in this section will help to reduce the likelihood of frustration from both remote working introverts and their colleagues.

Tips For Introverted UX Researchers And Designers

We’ve covered a lot of ideas in this article. If you find yourself nodding along as an introvert or perhaps coming to the realization you or someone on your team is more introverted, this section and the next will end this article on a high note, introducing some actionable tips for introverted researchers and designers, and their managers and teammates, to create a more comfortable and successful working environment for introverts to thrive alongside their extroverted colleagues.

Self-Care

Everyone needs to engage in an appropriate amount of self-care to feel their best. For an introvert, this is often done in solitude, particularly after engaging in a day or week full of social interaction. Some tips that could apply to anyone but are of particular relevance to introverts include the following:

• Schedule downtime: Block out time in your calendar for quiet reflection and recharging after meetings or social interactions. This could be a walk in nature, reading a book, or simply sitting in silence.
• Honor your energy levels: Pay attention to when you’re feeling drained. Don’t be afraid to decline invitations or reschedule meetings if you need time to recharge.
• Create a calming workspace: Surround yourself with things that promote relaxation and focus, such as plants, calming music, or inspiring artwork.

Play To Your Strengths

Introverts know themselves best and have spent a lifetime reflecting on who they are and what makes them wake up happy to go to work. As such, introverts may have a high awareness of their strengths. This allows an introvert to do the following:

• Identify your unique talents: Are you a meticulous researcher, a creative problem-solver, or a passionate user advocate? Focus on tasks and projects that align with your strengths.
• Communicate your preferences: Let your manager or team know what type of work you thrive in. Perhaps you prefer to work independently on research tasks or focus on the visual aspects of design.
• Build on your skills: Seek opportunities to develop your existing skills and acquire new ones. This could involve taking online courses, attending workshops, or seeking mentorship from experienced researchers and designers.

Communication

Introverts might hesitate to speak up when the room is crowded with unknown future friends. However, anyone, introverted or not, needs to be their own best advocate when it comes to making colleagues and management aware of how to create the best workplace environment to thrive in:

• Advocate for your needs: Don’t be afraid to speak up and ask for what you need to succeed. This could involve requesting a quiet workspace, suggesting alternative meeting formats, or simply letting your team know when you need some time to yourself.
• Develop your communication skills: Even though you may prefer written communication or one-on-one conversations, it’s important to be able to communicate effectively in various settings. Practice public speaking, participate in team discussions, and learn to articulate your ideas clearly and confidently.

It’s essential for introverts to advocate for their needs and communicate their preferred work styles to their colleagues and managers. One UX professional shared their experience on LinkedIn:

“I do my best work when I have time to think and prepare vs. on-demand thinking, speaking, & decision making. So, I ask for agendas, context, and pre-reads to help me make the most impact in meetings. When I shared this fact, it really helped my outgoing teammates, who never thought that others might operate differently than they do. I got feedback that this was a learning experience for them, and so I have continued to share this fact with new teammates to set expectations and advocate for myself since I find it to be an extrovert-centered business world.”

— Anonymous UXer on LinkedIn

Another LinkedIn UXer provided additional tactics for how they navigate communication styles and expectations, particularly in a fast-paced or extrovert-dominated environment.

“The longer I work with people in a creative capacity, the more I recognize the power of delay. Plenty of introverts are also high-achieving people pleasers (raises hand 🙋🏻). This has caused stress over the years when working with extroverts or verbal processors because there can be a perceived sense of urgency to every thought or ask.
[slowing things down] can look like using certain phrases to help slow down the implied urgency to allow me to more thoughtfully process the ask:

• “Ah, interesting! Could you say more about that?”
• “Can you clarify the ‘why’ behind this for me? I want to make sure I’ve got it right.”
• “How does this support our goals for < x project / user >?”

And if the ask comes through asynchronously via email or Slack, I ask myself the following:

1. Was this sent during working hours?
2. Am I the only one who can answer this question / address this issue?
3. Can I provide a short response that lets the person know their message was seen and that it’s on my radar?”

— Kait L. UXer via LinkedIn

Group Dynamics

Introverts may not initially thrive when it comes to group dynamics. They might wish to observe the group before deeply engaging. They can find it difficult to assert themselves in a group setting and may feel overwhelmed by the constant need for social interaction.

Additionally, introverts may find it harder to contribute to discussions or be slower to form meaningful connections with others in a group. The extroverted nature of group dynamics can be draining for introverts, and they may require more time to recharge after being in a group setting.

• Prepare in advance: Gather your thoughts, jot down key points, or even practice your delivery. This can help you feel more confident and articulate in group settings.
• Take breaks: If a meeting is dragging on, step out for a few minutes to recharge. A quick walk or a moment of solitude can do wonders for your energy levels.
• Seek one-on-one interactions: If you’re struggling to be heard in a group, try scheduling separate meetings with key stakeholders to share your insights or design concepts in a more intimate setting.
• Utilize virtual collaboration tools: If in-person meetings are particularly draining, suggest using tools like Slack, Miro, or Figma for asynchronous collaboration and feedback.

Introverts often find creative ways to navigate the challenges of large group settings. One UX researcher shared their experience on LinkedIn:

“I have a monthly meeting with many employees (50+) to go over survey results. I realized it was super awkward for me just to wait as people joined the meeting. I tried to make small talk about upcoming weekend plans or what people had done over the weekend, but engagement was still pretty low, and I was not equipped enough to carry on conversations. I decided to fill the time with memes. I would search for user research memes and tie them into why user research is important. More people started coming to my meetings just to see the meme! As time went on, I became known as the meme person. While I can’t necessarily say if that’s a good thing — brand awareness is powerful! At least people know user research exists and that we’re fun — even if it all started from being awkward and introverted.”

— Anonymous LinkedIn UXer

Guidance For Moving Up As An Introverted Researcher Or Designer

I turned to Tim Yeo to provide some insight into how introverts can best prepare for moving up the career ladder. Tim provided some tactical advice focusing on teamwork and people skills:

“Practice your people skills. If you, as an individual, could do it all on your own, you would’ve probably done it already. If you can’t, then you need to work with people to bring your creation to life. It takes a team.”

Tim also shared the strategic reason behind the importance of leaders having excellent people skills:

“We also like to believe that higher management is always more sure, more right, and has all the answers. In my experience, the reality is almost the opposite. Problems get fuzzier, messier, and more complex the higher up the organization you go. Making decisions with incomplete, imperfect information is the norm. To operate successfully in this environment requires steering people to your worldview, and that takes people skills.”

You can find some additional information on ways for introverts (and extroverts) to gain people skills in some of the references listed at the end of this article.

Let’s move on and wrap up with some tips for those who are working alongside introverts.

Tips For Managers And Colleagues of Introverts

If you are a manager of a team consisting of more than yourself, you likely have an introvert among your team. Tim Yeo states, “Research from Susan Cain’s book, Quiet, shows that ¹⁄₃ to ¹⁄₂ of our population identify as quiet or introverted.”

Therefore,

“If you work in a diverse team, it follows that 1/3 to 1/2 of your team are quiet. So if you don’t create a space for quiet ones to be heard, that means you are missing out on 1/3 to 1/2 of ideas.”

UX managers of teams, including introverts and extroverts, should engage in some of the following suggested practices to create an inclusive work environment where everyone feels valued, heard, and able to contribute effectively to the team’s success. UX managers can use these tips to foster a diverse and productive team dynamic that drives innovation and creativity.

• Flexibility
  • Offer communication options: Not everyone thrives in the same communication environment. Provide alternatives to large meetings, such as email updates, one-on-one check-ins, or asynchronous communication tools like Slack.
  • Embrace different work styles: Recognize that not everyone is most productive in a bustling office environment. Allow for flexible work arrangements, such as remote work or flexible hours, to accommodate different needs and preferences.
• Value Diversity
  • Recognize the strengths of introverts: Introverts bring a unique perspective and valuable skills to the table. Encourage their contributions, celebrate their successes, and create an environment where they feel comfortable sharing their ideas.
  • Foster inclusivity: Make sure everyone on the team feels heard and valued, regardless of their personality type. Encourage open communication, active listening, and mutual respect.
• Create Safe Spaces
  • Provide quiet spaces: Designate areas in the office where people can go to work independently or simply decompress.
  • Encourage breaks: Remind your team to take regular breaks throughout the day to recharge. This could involve stepping outside for fresh air, taking a short walk, or simply closing their eyes for a few minutes of meditation.
• Professional Development
  • Offer tailored training: Provide opportunities for introverted researchers and designers to develop their communication and presentation skills in a supportive environment. This could involve workshops, coaching, or mentorship programs.

As a bonus, if you’re an introverted UX Manager and you are managing a team composed of introverts and extroverts, remember to encourage a variety of communication channels for your team members. You might default to your preferred style of communication but recognize that different team members may prefer different communication channels.

Some extroverted team members might enjoy brainstorming in large meetings, and introverted team members might prefer to contribute their ideas through written channels such as email, chat, or discussion boards.

Encouraging a variety of communication channels ensures that all team members feel comfortable sharing their thoughts and ideas.

“

Tim Yeo provided this list of tactics for encouraging and engaging introverts in participating in discussion:

• Sharing the agenda before the meeting (so your quiet teammates, who are amazing preppers, by the way, can prepare and be ready to contribute).
• Using a mix of silent and think-out-loud activities in meetings (so people who process information differently can all perform).
• Give a heads-up before you call on a quiet colleague to speak.
• Offer to be a thinking partner (when your quiet colleague appears to be stuck on a piece of work).

Now, let’s move on to focus on some tips for managing remote workers.

Recommendations For Managers And Teams Working Remotely

Managers and colleagues play a crucial role in creating a supportive and inclusive environment for introverted researchers and designers on dispersed teams. Here are some strategies to consider:

1. Intentional Communication
   • Asynchronous First: Prioritize asynchronous communication methods (email, project management tools, shared documents) for brainstorming, feedback, and routine updates. This gives introverts time to process information and craft thoughtful responses.
   • One-on-One Check-Ins: Schedule regular one-on-one meetings with introverted team members to build rapport, discuss their concerns, and offer individualized support.
   • Mindful Meeting Management: Be mindful of meeting frequency and duration. Consider alternatives to video calls when possible, such as shared documents or asynchronous communication channels. When video calls are necessary, ensure they have a clear agenda and purpose.
2. Creating Virtual Water Cooler Moments
   • Casual Communication Channels: Set up dedicated IM channels or virtual spaces for non-work-related conversations, allowing for informal social interaction and team bonding.
   • Virtual Social Events: Organize virtual coffee chats, game nights, or team-building activities to foster camaraderie and connection outside of work-related tasks.
   • Collaborative Tools: Utilize virtual whiteboards or shared documents for brainstorming sessions, encouraging participation and idea generation from all team members.
3. Cultivating Empathy and Understanding
   • Education and Awareness: Share articles or resources about introversion with the team to foster understanding and appreciation for different personality types.
   • Open Dialogue: Encourage open conversations about communication styles and preferences, creating a safe space for everyone to express their needs.
   • Celebrate Strengths: Highlight the unique contributions that introverted team members bring to the table, such as their deep listening skills, thoughtful analysis, and ability to advocate for users.
4. Leadership Support
   • Model Inclusive Behavior: Managers should lead by example, demonstrating respect for different communication styles and creating opportunities for all team members to contribute.
   • Provide Resources: Offer training or workshops on effective virtual communication and collaboration, tailoring them to the needs of introverted team members.
   • Check-In Regularly: Regularly touch base with introverted team members to gauge their well-being, address any concerns, and offer support.

Managers and teams can implement these strategies to create a work environment that values and empowers introverted researchers and designers, enabling them to thrive and make significant contributions to the team’s success.

Conclusion

We create a more inclusive and productive environment when we understand and appreciate the unique needs and preferences of introverts. Whether you’re an introverted UXer navigating the challenges of remote work or a manager looking to foster a diverse and engaged team, the strategies and insights shared in this article can help you unlock the full potential of introverted talent.

“The superpower of introspection that comes with introversion has enabled me to reflect on my behaviours and engineer myself to become more of an omnivert — able to adapt to different situations.

Being self-aware and working hard to ladder up through increasingly more challenging experiences has taken me from an introvert who was too concerned to tweet to an active leader in the community, delivering seminars, speaking at an international conference and now running a mentorship program for hundreds of UX professionals across the globe.”

— Chris C. UX Master Certified, via LinkedIn

Introversion is not a weakness to be overcome but a valuable asset to be embraced. We build stronger teams, foster innovation, and ultimately deliver more meaningful and impactful user experiences when we create a culture that celebrates both introverted and extroverted strengths. The best solutions often emerge from a blend of diverse perspectives, including the quiet voices that deserve to be heard.

In closing, I’d like to use the words of Tim Yeo, who provides us with some inspiration and positive reinforcement of who we are as introverts:

“You are enough. The world may continue to favour the extrovert ideal, but pretending to be someone you are not will never feel right. Know that there is a different path to have impact at work where you don’t have to pretend to be someone you are not. That path comes from tiny habits, done well, accumulated over time.”

[You can learn more about tiny habits in Tim’s book The Quiet Achiever]

Biography And Additional Resources

• The Quiet Achiever: Tiny habits to have impact at work (without pretending to be extroverts), Tim Yeo
• “How To Design Better UX With Introverted Design,” Pratik Joglekar
• “Why Introverts Make Exceptional Designers & How Leaders Can Support Them,” Jeremy Bird
• “Embracing Introverted Strengths, Part 1,” Jonathan Walter
• “An Introvert’s Guide To User Engagement In UX Research,” Jesús R
• Quiet: The Power of Introverts in a World That Can’t Stop Talking, Susan Cain
• “Incorporating More Quiet Into The UX Design Process,” Angela Craven and SueAnne Hall
• UXPodcast on Introvert Designers
• “12 Tips To Hear The Voices Of Introverts In Medical Education … And To Improve The Learning Climate For Everyone,” Reinoud De Jong & Anne de la Croix
• “Embracing Introverts in the Classroom: A Guide to Helping Students and Teachers Survive and Excel” (PDF), Heather McCulloch
  A wonderful and fairly easy-to-read in-depth review of introversion and extroversion, including a discussion of the differences in nervous system functioning between introverts and extroverts. I strongly recommend reading this and the citations McCulloch provides if you are interested in an academic view on this topic.

(yk)

This article is sponsored by Luzmo

In this article, I’ll introduce you to Luzmo Flex, a new feature from the Luzmo team who have been working hard making developer tooling to flatten the on-ramp for analytics reporting and data visualization.

With Luzmo Flex, you can hook up a dataset and create beautifully crafted, fully customizable interactive charts that meet your reporting needs. They easily integrate and interact with other components of your web app, allowing you to move away from a traditional “dashboard” interface and build more bespoke data products.

While many charting libraries offer similar features, I often found it challenging to get the data into the right shape that the library needed. In this article, I’ll show you how you can build beautiful data visualizations using the Google Analytics API, and you won’t have to spend any time “massaging” the data!

What Is Luzmo Flex?

Well, it’s two things, really. First of all, Luzmo is a low-code platform for embedded analytics. You can create datasets from just about anything, connect them to APIs like Google Analytics or your PostgreSQL database, or even upload static data in a .csv file and start creating data visualizations with drag and drop.

Secondly, Luzmo Flex is their new React component that can be configured to create custom data visualizations. Everything from the way you query your data to the way you display it can be achieved through code using the LuzmoVizItemComponent.

What makes Luzmo Flex unique is that you can reuse the core functionalities of Luzmo’s low-code embedded analytics platform in your custom-coded components.

“

That means, besides creating ready-to-use datasets, you can set up functions like the following out-of-the-box:

• Multi-tenant analytics: Showing different data or visualizations to different users of your app.
• Localization: Displaying charts in multiple languages, currencies, and timezones without much custom development.
• Interactivity: Set up event listeners to create complex interactivity between Luzmo’s viz items and any non-Luzmo components in your app.

What Can You Build With Luzmo Flex?

By combining these off-the-shelf functions with flexibility through code, Luzmo Flex makes a great solution for building bespoke data products that go beyond the limits of a traditional dashboard interface. Below are a few examples of what that could look like.

Report Builder

A custom report builder that lets users search and filter a dataset and render it out using a number of different charts.

Filter Panel

Enable powerful filtering using HTML Select inputs, which will update each chart shown on the page.

Wearables Dashboard

Or how about a sleep tracker hooked up to your phone to track all those important snoozes?

When to Consider Luzmo Flex vs Chart Libraries

When building data-intensive applications, using something like Recharts, a well-known React charting library, you’ll likely need to reformat the data to fit the required shape. For instance, if I request the top 3 page views from the last seven days for my site, paulie.dev, I would have to use the Google Analytics API using the following query.

import dotenv from 'dotenv';
import { BetaAnalyticsDataClient } from '@google-analytics/data';
dotenv.config();

const credentials = JSON.parse(
  Buffer.from(process.env.GOOGLE_APPLICATION_CREDENTIALS_BASE64, 'base64').toString('utf-8')
);

const analyticsDataClient = new BetaAnalyticsDataClient({
  credentials,
});

const [{ rows }] = await analyticsDataClient.runReport({
  property: `properties/${process.env.GA4_PROPERTY_ID}`,
  dateRanges: [
    {
      startDate: '7daysAgo',
      endDate: 'today',
    },
  ],
  dimensions: [
    {
      name: 'fullPageUrl',
    },
    {
      name: 'pageTitle',
    },
  ],
  metrics: [
    {
      name: 'totalUsers',
    },
  ],
  limit: 3,
  metricAggregations: ['MAXIMUM'],
});

The response would look something like this:

[
  {
    "dimensionValues": [
      {
        "value": "www.paulie.dev/",
        "oneValue": "value"
      },
      {
        "value": "Paul Scanlon | Home",
        "oneValue": "value"
      }
    ],
    "metricValues": [
      {
        "value": "61",
        "oneValue": "value"
      }
    ]
  },
  {
    "dimensionValues": [
      {
        "value": "www.paulie.dev/posts/2023/11/a-set-of-sign-in-with-google-buttons-made-with-tailwind/",
        "oneValue": "value"
      },
      {
        "value": "Paul Scanlon | A set of: "Sign In With Google" Buttons Made With Tailwind",
        "oneValue": "value"
      }
    ],
    "metricValues": [
      {
        "value": "41",
        "oneValue": "value"
      }
    ]
  },
  {
    "dimensionValues": [
      {
        "value": "www.paulie.dev/posts/2023/10/what-is-a-proxy-redirect/",
        "oneValue": "value"
      },
      {
        "value": "Paul Scanlon | What Is a Proxy Redirect?",
        "oneValue": "value"
      }
    ],
    "metricValues": [
      {
        "value": "23",
        "oneValue": "value"
      }
    ]
  }
]

To make that data work with Recharts, I’d need to reformat it so it conforms to the following data shape.

[
  {
    "name": "Paul Scanlon | Home",
    "value": 61
  },
  {
    "name": "Paul Scanlon | A set of: "Sign In With Google" Buttons Made With Tailwind",
    "value": 41
  },
  {
    "name": "Paul Scanlon | What Is a Proxy Redirect?",
    "value": 23
  }
]

To accomplish this, I’d need to use an Array.prototype.map() to iterate over each item, destructure the relevant data and return a key-value pair for the name and value for each.

const data = response.rows.map((row) => {
  const { dimensionValues, metricValues } = row;

  const pageTitle = dimensionValues[1].value;
  const totalUsers = parseInt(metricValues[0].value);

  return {
    name: pageTitle,
    value: totalUsers,
  };
});

And naturally, if you’re reformatting data this way in your application, you’d also want to write unit tests to ensure the data is always formatted correctly to avoid breaking your application… and all of this before you even get on to creating your charts!

With Luzmo Flex, all of this goes away, leaving you more time to focus on which data to display and how best to display it.

The First Steps to Building Bespoke Data Products

Typically, when building user interfaces that display data insights, your first job will be to figure out how to query the data source. This can take many forms, from RESTful API requests to direct database queries or sometimes reading from static files. Your next job will be figuring out when and how often these requests need to occur.

• For data that rarely changes: Perhaps a query in the build step will work.
• For data that changes regularly: A server-side request on page load.
• For ever-changing data: A client-side request that polls an API on an interval.

Each will likely inform your application’s architecture, and there’s no single solution to this. Your last job, as mentioned, will be wrangling the responses, reformatting the data, and displaying it in the UI.

Below, I’ll show you how to do this using Luzmo Flex by using a simple example product.

What We’re Building: Custom Data Visualizations As Code

Here’s a screenshot of a simple data product I’ve built that displays three different charts for different reporting dimensions exposed by the Google Analytics API for page views for my site, paulie.dev, from the last seven days.

You can find all the code used in this article on the following link:

• https://github.com/luzmo-official/luzmo-flex-tutorial

Getting Started With Luzmo

Before we get going, hop over to Luzmo and sign up for a free trial. You might also like to have a read of one of the getting started guides listed below. In this article, I’ll be using the Next.js starter.

• Getting started with Luzmo Data Visualization and Next.js
  • https://github.com/luzmo-official/luzmo-getting-started-next-js
• Getting started with Luzmo Data Visualization and Astro
  • https://github.com/luzmo-official/luzmo-getting-started-astro

Creating a Google Analytics Dataset

To create data visualization, you’ll first need data! To achieve this using Luzmo, head over to the dashboard, select Datasets from the navigation, and select GA4 Google Analytics. Follow the steps shown in the UI to connect Luzmo with your Google Analytics account.

With the setup complete, you can now select which reporting dimensions to add to your dataset. To follow along with this article, select Custom selection.

Lastly, select the following using the search input. Device Category, Page Title, Date, and Total users, then click Import when you’re ready.

You now have all the data required to build the Google Analytics dashboard. You can access the dataset ID from the URL address bar in your browser. You’ll need this in a later step.

If you’ve followed along from either of the first two getting started guides, you’ll have your API Key, API Token, App server, and API host environment variables set up and saved in a .env file.

Install Dependencies

If you’ve cloned one of the starter repositories, run the following to install the required dependencies.

npm install

Next, install the Luzmo React Embed dependency which exports the LuzmoVizItemComponent.

npm install  @luzmo/react-embed@latest

Now, find page.tsx located in the src/app directory, and add your dataset id as shown below.

Add the access object from the destructured response and pass access.datasets[0].id onto the LuzmoClientComponent component using a prop named datasetId.

// src/app/page.tsx


+ import dynamic from 'next/dynamic';

import Luzmo from '@luzmo/nodejs-sdk';
- import LuzmoClientComponent from './components/luzmo-client-component';
+ const LuzmoClientComponent = dynamic(() => import('./components/luzmo-client-component'), {
  ssr: false,
});


const client = new Luzmo({
  api_key: process.env.LUZMO_API_KEY!,
  api_token: process.env.LUZMO_API_TOKEN!,
  host: process.env.NEXT_PUBLIC_LUZMO_API_HOST!,
});

export default async function Home() {
  const response = await client.create('authorization', {
    type: 'embed',
    username: 'user id',
    name: 'first name last name',
    email: 'name@email.com',
    access: {
      datasets: [
        {
-          id: '<dataset_id>',
+          id: '42b43db3-24b2-45e7-98c5-3fcdef20b1a3',
          rights: 'use',
        },
      ],
    },
  });

-  const { id, token } = response;
+  const { id, token, access } = response;

-  return <LuzmoClientComponent authKey={id} authToken={token} />;
+  return <LuzmoClientComponent authKey={id} authToken={token} datasetId={access.datasets[0].id} />;
}

And lastly, find luzmo-client-component.tsx located in src/app/components. This is where you’ll be creating your charts.

Building a Donut Chart

The first chart you’ll create is a Donut chart that shows the various devices used by visitors to your site.

Add the following code to luzmo-client-component.tsx component.

// src/app/component/luzmo-client-component.tsx

'use client';

+ import { LuzmoVizItemComponent } from '@luzmo/react-embed';

interface Props {
  authKey: string;
  authToken: string;
+  datasetId: string;
}

- export default function LuzmoClientComponent({ authKey, authToken}: Props) {
+ export default function LuzmoClientComponent({ authKey, authToken, datasetId }: Props) {

+  const date = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).toISOString(); // creates a date 7 days ago

  console.log({ authKey, authToken });

  return (
    <section>
+    <div className='w-1/2 h-80'>
+      <LuzmoVizItemComponent
+        appServer={process.env.NEXT_PUBLIC_LUZMO_APP_SERVER}
+        apiHost={process.env.NEXT_PUBLIC_LUZMO_API_HOST}
+        authKey={authKey}
+        authToken={authToken}
+        type='donut-chart'
+        options={{
+          title: {
+            en: `Devices from last 7 days`,
+          },
+          display: {
+            title: true,
+          },
+          mode: 'donut',
+          legend: {
+            position: 'bottom',
+          },
+        }}
+        slots={[
+          {
+            name: 'measure',
+            content: [
+              {
+                label: {
+                  en: 'Total users',
+                },
+                column: '<column id>', // Total users
+                set: datasetId,
+                type: 'numeric',
+                format: '.4f',
+              },
+            ],
+          },
+          {
+            name: 'category',
+            content: [
+              {
+                label: {
+                  en: 'Device category',
+                },
+                column: '<column id>', // Device category
+                set: datasetId,
+                type: 'hierarchy',
+              },
+            ],
+          },
+        ]}
+        filters={[
+          {
+            condition: 'or',
+            filters: [
+              {
+                expression: '? >= ?',
+                parameters: [
+                  {
+                    column_id: '<column id>', // Date
+                    dataset_id: datasetId,
+                  },
+                  date,
+                ],
+              },
+            ],
+          },
+        ]}
+      />
+    <div/>
    </section>
  );
}

There’s quite a lot going on in the above code snippet, and I will explain it all in due course, but first, I’ll need to cover a particularly tricky part of the configuration.

Column IDs

You’ll notice the filters parameters, measure, and category content all require a column id.

In the filters parameters, the key is named column_id, and in the measure and category, the key is named column. Both of these are actually the column IDs from the dataset. And here’s how you can find them.

Back in the Luzmo dashboard, click into your dataset and look for the “more dots” next to each column heading. From the menu, select Copy column id. Add each column ID to the keys in the configuration objects.

In my example, I’m using the Total users for the measure, the Device category for the category, and the Date for the filter.

If you’ve added the column IDs correctly, you should be able to see a rendered chart on your screen!

… and as promised, here’s a breakdown of the configuration.

Initial Props Donut chart

The first part is fairly straightforward. appServer and authKey are the environment variables you saved to your .env file, and authKey and authToken are destructured from the authorization request and passed into this component via props.

The type prop determines which type of chart to render. In my example, I’m using donut-chart, but you could choose from one of the many options available, area-chart, bar-chart, bubble-chart, box-plot, and many more. You can see all the available options in the Luzmo documentation under Chart docs.

<LuzmoVizItemComponent
  appServer={process.env.NEXT_PUBLIC_LUZMO_APP_SERVER}
  apiHost={process.env.NEXT_PUBLIC_LUZMO_API_HOST}
  authKey={authKey}
  authToken={authToken}
  type='donut-chart'

The one thing I should point out is my use of Tailwind classes: w-1/2 (width: 50%) and h-80 (height: 20rem). The LuzmoVizItemComponent ships with height 100%, so you’ll need to wrap the component with an element that has an actual height, or you won’t be able to see the chart on the page as it could be 100% of the height of an element with no height.

Donut Chart Options

The options object is where you can customize the appearance of your chart. It accepts many configuration options, among which:

• A title for the chart that accepts a locale with corresponding text to display.
• A display title value to determine if the title is shown or not.
• A mode to determine if the chart is to be of type donut or pie chart.
• A legend option to determine where the legend can be positioned.

All the available configuration options can be seen in the Donut chart documentation.

options={{
  title: {
    en: `Devices from last 7 days`,
  },
  display: {
    title: true,
  },
  mode: 'donut',
  legend: {
    position: 'bottom',
  },
}}

Donut Chart Slots

Slots are where you can configure which column from your dataset to use for the category and measure.

Slots can contain multiple measures, useful for displaying two columns of data per chart, but if more than two are used, one will become the measure.

Each measure contains a content array. The content array, among many other configurations, can include the following:

• A label and locale,
• The column id from the dataset,
• The datasetId,
• The type of data you’re displaying,
• A format for the data.

The format used here is Python syntax for floating-point numbers; it’s similar to JavaScript’s .toFixed() method, e.g number.toFixed(4).

The hierarchy type is ​​the Luzmo standard data type. Any text column is considered as an hierarchical data type.

You can read more in the Donut chart documentation about available configuration options for slots.

slots={[
  {
    name: 'measure',
    content: [
      {
        label: {
          en: 'Total users',
        },
        column: '<column id>', // Total users
        set: datasetId,
        type: 'numeric',
        format: '.4f',
      },
    ],
  },
  {
    name: 'category',
    content: [
      {
        label: {
          en: 'Device category',
        },
        column: '<column id>', // Device category
        set: datasetId,
        type: 'hierarchy',
      },
    ],
  },
]}

Donut Chart Filters

The filters object is where you can apply conditions that will determine which data will be shown. In my example, I only want to show data from the last seven days. To accomplish this, I first create the date variable:

const date = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).toISOString();

This would produce an ISO date string, e.g., 2024-08-21T14:25:40.088Z, which I can use with the filter. The filter uses Luzmo’s Filter Expressions, to determine if the date for each row of the data is greater than or equal to the date variable. You can read more about Filter Expressions in Luzmo’s Academy article.

filters={[
  {
    condition: 'or',
    filters: [
      {
        expression: '? >= ?',
        parameters: [
          {
            column_id: '<column id>', // Date
            dataset_id: datasetId,
          },
          date,
        ],
      },
    ],
  },
]}

Building a Line Chart

The second chart you’ll be creating is a Line chart that displays the number of page views on each date from the last seven days from folks who visit your site.

Initial Props Line Chart

As with the Donut chart, the initial props are pretty much the same, but the type has been changed to line-chart.

<LuzmoVizItemComponent
  appServer={process.env.NEXT_PUBLIC_LUZMO_APP_SERVER}
  apiHost={process.env.NEXT_PUBLIC_LUZMO_API_HOST}
  authKey={authKey}
  authToken={authToken}
  type='line-chart'

Line Chart Options

The options for the Line chart are as follows, and the mode has been changed to line-chart.

options={{
  title: {
    en: `Site visits from last 7 days`,
  },
  display: {
    title: true,
  },
  mode: 'grouped',
}}

Line Chart Slots

The slots object is almost the same as before with the Donut chart, but for the Line chart, I’m using the date column from the dataset instead of the device category, and instead of category, I’m using the x-axis slot type. To ensure I’m formatting the data correctly (by day), I’ve used level 5. You can read more about levels in the docs.

slots={[
  {
    name: 'measure',
    content: [
      {
        label: {
          en: 'Total users',
        },
        column: '<column id>', // Total users
        set: datasetId,
        type: 'numeric',
        format: '.4f',
      },
    ],
  },
  {
    name: 'x-axis',
    content: [
      {
        label: {
          en: 'Date',
        },
        column: '<column id>', // Date
        set: datasetId,
        type: 'datetime',
        level: 5,
      },
    ],
  },
]}

Line Chart Filters

I’ve used the same filters as I used in the Donut chart.

Building a Bar Chart

The last chart you’ll be creating is a Bar chart that displays the number of page views for the top ten most viewed pages on your site.

Initial Props Bar Chart

As with the Donut and Line chart, the initial props are pretty much the same, but the type has been changed to bar-chart.

<LuzmoVizItemComponent
  className='w-full h-80'
  appServer={process.env.NEXT_PUBLIC_LUZMO_APP_SERVER}
  apiHost={process.env.NEXT_PUBLIC_LUZMO_API_HOST}
  authKey={authKey}
  authToken={authToken}
  type='bar-chart'

Bar Chart Options

The options for the Bar chart are a little more involved. I’ve included some styling options for the border-radii of the bars, limited the number of results to 10, and sorted the data by the highest page view count first using the sort by measure and direction options.

options={{
  title: {
    en: `Page views from last 7 days`,
  },
  display: {
    title: true,
  },
  mode: 'grouped',
  bars: {
    roundedCorners: 5,
  },
  limit: {
    number: 10,
  },
  sort: {
    by: 'measure',
    direction: 'desc',
  },
}}

Line Chart Slots

As with the Line chart, I’ve used an axis for one of the columns from the dataset. In this case, it’s the y-axis which displays the page title.

slots={[
  {
    name: 'measure',
    content: [
      {
        label: {
          en: 'Total users',
        },
        column: '<column id>', // Total users
        set: datasetId,
        type: 'numeric',
        format: '.4f',
      },
    ],
  },
  {
    name: 'y-axis',
    content: [
      {
        label: {
          en: 'Page title',
        },
        column: '<column id>', // Page title
        set: datasetId,
        type: 'hierarchy',
      },
    ],
  },
]}

Bar Chart Filters

I’ve used the same filters as I used in the Donut and Line chart.

What’s Next

As you can see, there are plenty of types of charts and customization options. Because this is just an “ordinary” React component, you can very easily make it configurable by an end user by allowing options to be set and unset using HTML input elements, checkbox, select, date, and so on.

But for me, the real power behind this is not having to mutate data!

This is particularly pertinent when displaying multiple charts with different reporting dimensions. Typically, this would require each to have their own utility function or reformatting method. That said, setting column IDs and dataset IDs is a little fiddly, but once you have the component hooked up to the dataset, you can configure and reconfigure as much as you like, all without having to rewrite data formatting functions.

If you’re interested in bringing data to life in your application and want to get it done without the usual headaches, book a free demo with the Luzmo team to learn more!

(yk, il)