Case study: UX writing for a chat app

Please note: The Hipchat app is no longer offered.

I was one of two content designers on a product that had multiple app clients in self-hosted and cloud-hosted solutions. There was far more need for our expertise than we had capacity.

What was the problem?

The Hipchat chat product offered a web app, an iOS app, an Android app, a Mac app, a Windows app, and a Linux app. There was more need for content design and UX writing than my colleague and I had capacity to support.

We needed to find ways to partner with UX designers to make the most impact and enable others to create quality content that was on-brand, clear, and concise.

Who was involved?

PRODUCT TEAM

  • Dozens of software engineers

  • Multiple product managers

  • Four UX/product designers

  • John Collins (content designer)

  • Content designer

  • Quality assurance engineers

  • Product marketers

How was the problem solved?

  • My fellow content designer and I worked closely with product managers and UX designers to focus on the most impactful work.

  • My fellow content designer and I worked to train and enable UX designers and software engineers to write UI strings.

  • UX designers and content designers often co-designed new features.

  • UX designers and content designers held joint “sparring” sessions to improve our work.

What was the outcome of this project?

  • Myself and my fellow content designer were highly regarded and frequently sought out for our expertise.

  • Our UX designers and engineers often made the first (sometimes the only) pass at UI strings.

  • I left the team after a few months for a new opportunity at the same company.

  • The company pivoted from Hipchat to an entirely new-from-scratch chat solution before shutting both products down and exiting the chat space entirely.

“Scrubbed” notifications

To meet the requirements of government agencies and companies in restricted agencies, we needed to add organization-managed functionality that would remove sensitive information from notifications on device or in email. Internally, we called this feature “scrubbed notifications,” and we wrote the settings page to talk about “notification previews.”

A developer wrote the first version of the settings page, in-app notifications, and email notificaitons. I reviewed and refined it, probably focusing most of my time on the settings page.

Screenshot showing administrator settings with a section about notification previews
  • Screenshot of "unscrubbed" 1-1 notification on iOS

    Unscrubbed 1-1 notification (iOS)

  • Screenshot of "scrubbed" 1-1 notification on iOS

    Scrubbed 1-1 notification (iOS)

  • Screenshot of "unscrubbed" 1-1 notification in email

    Unscrubbed 1-1 notification (email)

  • Screenshot of "scrubbed" 1-1 notification in email

    Scrubbed 1-1 notification (email)

  • Screenshot of "unscrubbed" room notification on iOS

    Unscrubbed room notification (iOS)

  • Screenshot of "scrubbed" room notification on iOS

    Scrubbed room notification (iOS)

  • Screenshot of "unscrubbed" room notification in email

    Unscrubbed room notification (email)

  • Screenshot of "scrubbed" room notification in email

    Scrubbed room notification (email)

Complex behind-the-scenes upgrade

  • Series of 3 Android screen mockups for a required update

    Product designer's first draft (Android)

    When we needed to change our user authentication service behind-the-scenes, it required a tricky dance for users to update the app, then log out and back in.

    The text here was the first draft written by a product designer.

  • Series of 3 iOS screen mockups for a required update

    Product designer's first draft (iOS)

    All chat app clients required an app update, and the process was the same for all of them.

    The text here was the first draft written by a product designer.

  • Series of 3 Android screen mockups for a required update

    Final draft (Android)

    We went through numerous iterations of UI text for the messaging about this complex update. Our goal was to be reassuring and concise but clear about the required steps.

    This is the final version that went to customers.

  • Series of 3 iOS screen mockups for a required update

    Final version (iOS)

    We wanted to reuse as much of the UI text as possible and have consistent messaging across all app clients. Largely we achieved that, but we did have a slight variation due to the iOS Human Interface Guidelines and the difference in capabilities between iOS alerts and Android alert dialogs.

    This is the final version that went to customers.

Error message audit

This isn’t about the copy I wrote. Instead, it’s about my process. At some point, I conducted an audit of error messages, creating a table to keep track of a variety of considerations.

My goal here was to understand what was happening to cause the error condition so that I could write a helpful error message.

In my experience, software engineers will sometimes write generic messages that aren’t particularly helpful. Sometimes this is because it’s not truly possible to know what’s going on, and there’s no action a user can take to resolve the problem. Sometimes, though, it’s just that engineers aren’t UX writers.

When I undertake an audit like this, my goal is primarily to serve users. To reach that outcome, I may suggest UX changes to avoid the error state or fail gracefully. In other cases, that may not be practical and the solution is better error messages.

Screenshot of a table in Confluence with columns about error conditions, app actions, user actions, links to user stories, and notes.

Administrator settings updates

  • Screenshot of web-based administrator settings

    Administrator settings (original)

    The administrator settings had some information architecture problems that made it hard to update when we had some new functionality to add to the settings.

    Note all the “Save” buttons, the lack of clarity in “group email domain” and “default moderator visibility,” and the grammar issues in the “default moderator visibility” description.

  • A mockup of changes to an updated administrator settings page

    Administrator settings (recommended mockup)

    The information architecture problems were so fundamental that entirely fixing them was out of scope, so this mockup reflects some minimal changes to the UI text and the interface design itself to improve usability and accommodate the new settings.

    The “features” tab became the “preferences” tab, and the greatest differences between the two versions comes in the bottom half of the settings options.

    I’m not sure how much of this work was completed before the company pivoted away from this product.

Competencies demonstrated

Continuous improvement

  • Participated in “sparring” sessions with product and content designers.

  • Conducted audits to find UI text that I could improve.

  • Worked with product managers and product marketing managers to establish some app store release notes style standards.

Building
networks

  • Earned trust with developer who would seek out my expertise.

  • Learned to partner directly with product designers to design features together.

Influencing

  • Worked to enable product designers and software engineers to write UI content since content design bandwidth was limited.

  • Taught other content designers about writing for mobile apps.

  • Taught other content designers about Material Design and iOS Human Interface Guidelines.

  • Taught product managers and product marketing managers about app store optimization.

User
focus

  • Obsessed over making all UI text as clear and concise as possible.

  • As part of the product design team, I could influence UX design too.

Teamwork

  • Functioned as a core part of several truly cross-functional teams.

  • Participated in coordination activities across content and product design.

  • Shared learnings with other product teams.

Previous
Previous

Case study: UX writing for Rosetta Stone mobile apps