Client

Google my Business is a free tool provided by Google that helps businesses manage their online presence on Google Maps and Google Search. It allows businesses to create and update their business listings, which can include information such as the business's name, address, phone number, website, operating hours, and customer reviews.

Team

Camilo Montoya, Visual Designer.
Andrea Parra, Associate Visual Designer.

Product

We've developed a website designed to spotlight the burgeoning opportunities for business growth and heightened visibility that arise when a business is discoverable through the Google platform, encompassing Google Maps and Search functionalities.

Our primary goal was to accentuate the key capabilities offered by Google my Business (GmB), enabling businesses to adeptly construct, tailor, and manage their distinctive business profiles.

Problem

The website is set to undergo translation into over 80 languages, with publication planned in 100+ countries. This localization endeavor entails maintaining consistent mockup designs while adapting the content to suit each country and language.

However, the concern lies in the substantial time investment required for manual execution, a projected duration of over 6+ months. The challenge at hand is: How to accelerate the generation of these varied mockups without compromising our efficiency?

Objective

Reduce the time spent by the visual design team for the creation of each localization batch of mockups.

Discovery

While working in another project at Huge, I chanced upon the "Google Sheets Sync" plugin. To gauge its potential, I rigorously tested it within a customized playground, presenting innovative enhancement concepts to the project's leadership. The ripple effect extended to the creative directors team, sparking the inception of this localization automation initiative.

This plugin showcased its potential to tackle the primary challenge: automating mockup generation while seamlessly synchronizing localized content. However, two requisites emerged: a meticulously organized spreadsheet housing content primed for synchronization, and Figma mockup templates adept at accommodating varying content lengths without compromising pixel-perfection.

Design process

We initiated the process by constructing a comprehensive spreadsheet for managing translations. This involved creating dual sheets for each page on the website. The first sheet served as the input page, encompassing the mockup context along with editable content elements. The second sheet functioned as a dataset, meticulously organizing the information from the initial sheet into a coherent format that would be compatible with the functioning of the plugin.

Upon completion of the spreadsheet setup and populating it with preliminary test content, we seamlessly transitioned to refining the Figma mockup templates. Although the initial mockups designed for the website proposal lacked pixel perfection, we meticulously fine-tuned each mockup to seamlessly accommodate any synchronized content. This was achieved through the integration of auto-layout features and diverse text styles.

The foundational design phase culminated in the development of a comprehensive spreadsheet spanning 10 pages, accompanied by a collection of 31 responsive components.

Testing

Initially, we undertook the manual configuration of the initial 10 localizations, leveraging both the client's document files and an automation spreadsheet. This approach was guided by the understanding that the responsibility for content delivery rested with the client, who was expected to complete the spreadsheet.

Upon completing this setup, we rigorously tested the process, resulting in the successful generation of the first 10 localizations. This encompassed all the required content, with appropriate adjustments made for diverse linguistic characteristics. Following this accomplishment, minor responsiveness issues within the components were addressed and resolved.

Subsequently, the entire process was thoroughly documented and transitioned to the visual designer responsible for further implementation.

Impact

Ultimately, the implementation of the automation process yielded a remarkable reduction in the initial delivery projection, slashing it from nearly 7 months to a mere 2 months of actual execution. The majority of this period was devoted to addressing text-related bugs arising from linguistic variations and handling image-related content intricacies.

This accomplishment translated into a profound sense of contentment among the Google team, as the initiative not only significantly compressed the timeline but also alleviated the resource demands associated with the task. Similarly, the client's satisfaction was palpable, as evidenced by their statement: "The ability to execute so many localizations within such a short timeframe during each sprint was truly astounding!"

Learnings

During this project, I learned more about responsive components to understand more behind the logic of auto-layout, and how to really make a good hand-off to always have files pixel perfect and ready for delivery.

Live site

If you are interested in seeing the live site: Check it here.