App Stores for different devices such as FireTV, Roku, Android, and Apple need screenshots to display app content. Growth marketing teams frequently update these to boost downloads and promote new content. With each country having its own version, there's a need for thousands of assets.
The old workflow was manual, time-consuming, disorganized, prone to errors, and required multiple reviews by stakeholders.
Objective:
We aimed to make designers more efficient, ensure accurate language input, and simplify asset exporting with one plugin. This would cut processing time from over a week to 1-2 days and improve communication with global teams.
Research:
I had to understand the problems in our workflow with external teams, spot repeated patterns in text and design elements, and integrate them into our existing system for a new solution.
I streamlined text by creating one pattern for repetitive text instead of multiple IDs. I also merged similar character and paragraph styles.
Before building the Figma template, I organized IDs, styles, selected UI screens, and collected art content.
Solution:
First, I made a Figma template specific to the App Store, using new components from our design system. It was tricky adapting this system for mobile, tablet, and TV mockups with different pixel dimensions, and considering global variations.
After updating the copy spreadsheet, I used the Blade Runner plugin to automatically update the corresponding country pages. Then, I checked and adjusted artwork on each page. If needed globally, I updated the base components. Here's a peek at the mini design system I created solely for App Store use.
Wireframes, plug-in workflow, design system, and components
Base Components & High Fidelity Comps
Building the base components with the intergrated ID's from the spreadsheet was the most tedious part. I had to identify which needed customization and which patterns repeated. While most of the ID's for each field of text were similar country to country, each territory had it's own nuances.
After 4 months of development and testing, we successfully distributed the plugin for production and shared the new template with the internal design and copy teams. Overall the project was a success and our leadership was pleased with the improved process times and reduced errors. Our global teams were also impressed by the ease of use to input copy, provide feedback, and minimize translation mistakes.
