The Complete Guide To Design Stage Localization - 20220211
The Complete Guide To Design Stage Localization - 20220211
to design-stage
localization
‘’ With design-stage localization, I’ve eliminated my operational
workload and can now focus on performance to improve the
overall experience for our customers.”
Romain Dahan
Product Manager
Design-stage localization can help with this. So, let’s jump straight in.
This way, you can see for yourself how valuable design-stage localization is when
it comes to continuously releasing localized products and growing your global
presence.
Designers start with a mockup, finalize the UI in the source language, and then
linguists begin translating the UI before the feature goes to development. This
means that fully localized prototypes are created ahead of time.
Let’s take a closer look at the steps involved in the above flow:
Feature is tested by Developers pull the Feature goes to Designer reviews and
QA team translated files development optimizes the UI
Positive feedback
Feature is released in
from userbase in all
multiple markets
markets
1. The designers/content team create the design with key names in Figma/
Sketch.
2. The keys and base language are pushed to Lokalise.
3. Developers get the keys from a duplicate page in Figma/Sketch.
4. Linguists work in Lokalise throughout the entire flow.
The flow above allows designers and developers to dovetail their efforts for a
localization cycle that follows the pace of development and of each feature release.
Instead of waiting for translations, development can start with key names reflected
in the design as opposed to language values. Plus, teams can test the design using
machine translation and set character limits to ensure that the design won’t break.
Download
See it live:
Join us for a discussion on the Nimdzi podcast on September 28,
2021, to learn about the above workflow from Romain Dahan, Product
Manager at Withings. You’ll leave with Romain’s insights on the
workflow and what it takes to get stakeholders on board.
Register here.
Download
1. The Figma plugin is used to create keys and screenshots, with 1 Figma
design per brand connected to 1 Lokalise project
2. Slack notifications are triggered when new keys are created.
3. PO selects newly created keys and creates a Lokalise Translation Order.
4. Lokalise translators translate on platform & communicate via built-in chat.
5. Slack notification is sent out once the translation cycle is complete.
6. When any key export is initiated for a brand-specific project, a download
is initiated from the generic project and the option to include keys from
brand-specific project is selected.
7. Mobile bundles: uses webhooks & API calls to automatically download new
bundles when changes in keys are detected.
8. Review cycle is done in-house on pre-production mobile app versions.
9. PO is notified and manually changes the strings based on feedback.
10. Once a pre-production app has passed in-house review, new releases are
pushed to production.
Success stories from our customer base show that fast-growing, agile companies
that rely on CI/CD to any degree are natural adopters of design-stage localization.
Companies that rely on continuous development for products like mobile apps,
web apps, and games already have the processes and technologies to fit design-
stage localization into their workflows.
That said, our research also shows that companies that are between levels 1 and 2
of the localization maturity model can easily implement and benefit from design-
stage localization.
In short, tech-savvy companies with strong product teams will find it especially
helpful for accelerating localization, centralizing collaboration, and achieving their
international expansion goals.
But if you’ve found a product-market fit and want to deliver great UX in multiple
markets simultaneously, then design-stage localization is the optimal workflow
for your stakeholder and company.
In the long run, your most important assets are your customers and team. Bearing
that in mind, here’s how design-stage localization helps you collaborate effectively
with your team and deliver the best possible product for your customers.
In the words of Keith Vaz, Interaction Designer at the super app Gojek:
“
“ UX writers can now begin the work a lot earlier and
the workflow has urged us to work closely with each
other to get things on track.”
This means, “no more having to go through several hefty Google Sheets, hunting
for one line of copy and then having to manually copy-paste it into the designs.”
No more sending emails to ask, “which is the latest wireframe?” or “is it done yet?”
a) You can spot cultural and localization issues before you build
b) UX writers aren’t always limited to the design as designers can make changes
quickly to accommodate copy
c) Adjustments in both copy and design happen together
“Translating our designs to our users’ native languages for user testing sessions is
super seamless now,” says Keith Vaz. He adds that, “earlier it would take a few hours
for the UX writer or the designer to manually edit all the copy on each screen.”
When you integrate designers into the localization flow early on, teams can
quickly and easily check whether the design functions correctly across all target
languages and make amendments pre-development. Here’s how:
2. Once the content is finished or almost finished, designers can pull the
translated text back into the design and perform design QA before the product
goes to development.
And remember, if the content does change, you’ll be able to adjust both the copy
and design. Plus, you’ll be able to leverage the translation memory to offset any
costs caused by translating new content.
Did you know?: Resolving bugs in the design stage is 10x more cost effective than
making adjustments after release.
Resolve bugs early 5
50
Up to 10x cost
Up to 10xif cost
decrease you
40
decrease
resolve a bugif you
in a
Cost to fix a bug
30
design
resolvestage
a bug in 20
a design stage
10
0
Lingoport, Raygun Design Development Testing Release
Take this example from Luisana Valero, UX Designer at Elli (VW Group), who says
they are now able to “deliver assets about 5 times faster for multi-language asset
creation (app screens).”
Bearing that in mind, we were especially delighted to hear how Withings managed
to create an efficient l10n process involving their product team, designers,
developers, and content team.
In the words of their product manager, Romain Dahan, “By migrating to Lokalise,
we’ve accelerated the delivery of new localized features by 90%.” He tells us that
Lokalise’s Figma integration served as the key to transforming the localization
process at Withings and building a design-stage workflow.
Whatever the case, you likely have questions. And we’re here to answer them.
For this discussion, let’s start by laying out the top design-stage challenges.
Think about it like this: If your UX writer is the last in the pipeline of the design
process before development handoff, it will require some initial coordination
to ensure that they start their work earlier in the localization process. The same
applies to other team members who have certain dependencies that need to
take place before they begin their work.
The challenge is coordinating this shift between all the stakeholders – even if
they aren’t entirely new to localization, it requires some basic onboarding to
educate and ramp up your team. For example, designers may not be familiar
with some newer terms like ‘keys.’ They may require some training on how to link
Aside from inconsistent systems and processes, many of the problems that arise
in localization programs are due to the fact that designers, developers, content
teams, and localization teams work in silos.
When it comes to localization, there are four things that should be shared and
integrated in some form. They are:
1. Lokalise
2. Design tools
3. The wireframes of the entire UI being localized
4. Your localization team
It’s simple: All of the above have shared processes that work in tandem to create
a unified, continuous localization process that starts at the design stage. In
an ideal world, your prototypes will live in a design tool with existing APIs or
connectors to your TMS. You will also need defined collaboration rules to help
you function better as a team.
Centralizing tools and changing processes is hard in the short term and your
team might not want to change.
In fact, it’s fairly common for companies to have multiple systems and
Ideally, you will have a TMS that is connected to the design tool (e.g., Figma)
you use company-wide. Often, companies use their TMS as the single source
of truth for content in multiple languages, along with the English equivalent.
However, some companies use their design tool as a single source of truth.
Bottom line: You need tools and processes that are truly central (and
integrated) company-wide to get a design-stage localization process working
like a well-oiled machine. Plus, ensure your TMS has integrations with your
existing tech stack.
In some companies, engineers are the ones who remain in control of key nam-
ing conventions. They may already have the bulk of their core product localized
and a specific key naming pattern they would like to continue using.
The truth is, there is no single best practice here. But the good news is that a
design-stage process accommodates flexible ways of working that suit various
team structures, workflows, and tech stacks.
You may decide not to automate key names completely or create keys at the
design stage and continue having your developers create keys instead. For
example, one company decided to stick with engineers creating keys instead
of them coming from Figma first.
The bottom line is: you need a process to align key naming with design
systems and ensure you don’t have conflicting key naming conventions or are
not left waiting for engineers to create keys that will be linked to the design.
We’ve covered the value of design-stage localization above, but here’s a quick
recap – you can:
Improve UI quality
Now, let’s look at two examples for some quantifiable benefits in some of these areas.
Spot localization defects before building as linguists have context for the
entire UI
Speed up the process as developers can start building without waiting for
translations
The context: DBS is one of the leading banks in Southeast Asia, serving consumer
markets in Singapore, China, Indonesia, India, Taiwan, and Hong Kong.
The challenge design-stage localization solved: By using the Figma plugin, the
l10n workflow has become much smoother and helped the team to:
There are myriad metrics and key performance indicators used to measure the
efficiency of localization efforts. This is where most organizations use KPIs or
measurements, such as:
Key metrics:
On-time deliveries
Time to market
Adherence to budget
That said, whereas ROI is very important, it doesn’t always come down to
that. It might be creating an equitable experience for customers around the
globe, delivering delight in the form of native experiences, or building brand
awareness.
The bottom line is: you should align any new strategy with clear goals based
on your primary business goals.
The bottom line is: you should align any new strategy with clear goals based
on your primary business goals.
There are several stakeholders that should make up every localization team. The
localization process typically involves four primary groups of stakeholders:
Let’s examine these roles, how they change, and how they impact the
design-stage localization process.
Key responsibility
Ensuring your product looks and feels how it should resonate with your
global customers.
Skills
• Quality issues due to localization after • Lack of context and the inability to
the design stage create relevant visual experiences
• Making sure translated text fits the • Jeopardized design quality because of
design and design changes an inefficient localization process (e.g.,
poor communication, idle waiting time,
• Ensuring the localization is appropriate inefficient asynchronous collaboration)
for the target market’s culture (e.g.,
avoiding human imagery for Islamic • Preserving brand identity while still
audiences) adapting to new markets.
Whether you want to remain in control of the key naming convention or pass on
this responsibility to the localization or project manager is a flexible choice you
can agree on with your team. The most important thing is that you will no longer
be bombarded with Jira tickets related to localization. Here’s what will change:
Key responsibility
Initiating the localization process by adding string identifiers (i.e., keys) to the product code,
as well as fixing bugs and taking full care of the back-end of your digital product.
Skills
• Start working earlier in the localization • Eliminate time spent providing context
process to translators as context is provided
directly via design tool integrations
• Ability to work closely with product,
designers, and the content team before • Ability to begin builds without
the build translations in more advanced design-
stage workflows
• Have more context of where translation
keys are being used in the design
• How much time are you spending on task management and reviewing design
bugs?
• Are different team members able to work in parallel rather than waiting for
each other to complete work?
• How is this sequential approach impacting delivery time?
Key responsibility
Educating all stakeholders in the localization process about your product while also
identifying requirements, tools, technologies, and the overall strategy.
Skills
The biggest shift for copywriters and linguists is that they can work together
with product, designers, and developers before the build. That means you can
ensure the overall coherence of the brand and product experience to create
delightful, global experiences.
Key responsibility
Preparing all the content that needs to be localized and/or participating in transcreation
to ensure it’s well adapted to the target market.
Skills
• Strong strategic and writing skills • Ability to follow the set quality and style
guidelines and switch between different
• Team player and great communicator tones of voice
• Making sure copy sounds good in all • Issues that come with outsourcing (e.g.,
languages tiring back and forths, missed deadlines
due to inefficiency)
• Compromising translated copy quality
due to character limitations imposed by • Tracking the progress of campaigns
designs
• Scaling without jeopardizing quality
• Getting access to translations for
temporary app/web content (e.g., sales • Adapting content culturally
enablement content or specific content
campaigns) • Reporting
• Constant translations
Key responsibility
Establishing a rigorous review process through proofreading and testing in order to deliver
the agreed translation quality.
Skills
• Spending too much time on quality • Not having a standard for performance
assurance due to inefficient workflows and usability testing
• Addressing ambiguity about terms to • Too many manual and repetitive tasks,
ensure translation consistency as well as tiring back and forths
If you are new to Lokalise, no problem: there is a free trial you can choose if you
just want to test it out. Head over to our designers page and sign up for a free
account (or look at the pricing page if you want to give the Pro plan a go).
Once you’ve signed up, click on the video below and watch the series that
covers all the steps you need to take to connect your design tools and
automatically start pulling translated strings into your designs:
Get the free checklist to help you and your team on your localization journey
and create a free account to apply some of the guidelines today.