Yena Jeong - Motion & Brand Designer
Jackie Jiang - Strategic Design Manager
Tiffany Cruz - Visual Designer
Since 2016, Attentive Mobile has specialized in mobile messaging and marketing automation. The company offers a platform designed to assist businesses in engaging with their customers through personalized text messages and SMS marketing campaigns. Given that this platform is responsible for sending and tracking campaign messages, ensuring the visual appeal, accessibility, and readability of both messages and image assets sent to subscribers is of paramount importance.
Clients reported discrepancies between the images and GIFs they uploaded into the platform and the final text messages sent to phones. These discrepancies encompassed issues such as text legibility, low-quality imagery and audio, discoloration, and the absence of animation in GIFs or videos.
The objective was to investigate the causes of these discrepancies, determine if they varied depending on the Android or iOS software, and implement precautions to maintain visual asset consistency from the moment of upload to delivery to subscribers.
The initial research phase involved conducting a competitive analysis to identify commonly used guidelines among competitors and assess their historical success. Additionally, limitations imposed by the Attentive platform, such as constraints on image/GIF/video file sizes, had to be addressed.
During the research phase, the following key findings emerged:
Direct competitors categorized visual assets for text into three main types: images, videos, and GIFs. They further segmented these based on the use of Android vs. iOS software and different software versions, which influenced the appearance of text message bubbles and image transmission.
Critical aspects of sending and receiving text messages included establishing separate margins, ensuring color contrast compliance, and adhering to animation guidelines regarding duration and style.
Empathic research involving internal clients collected data on visual assets with issues. This data also examined the various steps taken by designers to resolve each problem, whether resolutions were successful, whether clients themselves could address the issues, and whether any issues remained unresolved. Categories were created for issues related to imagery or motion.
After data collection from the design team, various formulas for issue resolution were tested and standardized. The research also explored applications and websites to expedite workflow.
Following extensive trial and error research, a comprehensive procedure for troubleshooting various problems and best practices for sending visual assets over text was documented. A technical writer revised these practices for public access on the Attentive site, providing clients with tips and best practices. These best practices encompassed margin recommendations for different image sizes, color contrast best practices, recommended video and GIF durations, and simple animation style guidelines.
To maintain consistency and ensure access to step-by-step solutions, video recording, written guides, and demonstrations were provided to the design and marketing teams. Figma templates were made accessible, and a dedicated Slack channel and card type were introduced on Jira to assist clients.
Best Practices Link
How To Troubleshoot
To address the issue of elements blending into the background, a solution was formulated. Designers were instructed to analyze the overall composition, identify elements blending in, and adjust contrast by darkening or lightening colors to enhance differentiation, thus improving image quality when sent via iOS or Android software.
Clients encountered random colors appearing behind their media when sent over text. This issue was attributed to iOS/Android software adding a random color to transparent backgrounds. Designers were advised to add a background image or color.
Clients using iOS devices experienced uneven borders for bordered media, unlike Android users. This discrepancy was due to the triangle part of the text bubble offsetting the overall image. Extensive trial and error resulted in the removal of borders to create the illusion of centered alignment, ensuring visual consistency across Android and iOS devices.
