Code for America

Lead UX Writer, Freelance

TL;DR

Following the conclusion of usability studies and survey analysis, I teamed up with our UI designer and a new UX writer to enhance the copy and microcopy. Using Figma for design and Grammarly for editing, we refined the website content to align with our users' natural language. At an all-hands meeting, we presented a before-and-after comparison of our Figma prototype, showing marked improvements in readability and coherence. This collaborative process was well-received and allowed the team to integrate the new copy into the design seamlessly.

Situation

Following the conclusion of usability studies and survey analysis, I collaborated with a UI designer and a newly onboarded UX writer to enhance the clarity, inclusiveness, and readability of the copy and microcopy on a project. Our primary tools were Figma for direct edits and commentary and Grammarly for assessing readability and coherence improvements.

Task

I aimed to refine the existing website content to meet our users' natural language needs while integrating the changes into the design process.

Actions

  1. I edited the copy and microcopy directly in Figma, making changes such as replacing technical jargon with user-friendly terms and restructuring sentences for better flow. I provided explicit annotations and rationale for each recommendation, such as 'This change improves readability and aligns with our users' expectations' to facilitate team understanding and collaboration.
  2. I engaged the new UX writer in this process, guiding them to apply similar changes and annotations. Their role was crucial in ensuring consistency and a shared understanding of the project goals, as they brought a fresh perspective and expertise in user-centric writing.
  3. We utilized screenshots of the prototype with detailed comments to exemplify our commenting methodology, enhancing team visibility into our thought process and decisions.
  4. I compiled a deliverable for an all-hands meeting showcasing the before-and-after states of the Figma prototype, with red boxes highlighting issues and blue boxes detailing the solutions applied based on our research findings.

Screenshot of comment-based UX writing collaboration in the Figma prototype.
Example of the prototype "before and after" metrics.

Result

The modifications significantly improved readability, coherence, and style, as quantified by Grammarly scores. This, in turn, led to a more user-friendly website, as users found it easier to navigate and understand the content. The Figma commentary method facilitated a transparent and collaborative revision process, allowing the entire team to follow and understand the rationale behind each change.

Outcomes

The presentation of the before-and-after comparison at the all-hands meeting demonstrated the effectiveness of the changes, receiving positive feedback from the team. The modifications made directly in Figma ensured a smooth transition for the designers, empowering them to adopt the new copy seamlessly and aligning the project closer to our users' needs. When my contributions to the project ended, the team was conducting usability tests on the revised prototype to validate the impact of these changes on user experience.