Inclusive Design

8 posts

tossOriginal article

Creating Toss's new face (opens in new tab)

Toss redesigned its brand persona graphics to transition from simple, child-like icons to more professional and inclusive human figures that better represent the brand's identity. This update aims to project a more trustworthy and intelligent image while ensuring the visual language is prepared for a global, multi-cultural audience. By balancing iconic simplicity with diverse representation, the new design system maintains brand consistency across various screen sizes and service contexts. ### Refining Proportions for Professionalism * The team adjusted the vertical facial ratio to move away from a "child-like" impression, finding a balance that suggests maturity and intelligence without losing the icon's friendly nature. * The placement of the eyes, nose, and mouth was meticulously tuned to maintain an iconic look while increasing the perceived level of trust. * Structural improvements were made to the body, specifically refining the curves where the neck and shoulders meet to eliminate the unnatural "blocky" feel of previous versions. * A short turtleneck was selected as the default attire to provide a clean, professional, and sophisticated look that works across different UI environments. ### Achieving Gender-Neutral Hairstyles * The design team aimed for "neutrality" in hair design to prevent the characters from being categorized into specific gender roles. * Several iterations were tested, including high-density detailed styles (which were too complex) and simple line-separated styles (which lacked visual density when scaled up). * The final selection focuses on a clean silhouette that follows the head line while adding enough volume to ensure the graphic feels complete and high-quality at any size. ### Implementing Universal Skin Tones and Diversity * To support Toss's expansion into global markets, the team moved away from a single skin tone that could be interpreted as a specific race. * While a "neutral yellow" (similar to standard emojis) was considered, it was ultimately rejected because it felt inconsistent and jarring when displayed in larger formats within the app. * Instead of a single "neutral" color, the team defined a palette of five distinct skin tones based on universal emoji standards. * New guidelines were established to mix these different skin tones in scenes with multiple characters, fostering a sense of inclusivity and representation that reflects a diverse user base. The evolution of the Toss persona illustrates that as a service grows, its visual language must move beyond simple aesthetics to address broader values like trust and inclusivity. Moving forward, the design system will continue to expand to ensure that no user feels excluded by age, gender, or race.

figma2 min readCurated summary

The Long and Short of It: Issue no.9 | Figma Blog

Issue no. 9 of Figma’s blog presents six “memos” about preserving craft, purpose, and creativity amid blurred roles, rapid product cycles, and emerging technology. The collection argues that digital creation should become more personal, emotionally resonant, adaptable, expressive, and inclusive. Rather than prescribing one method, the memos invite teams to question established approaches as they plan for 2025. ## Personalize the Web - Product Designer Chia Amisola argues that the internet has become increasingly standardized as it serves broader audiences. - She calls for a more personal and poetic web, inspired by the resurgence of small, handcrafted websites. - The accompanying essay, “Making space for a handmade web,” suggests that participating in this movement can begin simply by creating a site of your own. ## Build an Emotional Competitive Moat - Head of Insights Andrew Hogan argues that product differentiation cannot rely on features alone. - As software becomes more ubiquitous, emotional resonance can make an app feel distinctive and meaningful. - Teams should treat emotional response as part of product strategy and put “resonance on the roadmap.” ## Leave Room to Depart from the Roadmap - Director of Product Avantika Gomes challenges the idea that successful products must follow a fixed vision or predefined sequence of solutions. - Unexpected changes and discoveries can shape a product as much as its original roadmap. - Teams should avoid becoming overly attached to specific solutions and create room to pivot when circumstances or user needs change. ## Reclaim Creative Coding - Developer Jake Albaugh encourages developers to use the web’s expressive capabilities more fully. - He points to creative coding and the work of Henry Desroches as examples of how code can support experimentation and artistic expression, not just functional interfaces. ## The Value of Generalists - Content Strategist Carly Ayres revisits the discussion around generalists and hybrid roles. - As collaboration increasingly crosses design, development, writing, analysis, and product management, people who operate across disciplines may become especially valuable. ## Expand the Definition of Design - Another memo makes the case for greater inclusivity in design. - It suggests that the industry should reconsider narrow assumptions about who design serves and what design work includes. The collection’s practical message is to build with greater openness: make room for individuality, emotional connection, unexpected direction, creative experimentation, and broader participation. Teams planning new products should treat their process as adaptable rather than predetermined.

Read original(opens in new tab)
figma2 min readCurated summary

Behind the plugin: Cards for Humanity | Figma Blog

Cards for Humanity is a Figma plugin and website that helps teams practice inclusive and accessible design through an online card game. Players combine character cards with needs, disabilities, or challenges, then discuss how to design products for that person. The Idean team found that the tool makes difficult conversations about inclusion more tangible and encourages empathy-driven design. ## How the Game Works - Players pair two card types: - A character card with a name, age, and personality trait. - A card describing a need, disability, or personal challenge. - Clicking a card reveals written considerations to reduce assumptions about different experiences. - Its open-ended format supports workshops, brainstorming, and informal accessibility discussions. - The game puts people at the center of the design process rather than treating accessibility as an afterthought. ## Designing an Inclusive Tool - The team began with internal research, asking colleagues whether they would share personal traits or disabilities. - They expanded the card content through feedback from the wider product community. - Making the tool itself accessible proved challenging, requiring continuous listening and iteration. - The audience became broader than expected, including lawyers, gamers, clinicians, and educators—not just designers and developers. - This reinforced the importance of plain language, avoiding jargon, and designing for audiences beyond the expected user group. ## Balancing Internal Work and Client Priorities - Agency teams must balance billable client work with internal projects that have less obvious short-term ROI. - Idean viewed inclusive design as directly connected to better products, stronger outcomes, and happier clients. - Team members contributed both allocated work time and personal effort because of their commitment to the project. - The tool became part of the agency’s client process, potentially extending its impact across the products those clients create. - The team argues that inclusion should be understood not only as a business benefit, but also as a social responsibility. ## Starting the Conversation - Cards for Humanity is not prescriptive; simply discussing the cards can open conversations about accessibility. - The tool helps teams move from abstract intentions to concrete questions about people’s needs. - Its central purpose is to build empathy and make inclusive design a regular part of product development. Teams can use the plugin or website as a practical starting point for discussing accessibility, inclusion, and the responsibility designers and developers have toward diverse users.

Read original(opens in new tab)
figma2 min readCurated summary

Shifting team culture at Config 2021 | Figma Blog

The Config 2021 sessions argued that inclusive, collaborative design depends on building cultures of transparency, trust, and shared participation. Speakers emphasized two complementary practices: acknowledging people’s real emotions and circumstances, and creating accessible spaces where newcomers and diverse perspectives can contribute. The overall conclusion was that teams cannot create inclusive experiences alone; they need intentional routines, open resources, and community support. ## Embracing Vulnerability - Figma researcher Nannearl Brown described how openness about personal struggles can create a more supportive team culture. - Team members were encouraged to share: - How they were feeling - What support they needed - What they were focusing on during the day - Daily Slack stand-ups included non-work activities—such as exercise, hobbies, or family time—to encourage work-life balance and help teammates understand one another. - Support requires more than listening; teammates should make room for each other’s emotions, experiences, and difficult moments. - The central message was that people do not need to appear fine all the time. ## Creating Inclusive Spaces - Bitcoin designers Johns Beharry and Christoph Ono noticed that Bitcoin design resources often excluded people without technical expertise or geographic access. - They responded by building shared spaces where experienced designers could support newcomers, including: - A Slack community - GitHub resources - The Bitcoin Design resource hub - Weekly community calls - The open-source Bitcoin Design Guide - The resources were designed to work across cultures, regions, languages, and levels of technical knowledge. - Their goal was to create a friendly environment that encouraged broader participation and more diverse perspectives. - They argued that inclusive and accessible design requires collaboration with people who bring different experiences. ## Building Collaborative Culture - Design is inherently collaborative and benefits from varied experiences and perspectives. - Inclusive culture helps more team members and collaborators participate in the design process. - Trust and transparency are developed through both interpersonal habits—such as honest check-ins—and structural tools that make knowledge widely accessible. Teams seeking a more inclusive culture should normalize vulnerability, establish supportive communication routines, and create shared resources that invite participation from people with different backgrounds and levels of expertise.

Read original(opens in new tab)
figma2 min readCurated summary

Building an open and inclusive design process | Figma Blog

The post argues that inclusive products emerge from inclusive design processes built on trust, empathy, transparency, and collaboration. Teams should look beyond ideal users, involve localization and accessibility perspectives early, and create open working practices—especially in remote environments. These approaches improve both the product and the way teams understand one another. ## Designing for More Than the “Perfect” Use Case - User research should include diverse users, situations, and challenges—not only the primary persona. - Designers are encouraged to experience products “in the field,” such as considering delivery workers dealing with broken elevators or unreliable GPS. - Inclusive thinking can reveal accessibility needs that are: - Permanent, such as visual or motor limitations - Temporary or situational, such as hearing difficulties in crowded spaces or using a phone with a shattered screen - Small improvements to copy, color contrast, font size, and layout are useful, but accessibility requires broader organizational prioritization. - Teams should establish clear ownership for accessibility. - Designing for essential needs often produces features that benefit everyone. ## Making Localization Part of Product Design - Localization involves more than translating text; it requires attention to syntax, cultural nuance, and how designs adapt across languages. - Deliveroo replaced a siloed handoff process with the Phrase Figma plugin, allowing designers and localization teams to review localized prototypes earlier. - Localization experts can identify inaccurate translations or insufficient space before engineers build the final pages. - Seeing the complete user journey gives localization teams more context and improves collaboration. - Localization becomes an integrated part of product development rather than a transactional final step. ## Creating Transparent Team Processes - Remote work increases the need for visibility into teammates’ work, availability, and priorities. - Kate Pincott’s Team Capacity Template helps teams map weekly schedules and identify meeting or workload gaps. - Regular meetings and short stand-ups can replace informal office interactions and maintain personal connection. - Teams should make room for what matters during difficult periods rather than optimizing only for efficiency. - Shared working sessions, such as open Zoom rooms, can recreate some of the spontaneous collaboration of an office. Inclusive design is ultimately a process practice: broaden the perspectives involved, invite feedback early, and make work visible. Teams that build these habits are better equipped to create products that work across users, cultures, and circumstances.

Read original(opens in new tab)
figma3 min readCurated summary

How one designer motivates others to build more ethical products | Figma Blog

Cat Noone’s work argues that accessibility should be treated as a product requirement, not a limitation added at the end of development. Through three apps— I​ris Health, Stark, and Lyra—she designs for people often excluded by “typical user” assumptions. Her conclusion is that ethical, inclusive products emerge when teams understand diverse users and build accessibility directly into their workflows. ## Accessibility as a Product Priority - The article cites an estimate of 57 million disabled Americans, with 54% active online—roughly 9.3% of the population. - Noone challenges the idea that accessibility makes interfaces worse, asking whether excluding an entire population is itself poor design. - She recommends considering accessibility from the beginning rather than treating it as a later constraint. ## Iris Health: Emergency Medical Information - Iris Health was inspired by the risk of being unable to communicate medical information during an emergency, especially while traveling or living abroad. - If the app detects that a user is at a hospital and receives no response within ten minutes, it alerts emergency contacts by text. - A medical profile appears on the iPhone lock screen, allowing professionals to quickly view the user’s name, medications, allergies, and organ-donor status. - **Lesson:** Analyze potential users from every angle and adapt the interface to different medical and personal circumstances. ## Stark: Accessibility Within the Design Workflow - While developing Iris Health, Noone noticed that designers lacked sufficient tools for accessibility testing. - Stark provides color-blindness simulations and contrast-ratio checks directly within Sketch. - It enables designers to test different types of color blindness and verify typography against background colors. - The tool was already being used by teams at companies including Twitter, ESPN, Palantir, Dropbox, and Microsoft. - **Lesson:** Make accessibility checks part of the default workflow, using tools such as Stark, Contrast, and W3C accessibility resources. ## Lyra: Communication for Autistic Children - Lyra grew from Noone’s experience working with autistic children and others with special needs. - The app modernizes symbol-to-speech communication methods that traditionally relied on laminated cards and Velcro tabs. - Its goal is to help non-verbal autistic children communicate in a digital environment. - **Lesson:** Educate yourself about accessible design and learn to recognize common barriers before building a product. Inclusive design is most effective when it is built into research, design, and development from the outset. Teams should study the needs of underrepresented users and use accessibility tools continuously rather than relying on a final compliance check.

Read original(opens in new tab)
figma3 min readCurated summary

18 designers predict UI/UX trends for 2018 | Figma Blog

The article gathers predictions from 18 designers about UI/UX in 2018, emphasizing that the field should improve users’ experiences rather than prioritize novelty or designer ego. Common themes include accessibility, ethical responsibility, collaboration, and closer integration between design and development. It also warns that efficiency and standardized systems can become harmful when adopted without critical thought. ## Accessibility and Inclusive Design - Designers argue that accessibility should become a central responsibility rather than an afterthought. - Common problems include: - Using ultra-light gray text for essential content - Adding unnecessary animation - Making interfaces harder to understand for visual flair - Inclusive design is described as an important trend that the industry needs, even if it is unlikely to attract attention or headlines. - The article suggests that many teams avoid accessibility work because it requires sustained effort rather than producing immediately visible results. ## Design Collaboration Inspired by Engineering - Design teams may begin working more like engineering teams. - Possible developments include: - Formal design reviews similar to code reviews - Design tools that identify inconsistencies like code linters - Open-source design patterns and shared UX standards - This approach could make collaboration more systematic and help establish common practices for user experience and information design. ## Ethics and Designer Responsibility - Designers are encouraged to recognize the influence their work has on people’s behavior and decisions. - UX choices should be evaluated for their ethical consequences, not only their usability or business value. - The broader prediction is that designers will become more accountable for how products affect users and society. ## Risks of Overreliance on Design Systems - Standardized systems such as Material Design and Microsoft’s Fluent Design may become increasingly dominant. - One concern is that designers will adopt these systems automatically without questioning whether they fit a product’s users or context. - Design systems can improve consistency, but they should not replace independent judgment or thoughtful problem-solving. ## Convergence of Design and Development Tools - Design and development tools are expected to become more integrated and centralized. - Technologies such as CSS Grid, custom variables, Vue, and React could make implementation more efficient and flexible. - Greater efficiency should create more time for designers to focus on responsible design and more inclusive experiences. - The article frames technical progress as valuable only when it supports better outcomes for users. Overall, the predictions recommend treating accessibility, ethics, and inclusion as core design requirements—not optional trends—while using collaboration frameworks, design systems, and new development technologies thoughtfully.

Read original(opens in new tab)
figma2 min readCurated summary

Design conference Vectors sold out in two days | Figma Blog

Vectors, a new San Francisco design conference, sold out 300 tickets in just two days because it offered perspectives missing from conventional tech events. Rather than focusing on business trends, its program addressed vulnerability, unconscious bias, and inclusion. Organizer Gabriel Valdivia argues that diverse experiences improve design and that people with privilege should actively invite perspectives unlike their own. ## A Different Kind of Design Conference - Vectors was created as an alternative to typical technology conferences centered on “thought leaders” and commercial design topics. - Its talks focused on: - Vulnerability - Unconscious bias - Divergent perspectives - The event attracted enough interest to leave 150 additional people on the guest list. ## Diversity as an Invitation, Not a Label - Organizers deliberately avoided presenting Vectors explicitly as a “diversity” conference. - Traditional diversity initiatives can become limited to people who already identify with the issue. - Valdivia wanted people who were not already concerned about diversity—especially white men in tech—to attend and reconsider how they use their influence. - The goal was for privileged attendees to understand the practical value of including different perspectives. ## Experience Shapes Design - Valdivia describes his Cuban and Costa Rican background, including working low-wage jobs after immigrating to the United States. - Experiences such as cleaning car dealerships, working in a call center, and waiting tables exposed him to challenges many technology leaders may not have encountered. - He believes these experiences developed resilience and provide useful insight in product design. ## Small Inclusive Choices Create Value - Valdivia argues that products inevitably reflect their creators’ backgrounds. - Because many products disproportionately reflect white male perspectives, other useful viewpoints can remain overlooked. - At a previous startup, he added Spanish subtitles to a product video, making it accessible to Spanish-speaking audiences. - Such seemingly minor decisions can significantly expand a product’s usefulness and reach. Vectors’ success suggests that designers and technology professionals want more than conventional industry perspectives. Building better products requires actively including people with different backgrounds and turning their experiences into concrete design decisions.

Read original(opens in new tab)