Add a Feature
AI Captions for Instagram
Project Overview
Project Type: Add a feature to an existing app Team: Independent project with feedback from mentor and peers
Tools: Figma, Optimal Sort, Miro, Zoom Role: UX/UI design, branding
Context:
Instagram, a leading social media platform, continues to innovate by introducing new features to enhance user experience. However, one significant gap in its offerings is the lack of a native captioning feature for Instagram stories. Additionally, the automatic captions in the feed and reels often obscure important on-screen information, impacting readability.
Problem Identified:
The absence of native captioning in Instagram stories presents accessibility challenges, particularly for users who rely on captions to understand content. Furthermore, the automatic captions in the feed and reels often interfere with on-screen visuals, diminishing the overall user experience and making content difficult to fully comprehend.
Research
Research Objectives
Understand how the lack of native captioning in Instagram stories affects accessibility and user engagement, particularly for users who rely on captions for content comprehension.
Investigate how automatic captions in the Instagram feed and reels interfere with on-screen information and evaluate user perceptions of the display and readability of current captions.
Explore user preferences for managing and customizing captions, focusing on options to edit, toggle, and adjust appearance to enhance user control and accessibility.
Competitive Analysis
What’s this?
Assessing competitors' products to evaluate their UX and UI design. It helps identify strengths, weaknesses, and opportunities for improvement, guiding your own design by learning from what competitors do well or poorly.
For my competitive analysis, I examined TikTok, YouTube, Snapchat, and Instagram, all of which offer some level of accessibility features, though there’s room for improvement across the board. While some platforms have specialized features, many lack comprehensive support for essential accessibility options like alt text, color contrast adjustments, and customizable fonts. Additionally, certain accessibility tools are not readily available or are hidden behind paywalls, limiting inclusivity for all users. This analysis highlights the gaps and opportunities to enhance accessibility across social media platforms.
Key Takeaways
Inconsistent Accessibility Support: While all platforms offer some accessibility features, there is inconsistency in the availability of key features like alt text, color contrast adjustments, and font options. Some platforms support these, while others do not, leaving gaps in usability for individuals with visual impairments.
Hidden Accessibility Features: Certain platforms place accessibility tools behind paywalls, limiting access to essential features for all users. This creates a barrier to inclusivity and reduces the effectiveness of these tools.
Opportunities for Improvement: Although some platforms offer specialized accessibility features, such as TikTok’s AI-generated captions, these tools can still be optimized. Improving the user experience by making accessibility features more intuitive and widely available would greatly enhance inclusivity.
Need for Universal Standards: The lack of a consistent, standardized approach to accessibility across platforms highlights the need for universal best practices. Implementing comprehensive, built-in accessibility features without restricting access could set a new industry standard.
User Interviews
I conducted one-on-one interviews with five Instagram users aged 28 to 43, using structured questions and open-ended responses to gather insights on their experiences and accessibility needs. The interviews revealed that captions are essential for fully understanding and engaging with content, especially for users with hearing impairments or auditory processing issues. Participants expressed frustration when captions were missing, highlighting the need for accurate, customizable captions to improve accessibility and user experience on the platform.
Key Takeaways
Captions are crucial for full engagement, especially for users with hearing impairments or auditory processing issues.
Missing or inaccurate captions lead to frustration and a diminished user experience.
Users prefer customizable captions that allow control over appearance, such as font size, color, and placement.
Seamless integration of captions into Instagram’s story and post creation process is highly desired.
Captions enhance engagement metrics, leading to more likes, shares, and comments, improving both creator and viewer interactions.
Personas
What’s this?
Personas are crucial as they offer a human-centered view of target users, helping designers create products that better meet user needs. Developed through interviews, research, and data analysis, personas represent common user types by reflecting their goals, challenges, and behaviors.
How might we?
What’s this?
"How Might We" (HMW) statements are crafted from insights gathered during user interviews, research, and observations. By identifying key challenges or pain points, these insights are reframed into open-ended, solution-focused questions beginning with "How might we..." This approach helps to inspire innovative ideas by turning problems into opportunities for improvement and exploration.
How might we design a captioning system on Instagram that intelligently places captions without covering important visual content, provides customization options for users with visual impairments, and ensures that all videos are accurately captioned to help users fully understand and engage with the content, fostering a more inclusive community?
How might we create a seamless and customizable captioning feature on Instagram that allows users to understand video content without sound, enhancing their viewing experience in any environment?
How might we design a captioning system on Instagram that intelligently places captions without covering important visual content and provides customization options for users with visual impairments?
Design and Prototype
What’s this?
A user flow is a detailed diagram showing the user's journey to achieve a goal, including decision points and alternative paths. Based on user research, it helps designers understand navigation patterns and identify potential bottlenecks or friction points.
User Flows
For the Instagram captions feature, I developed user flows that guide users through scrolling their feed, easily identifying the CC button to enable captions, and modifying the caption settings through a menu. This menu allows customization of font style and background color, enhancing readability and accessibility.
Low- Fidelity Wireframes
For my low-fidelity wireframes, I used Instagram screenshots to visually represent where captions could be placed and where the CC button would be located. I highlighted the current issues with captions overlapping, which restricts content visibility, and sketched out a rough menu for users to customize caption options like font and background color. This approach helped visualize potential solutions and set the stage for more detailed iterations.
What this?
Basic, rough sketches focusing on layout and structure without detail. Used early in the design process to explore ideas quickly.
High-Fidelity Wireframes
What’s this?
High-fidelity wireframes are detailed, interactive mockups that closely resemble the final product. These wireframes include finalized design elements, such as precise typography, color schemes, and imagery. They are used to showcase the app's visual identity and overall user experience. Based on user feedback from earlier stages, the design has been refined to improve usability, ensuring that navigation and functionality are intuitive and aligned with user needs.
The high-fidelity wireframes for the Instagram captions feature focused on improving accessibility and usability by integrating a clear CC button to turn captions on and off. A menu was added to allow users to customize font and background colors, addressing issues like caption overlap on content. The design aimed to seamlessly fit within the existing Instagram interface, creating a more visually appealing and accessible experience for users.
What’s this?
User testing is a process where real users interact with a product or prototype to identify usability issues and gather feedback. It helps understand how users experience the product, ensuring it meets their needs and expectations. Feedback from user testing is analyzed and used to refine the design, addressing pain points and improving the overall user experience to better align the product with user needs.
UI Interactions
User Testing
Remote moderated usability testing was conducted to evaluate the ease of turning captions on/off and adjusting caption settings for Instagram's new AI-generated captions feature. Users were tasked with completing three key actions: turning captions on, adjusting settings, and turning captions off. Success metrics included task completion rate, error rate, time on task, user satisfaction, and ease of use ratings.
Iterations
Key changes were implemented based on user feedback, such as repositioning the caption illustration box, which was often mistaken for a button, and aligning the color picker graphic with other options for better usability. A suggestion to add an indicator for when captions are active was noted, along with instant feedback when interacting with the caption settings menu. The overall flow was adjusted to ensure a more intuitive experience in line with Instagram's existing interface.
Key Takeaways
What’s this?
Iteration is the process of repeatedly refining and improving a product, design, or solution based on feedback and testing. Each cycle of iteration involves making adjustments, testing the changes, and evaluating the results to move closer to an optimal outcome.
Clear CC Button: The button for toggling captions was intuitive, but users recommended adding an indicator to show when captions are active.
Confusion with Illustration Box: Half of the participants mistook the black example box for a button, highlighting a need for better visual cues or positioning.
User Satisfaction: Most users were satisfied with the ease of toggling captions and adjusting settings, and they appreciated having the caption feature readily accessible.
Interface Alignment: Recommendations included adding instant feedback when clicking elements and aligning the color picker with other menu options for consistency.
