Generative AI Alt Text

NDA Note: Certain details may have been omitted or modified to honor confidentiality agreements.

Brief

About Sprout Social

Sprout Social is a social media management platform that helps businesses streamline their social media efforts through tools for publishing, analytics, engagement, and customer care.

Situation

Sprout Social’s enterprise clients struggled to dedicate the time needed to manually input ALT text for accessibility, leading to a significant number of posts without inclusive descriptions. This not only created accessibility gaps for visually impaired users but also hindered DEI goals, engagement, and brand reputation.

Task

The AI Zone needed to explore solutions for automating alt text creation while addressing concerns about the accuracy and contextual relevance of AI-generated descriptions.

Actions

As the primary designer, I collaborated with designers from other product teams, the AI team, Product and Engineering to incorporate Sprout Social’s cross-platform AI Assist feature into alt text creation workflows. I also led the design strategy to increase visibility of the alt text action.

Results

Customer use of alt text in social media posts increased by 81%.

Tools

Figma, FullStory, Mixpanel, ProductBoard, Slack, Jira

Research - Discovery - Market

Given the project's tight timeframe, I had limited opportunities for in-depth discovery research. Fortunately, Sprout Social already utilized AI Assist features in other areas of the app, with plans for global expansion. This existing foundation, combined with insights from a brief competitive analysis of brands like HeyOrca!, provided a clear direction for designing a pattern that aligned with the project’s goals while leveraging proven approaches within the platform.

Design Iterations

Version 1: AI Assist Caption Pattern

My first solutions used the Compose Caption feature as a foundation for initial AI Alt Text designs. This was to maintain consistency with the brand and user experience in other areas of the Compose page. However, I realized that providing multiple suggestions—key for captions—was less necessary for Alt text and took up too much space in the modal. This led to a strategic shift to optimize the design for simplicity and efficiency.

Version 2: Smart Inbox Pattern

I then identified the Smart Inbox Reply feature as a strong example and used it as a foundation for my designs to ensure consistency in both the brand and user experience. However, this approach came with challenges—specifically, the limited space in the alt text modal within the Compose workflow.

Version 3: Alt Text Icon Pattern

Building on the latest AI Assist components in the Smart Inbox designs, I explored solutions that kept users within the image-editing workflow, rather than redirecting them to a modal. To achieve this, I considered leveraging the existing alt text icon on images, which was already familiar to users before this project. This approach also aligned with my later exploration of making alt text actions more discoverable.

However, this solution presented challenges: most icons in the Compose workflow did not initiate actions when clicked, and there were concerns among product managers and designers about the accessibility and clarity of the alt text icon.

Feature Discoverability

I collaborated with the AI Zone Engineering team and Product Manager to strategically explore ways to make the alt text action more discoverable, focusing on improving usability.

Usability Testing

Interviews with customers were conducted as part of usability testing to evaluate the outputs generated by the AI model intended for creating alt text, ensuring they met accessibility standards and user expectations.

Decisions From Testing

Key insights from interviews with customers regarding AI-generated alt text included:

Content Guidelines:
1. Generally around the length of a tweet.
2. Neutral Descriptions:
3. Avoid mention of race or skin tone unless contextually necessary.
4. Use general terms
AI Output Expectations:
1. Avoid incorrect assumptions or oversimplifications.
2. Provide text users can easily modify
Feature and Platform Considerations:
1. Avoid fully automated alt text similar to Meta’s approach.
2. Consider making alt text a required setting
3. Explore options for editing flexibility

Final Design

The final designs for enhancing discoverability and generating alt text strategically built on existing patterns, including the footer pattern for Compose panels, while optimizing the available space for the feature. The feature was successfully launched on Global Accessibility Awareness Day 2024, receiving positive feedback from customers, highlighting its value and impact. You can learn more about the AI Assist Alt Text feature in Sprout Social's Help Center.

Reflection

Reflecting on the AI Assist Alt Text project, my collaboration with the engineering team was key to shaping the final design. The team's visual representation of the AI model and its user flows helped clarify how users would interact with the feature, from accepting the first-generated text to requesting a new version. One challenge we identified was the occasional lag in generating Alt text, and it became clear that triggering the text generation immediately upon image upload would improve the user experience.

I spent considerable time exploring various use cases, especially considering situations where Alt text might not be generated. It was important to ensure there was a clear design solution for these scenarios, offering users a fallback option. The bug bash was a valuable experience, allowing me to work closely with engineering and quickly address issues that arose during testing.

Collaborating with the Global Zone team, who oversaw several AI Assist features, helped align the project with broader strategic goals. The feature’s success was evident in the results: a significant increase in unique customers using Alt text, high adoption and usage rates, and strong engagement from higher-value customers. This project reinforced the importance of cross-functional teamwork and iterative design in delivering impactful solutions that meet both user needs and business objectives.