Marcelo Paiva

Work

Things I designed and built. Each one names what I decided and what I rejected — and, where I measured it, what changed once people used it.

  1. 2024–present

    ClearCo: rebuilding a research and design team for agents

    Agents write a serious share of our code, which only works because the material they draw from is readable, testable and checkable. I built that first, and I am still rebuilding a traditional research and design team into one that ships production code through the same gate as the engineers.

    Head of UX and accessibility — product, design and engineering; one of the leads of the AI transformation

    The talent profile running inside the prototype harness. A review bar across the top carries the screen name, a Handed off badge at version 1.0, and two dropdowns that change the whole application underneath it: persona, set to Rec Practitioner with four apps, and tenant, set to OmniFlow Logistics. Beside them sit buttons for comments and UX notes. Below that is the product itself — a left rail of Workspace, People, Hire and Settings with Design System at the foot, an Ask me anything search field, and the profile of Priya Sharma, Senior Manager of Transportation Operations, reporting to a VP of Operations marked Vacant. Seven tabs run from Overview to Events. An AI insights card reduces seven point four years in role and an Outstanding review to three chips, then offers two questions to put to the assistant. A CoWorker panel on the right opens with What's up next, Jane? over four suggested actions and an Ask anything field.GitHub's merge box on a pull request, every row of it green. A tick beside All checks have passed, with one successful check counted underneath. A second tick beside No conflicts with base branch, and under that the line saying merging can be performed automatically. A green Merge pull request button waits at the bottom, next to an offer to do the same thing from the command line.

  2. 2025–present

    W3C: reviewing standards before they harden

    Invited Expert on the Accessible Platform Architectures Working Group, which reads emerging web specifications for their effect on disabled people — while those specifications can still be changed.

    Invited Expert, spec review

    An open issue on the W3C's AI accessibility repository, titled Include People with Disabilities as AI Content Creators (Not Only End Users), number 27, opened by mpaiva on February 11. It says the current draft of Accessibility of Machine Learning and Generative AI mainly discusses disabled people as end users of AI systems and does not clearly address them as creators, and that inaccessible AI development tools may exclude them from new professional and economic opportunities. A section headed Why This Matters lists AI-assisted coding, design and prototyping, content creation and real-time editing.An issue on the W3C's WCAG 3 repository, titled Proposal for a WCAG Content API, number 84, opened by mpaiva on May 20, 2024 and now closed. It opens with background: WCAG 3.0 is a chance to give programmatic access to the guidelines. The proposal is an API that lets the community read WCAG content from one authoritative source. Five key features follow: guideline retrieval, search, updates and notifications, integration with tools such as Figma, Penpot and Tokens Studio, and design recommendations available as design tokens. The sidebar shows two assignees and a label reading Management: Please Review.An open issue on the W3C's ARIA Authoring Practices repository, titled Using aria-owns with late-mounted descendants, number 2771, opened by mpaiva on August 3, 2023. It proposes an example explaining how to use aria-busy to track the status of descendant elements tied to their ancestors through aria-owns, cites two ARIA Working Group issues that asked for clearer language, links a draft with a code example, and asks for guidance. Replies follow, one noting that the ARIA Authoring Practices Task Force discussed it.

  3. 2026

    Letting an agent do the recruiter's job, with the recruiter's permissions

    A proof of concept that made an HR platform operable by an AI agent. It is an MCP server of over 160 typed tools on the existing REST API, and a streaming chat client that answers in real product components rather than paragraphs. Working on day one; the whole recruiting lifecycle in nine working days.

    Head of UX and accessibility — led the team on server, client and security model

    The answer to "show me the open requisitions", as it renders in the terminal: "13 open requisitions found", then a table of role, department, office, days open and candidates. Senior Software Engineer, Marketing Manager, Product Manager, Content Marketing Specialist, DevOps Engineer and HR Generalist, split between New York and Austin, most open 25 days with ten candidates each, and a line saying seven more follow.One requisition's pipeline, asked for by name. The Senior Software Engineer role has been open 25 days with one opening and ten applicants, none interviewed, no offers and no hires. Underneath, the grade distribution shows nine candidates ungraded and one graded A.The organization-wide recruiting dashboard. Thirteen open requisitions, 130 candidates, three interviewed, three offers and one hire, averaging 23 days open. The funnel shows 2.3 percent of applicants reaching interview and 0.8 percent reaching hire. A last table splits the workload across three recruiters by requisitions, candidates, interviews, offers and hires.A candidate's activity timeline, newest first. They applied on March 24 by manual entry, were graded A the next day, and three minutes later were moved from New Applicants to Screen. A footnote says every action was taken by the HR admin account the agent was signed in as.

  4. 2026

    Help that knows which screen you are on

    A week-long proof of concept that put help articles beside the screen they describe, without touching the product's code, and found on the way that most of the articles did not exist. So an agent wrote them, as drafts only, through an MCP server with no way to publish.

    Head of UX and accessibility — led the team on the extension, the MCP server and the authoring agent

  5. 2026

    CCDS: a design system that ships itself

    A running prototyping sandbox built on the real component package and the real tokens, with enforced token tiers and component contracts — so a prototype is made of the same material as the product. Built in two weeks; forked by someone else two days after I showed it.

    Design system architecture, component design and implementation

    The sandbox running. A purple prototype bar across the top carries a persona switcher set to "HRBP — 7 apps", with buttons for comments, UX notes and hiding the bar. Under it sits the full application chrome: an icon rail for Workspace, People, Hire, Develop, Learning, Reporting and Settings, a Design System panel listing Prototypes, Showcase, Tokens, Components, Organisms and Patterns, and a directory of seventeen prototypes as cards — each naming its app, its status, the personas it is for, who last touched it and its version.The component catalog, which explains its own organization before it lists anything: components are single building blocks, patterns are how you combine them, organisms are components composed into screen-level sections. Seven category cards follow — Actions, Inputs, Selection, Navigation, Data Display, Feedback and Overlays — each naming what it holds.The color tokens, under a rule that reads "Never apply raw hex — reference the token so light and dark schemes work automatically". Each row pairs a letterform swatch with the role it serves and the custom property that carries it: default for body and headings, secondary for labels and metadata, then placeholder, disabled, link and error, named as --ccui-color-text-default and so on down.

  6. 2026

    Putting WCAG where the code gets written

    Open-source accessibility tooling for AI coding environments: WCAG in the statusline, WCAG as an MCP server, and contrast enforcement inside a coding agent runtime. Plus a cockpit that plans, hires and verifies a team of agents, documented on one real run of nine checks, fourteen minutes and $1.98.

    Open source — author and contributor

    The approval gate, before a single agent is hired. The mission has been drafted to a file and the interface asks whether to proceed as written, offering four numbered choices: proceed and let the team build exactly what the mission file says; pick the poem yourself instead of letting the team choose; amend the scope first to change success criteria, constraints or non-goals; or type something else. A fifth option opens a conversation about it. The footer reads enter select, up and down navigate, escape cancel.The end of the same run. The lead reports the mission complete, names what was built, and states that all nine success criteria were verified twice — independently, and both before and after the patch — by the verifier, listing the evidence files written along the way. In the bottom right the verifier's own pane reads "9/9 pass, sign-off sent to lead". A message has gone to the human.A terminal statusline carrying a WCAG tip. The top row is the ordinary status: the branch, the folder, the model in use, and the context at 55K or 27 percent. Underneath, in amber, sits success criterion 2.1.1 Keyboard quoted in full — that all functionality must be operable through a keyboard interface, without requiring specific timings for individual keystrokes.

  7. 2026

    Our vendors' accessibility is our accessibility

    New hires sign onboarding documents in a third-party signing interface, often on a phone, mid-shift. So I forked it and fixed it, in a language I do not write daily.

    Accessibility contribution, open source

    The fork on GitHub, mpaiva/docuseal-a11y, public and forked from docusealco/docuseal. A banner says the branch is 8 commits ahead of the original and 745 behind. The latest commit, by mpaiva and claude, reads Update accessibility progress: Phase 1 now 86% complete. In the file list, the app folder's last commit is Add keyboard support to custom web components, and the spec folder's is Add Phase 1 accessibility infrastructure and semantic landmarks. The language bar shows Ruby, Vue, HTML and JavaScript.The progress file kept in the fork, accessibility-implementation-progress.md, under a commit reading Phase 1 now 86% complete. It is headed Accessibility Implementation Progress, with a session summary dated 2026-02-09 and a list of completed Phase 1 tasks, each ticked. Task 1 set up accessibility testing: the axe-core-rspec gem, a spec/accessibility directory, WCAG test helpers and a testing guide. Task 2 added semantic landmarks to the layouts: a main landmark, a labeled navigation, and a skip link visible on keyboard focus, satisfying WCAG 2.4.1 Bypass Blocks.

  8. 2024

    WCAG Plugin for Figma

    A free, open-source Figma plugin that puts WCAG guidance, annotation cards and accessibility utility tokens inside the file where design decisions actually get made. 10,500 users on Figma Community, and one feature they could not find.

    Designed, built and shipped

    The plugin on the Figma Community, credited to Marcelo Paiva and listed under Accessibility tools. It shows 653 likes and 10.5 thousand users beside an Open in Figma button. The cover reads "WCAG Plugin — Search and drop accessibility cards into your design files", over a large outlined accessibility figure, with a note that it passed a thousand users in under a week. A filmstrip of five more screens sits below it.

  9. 2023–2024

    Data about disabled students, in a tool they could not use

    An accessible reporting system for IDEA data at the Rhonda Weiss Center, built with 80 stakeholders. They included the disabled people the data is about, who had rarely been in the room when these tools were designed.

    Accessibility and user experience lead

    The hero banner from the redesign. On the left, a portrait of a smiling young man with curly hair on a deep blue ground, tagged "I'm dyslexic." with a second line under it, "I don't do well with walls of text." On the right, the headline "It's about people, not compliance." in yellow and white, a line saying accessible experiences involve empathizing with diverse users' needs, not just checking boxes to meet standards, and one outlined button.Ten phone screens of the hero banner arranged as a collage, in five staggered columns that run off the top and bottom of the frame. Every screen carries the same headline, "It's about people, not compliance.", and a different portrait with that person's own tag: "I'm dyslexic.", "I have leukemia.", "I have down syndrome.", "I have low-vision.", "I have limited mobility.", "I am Deaf." on two different people, "I'm blind." and "I have ADHD." Some screens put the portrait above the words and some below.The top of the redesigned home page. A blue header carries the Rhonda Weiss Center logo, a Skip to a section button, and English, Search and Accessibility controls. The hero shows the same portrait beside "It's about people, not compliance." and a button reading Generate an accessible report. Under the navigation a white column begins: "Improving state capacity to make data accessible."Five page templates side by side at small size, all built from the same header, white content column and dark footer: the home page, the About page with its photographs and partner logos, the Team page as a long list of people, the Upcoming Events list, and the Download Assets page with presentation cards.The Events page in three states, side by side. Upcoming Events lists dated cards for January 25, one of them expanded to show speakers, learning objectives and a Sign up button. The second is the empty state: "There are no events scheduled at the moment," with two links out. The third is Past Events, the same cards with thumbnails, one expanded, and pagination underneath.Three search screens. Site-wide Content has a search field, recent searches as chips and two recently visited items. The results page reads "888 results containing autism" over a long list of dated results with pagination. The third is the ADAPT Assistant, a panel with a blue header and a close button, tabs for New search, Trends and Assistant, and a heading with two buttons.Ten of the section components every page is assembled from, in three columns: a section opener with eyebrow, heading and two buttons; an image with its text alternative printed beneath it; an author block; text beside an image; a pair of cards; a data card with two bars; a quotation; a purple banner; the newsletter sign-up; and the footer.The header and navigation at large size. The blue header with the logo, Skip to a section, English, Search and Accessibility. The primary navigation with Home underlined as current, and a second row of tabs for Articles, Webinars and Downloads. Below, a list item expanded and outlined in green to show keyboard focus, with a Primary Action button and a Secondary Action link, beside four skip-to menu entries each marked with a flag icon.The ADAPT page. Under the header, "Our Latest Product, Introducing ADAPT" describes the Accessible Data Analysis and Publishing Tool as a platform for IDEA data reporting, made to be accessible under Section 508 and WCAG 2.2. Two buttons follow, then tabs for ADAPT, Demo, Get started and Documentation, and a second heading: "Make your IDEA reports accessible with ADAPT, our newest product."Two pages at reading size. On the left, the Team page: "Meet our leaders, innovators, and world-class educators," then people listed with a small portrait, a name and a biography. On the right, Download Assets: a filter by asset type, a search field, and a list of presentations each with Download PowerPoint and Download PDF buttons.A data card with seven numbered notes beside it, under the heading What makes this chart accessible. One: the heading and summary state the finding in words, that 7.3 million disabled students made up 15% of public school enrollment in 2021-22. Two: Explain, a switch that shows a plain-language explanation. Three: Glossary, a switch that shows a definition under each term. Four: Data, the same numbers as a table. Five: Read, which plays the explanation aloud. Six: each bar has its percentage and count written beside it, 15% and 1,095,000 for students entering IDEA programs, 10% and 730,000 for students exiting. Seven: the source, Pew Research Center, as text.The home page of the Rhonda Weiss Center for Accessible IDEA Data. A blue header carries the center's name and three large buttons: Skip to a section, Accessibility and Search. Below the navigation, a photograph of a man in a wheelchair talking with a colleague at a table sits beside the words It's about people, not just compliance, and a line saying accessible experiences involve empathizing with the varying needs of all users, not just checking boxes to meet standards. Under it the page reads Improving state capacity to make data accessible.

  10. 2023

    Great Place To Work Hub: turnover and belonging, read together

    The future vision for reading an organization's demographic record and its belonging survey side by side — so that a turnover number becomes a sentence about a specific group of people.

    Product design lead

    The project's Figma board, titled Aspire 2022 Great Place To Work Hub, dated November 2022. A row of specification frames sits above the screen designs they describe, covering the hub and its Belonging, Hiring, Turnover and Promotions modals.The hub landing screen inside UKG, with a Great Place To Work certified badge and a banner congratulating the user on helping their organization reach the Top 100. A reminders bar along the bottom suggests scheduling a one-to-one, promoting employee resource groups and answering a pulse survey.A People first findings screen. Six scores run from Belonging at 69 up to Pride at 92, color-coded from red to green. A highlighted Belonging card reports that Hispanic or Latinx employees aged 25 to 35 are 90 percent more likely to leave than other groups, beside a turnover-by-age bar chart and a Trust Index dial reading 86.A Your team in a nutshell screen comparing a team against the wider organization across three charts: a gender pie, an ethnicity bar chart, and age versus gender as stacked columns. Each carries a plain-language reading, including that more team members are choosing prefer not to answer.A Smart Insights screen of six cards — Turnover, Promotion, Retention, Equity, Belonging and Pride — each stating one finding in a sentence, such as women aged 35 to 45 being 60 percent more likely to leave, and female employees in technical roles receiving 80 percent of the bonus their male counterparts receive.A Digging deeper screen on the Diversity tab. An area chart shows the share of men, women and non-binary employees at each job level, with women falling from 47 percent of individual contributors to 15 percent of executives. Beside it, an I can be myself around here chart ranks demographic groups by sentiment, with a face icon for each.A Resources screen on the Employee Groups tab, showing an Employee Appreciation Day card with a photo of five colleagues, and a Black Engineers Meet Up card describing a session on architecting with an inclusive mindset.A full-screen Belonging panel. On the left, survey statements such as People care about each other here are plotted on a scale from minus 100 to 100, each with the team score and the benchmark marked in red. On the right, a Take action checklist recommends specific follow-ups.A chart of team composition by leadership level and ethnicity, as three stacked bars. White employees are 33 percent of individual contributors but 71 percent of managers, under a heading stating that diversity among managers needs to increase.A hiring funnel broken down by gender across seven stages, from 326 applications to 8 hires. The male share rises from 60 percent at application to 80 percent at hire, with a note that male candidates are advanced more than 60 percent of the time.A hiring funnel broken down by ethnicity across five stages, from 326 applications to 40 hires. The white share of the pool grows through each stage, with a note that white candidates are advanced 15 percent more often than other groups.Sheets of butcher paper taped across a corner office window at golden hour, a city skyline and a construction crane visible through the glass behind them. The left sheet is an agenda headed Goal: Beta, listing identify users, first time experience, I'm certified or I'm not certified, and my HCM data, with sketch ideas and prioritize five timed at thirty minutes. The next sheet, headed High Trust Practice Areas, is covered in about forty sticky notes grouped into clusters. Two further sheets carry hand-drawn screen layouts, one addressed Hello Julian, this is what we know about your team. Markers and a pack of sticky notes sit on the windowsill.

  11. 2023

    No Latin

    A web app that turns content blocks into an accessible HTML prototype — built to get Lorem Ipsum out of early design, because placeholder text quietly excludes screen reader users from research.

    Designed and built

    The No Latin editor holding three content blocks in priority order. Each block carries a name, a description and an element type: "Your application is in review" as an Alert, "What happens next" as a Section, "Ask about your application" as a Form. Every block has Add, Edit, Clone and Delete controls, and arrows for moving it up or down the order.The section editor open over the page, a magenta focus ring on the description field. Three inputs: a section name reading "Your application is in review", a description saying it tells the candidate the current stage in plain words and the date it last changed, and a dropdown labeled "What type of section is this?" set to Alert.The prototype No Latin generated from those blocks. A black header carries the page title, then three cards in the order they were written: a green-bordered alert reading "ALERT MESSAGE: Your application is in review", a card headed "What happens next", and one headed "Ask about your application". Each carries the description written for it, and the footer reads "Accessible Prototype by No Latin".

  12. 2023

    Sketches

    Paper-stage thinking across recruiting workflows, accessibility tooling and design system navigation — ideas at the point where they are still cheap to be wrong about.

    Facilitation and sketching

    A sketch titled UKG Pro Navigation, comparing three navigation models. The legacy pattern is annotated with scalability, usability and accessibility problems; the design system's common navigation is marked as a paradigm shift for existing users; the proposed solution is a hybrid using left navigation for high-level content and tabs for secondary views.Two sketched screens for recruiting. On the left an applicants list with filters and a row of candidates. On the right a Schedule interview with Joan Smith panel for an accountant requisition, asking who is interviewing, collecting date and time, offering a Cronofy calendar connection, and providing a message field.Three sketched states of a Candidate Cultivation campaign builder, progressing from an empty untitled campaign with one message, to a named Nurture Data Scientists campaign with 39 recipients, to a multi-step sequence with conditions and resend-if-not-opened rules between messages.A sketched Candidate Cultivation screen showing a newsletter series: September, October and November messages chained by send-next-message rules set to 30 days, ending with a resend-if-not-opened rule and 39 recipients.A sketch titled The Designer's Critical Alphabet, digital version, crediting Lesley-Ann Noel PhD. Four phone screens are labeled words view, letters view, add new word with automatic definition, and add question to designer. The letters view shows a colorful A to Z grid.Five phone screens continuing the Critical Alphabet app: adding a word, adding a question, a success screen reading A is for ableism, adding media, and an expanded view offering comment, edit and share.Three phone screens for the Critical Alphabet app showing the commenting flow: an expanded card with comment, edit and share actions, a comments view, and the keyboard open while a comment is typed.Interaction notes for the Critical Alphabet app, drawn as three diagrams with arrows: cards stack as words are added to a letter category, a card expands when tapped with vertical scrolling, and horizontal swipe gestures move between letters.A sketch of the Comunify app, dated June 2021 and credited to Mark, Saïda and Paiva. Four phone screens cover a splash screen, a setup screen asking how the person wants to use the app and about their hearing, and two conversation screens where a deaf user introduces themselves and captures the other person's name.Four more Comunify app screens following a conversation in an airport: opening the keyboard, typing a question about the American Airlines check-in, adding a speaker whose reply is transcribed as take a left to terminal C, and the introduction screen.Two sketched screens for a tool called WTFocus, version 0.1. The left pane lists selectable elements — link, input, select, checkbox, radio button, landmark. The right pane configures a link's label and state, and chooses a screen reader target, voice and speed, with a preview and play control.Two layout explorations for WTFocus. One presents components as a grid with an accessible link panel beside it; the other keeps a vertical element list with the screen reader settings collapsed under the configuration panel.Two nearly identical WTFocus layouts in their empty state, with an element list on the left and an empty Recent panel on the right, used to compare spacing and proportion.A six-frame storyboard for a workshop called Back to the Future, held at Tulane in November 2020. The frames run intro why, ice breaker aging app, activity one ask the future, activity two ask the past, reflection how does this change the way you design, and conclusion resources.

  13. 2019–2020

    UKG: asking 184 customers what they were trying to get done

    A Jobs To Be Done survey of the recruiting customer base, run to find where investment would move satisfaction and where it would not. Sixteen interviews became 201 outcome statements; 184 people rated every one of them twice. Commissioned and co-authored by me.

    UX manager — commissioned the study, co-authored the enterprise analysis

    The cover of the enterprise cut of the study. A teal band across the top carries the Ultimate Software People mark on the left and the word Enterprise on the right. Below it, on a slate field, JTBD is set large in solid teal with RECRUITING outlined beneath. The title reads Customer Satisfaction Survey - Jobs To Be Done, over a rule, and under that two columns: Researchers, naming Rebecca Tremaglio and Marcelo Paiva, and Last Updated, reading March 19, 2020.

  14. 2020

    WTFocus: a focus ring you can check instead of argue about

    A tool for designing focus indicators that tells you, while you are still choosing, whether the one you drew passes WCAG 2.2 Focus Appearance. Built to support a symposium paper that took Best Presentation. Design mine, code my son's.

    Design

    The tool in two halves. On the dark left panel, Focus Styles: color swatches for the ring, the background and the input background, number fields reading width 8 and offset 4, a style dropdown set to Solid, a checked Prefers reduced motion box, and an Apply button. On the pale right panel, Focus Preview: a bar naming SC 2.4.11 WCAG 2.2 Draft with AA and AAA both ticked, then a text input carrying a thick blue focus ring held clear of its edge, and below it a select, a checkbox, a radio, a link, a button and a focus trap toggle.The same tool with a failing style applied. Width is 1, offset is 0, and the color swatch is pale gray-blue. In the preview the SC 2.4.11 bar now shows AA and AAA each marked with an orange cross, and the text input below carries a hairline ring barely separable from its own border.Two sketched screens for a tool called WTFocus, version 0.1. The left pane lists selectable elements — link, input, select, checkbox, radio button, landmark. The right pane configures a link's label and state, and chooses a screen reader target, voice and speed, with a preview and play control.Two layout explorations for WTFocus. One presents components as a grid with an accessible link panel beside it; the other keeps a vertical element list with the screen reader settings collapsed under the configuration panel.Two nearly identical WTFocus layouts in their empty state, with an element list on the left and an empty Recent panel on the right, used to compare spacing and proportion.