The Challenge
Designing with real data can help make decisions on text truncation, define white space and content size to keep a good balance, and improve readability.
However, a piece of text may often be reviewed and modified by different parties for perfection, some temporary text may repeatedly appear in multiple places to compose a flow such as an interim feature name. Updating a word in these situations manually is a labor-intensive task and sometimes may cause unexpected mistakes.
- Repetitive work
- Unexpected mistakes
- Coordinate difficulties
Scope & Constraints
The solution is going to be used inside the company where security and information confidence is always the priority. Therefore, third-party services with cloud storage are forbidden.
Because PMs, copy-writers, and other designers are also going to utilize it, the solution cannot go beyond a common tool or service across all the parties.
- No new third-party service
- No additional tool/software
- Solo project & lack of coding experience
Research
Needs
- Use real data and meaningful text other than placeholder copy from the beginning of ideation.
- Get a reminder when there is a new version of texts.
Pain Points
- Spend a long time updating texts on multiple screens for a minor change such as fixing a misspelling.
- Leave several mocks with an old version of texts due to carelessness.
Needs
- Have a single source of truth for texts across all projects.
- Have screens with the most recent copies ready as early as possible for developers to implement.
Pain Points
- Lose track of copy versions.
- Forget to notify designers that there is a text update request which results in outdated mocks in the project.
Needs
- View the updated result as soon as possible.
- Keep track of copy revision history.
Pain Points
- Provide the same guidance for the same piece of text on every single screen it appears
- Tag all designers working on a certain product every time a piece of text needs an update.
Ideation
Apart from a Sketch document, generating a separate text file allows copy revision and UI iteration to move forward simultaneously. By utilizing OneDrive, or any other cloud storage services allowed in the company, all parties can contribute to the copy without the limitation of accessing the Sketch tool.
Thus within the constraint, I decided to develop a Sketch plugin that can sync a copy file and a Sketch document.
Has to have
Format Restrictions
All editors have to follow a certain convention while editing copies. This rule has to be enforced by a mechanism other than consciousness because we may make mistakes.
Customizable Structure
Due to the complexity and difference of each project, the structure of copies may be various. This format has to adapt and support more than two dimensions.
Nice to have
Co-editing
Multiple editors work together on a single text tile in real-time.
Commenting
All stakeholders can provide their contextual comments.
Reminder
Designers get a notification when a piece of copy is updated.
History
Keep track of a copy revision history with each author’s information.
Solution
With Sketch’s very detailed developer-facing resource site, its official developer tool plugin, and ample open-source examples, I was able to easily pick up development while learning.
- GitHub: https://github.com/lizhengDesign/Sketch-CopyUpdater
- Intro-site: https://lzheng.com/copy-updater/
User Flow 1: PULL
Start preparing strings in a JSON file and then use @key as a string content or an override data of a symbol in a Sketch document. Link the JSON file and pull corresponding strings for selected elements.
1. Prepare
2. Use @key
3. Link & Pull
User Flow 2: PUSH
Work as usual in a Sketch document and pay more attention to each text and symbol name as they will be used as keys in a JSON file. Generate a JSON file for selected elements and then push updates to the same file.
1. Prepare
2. Generate
3. Push Updates
User Flow 3: CHECK
It’s always a challenge to keep track of string revision while working on multiple projects with different teams. Instead of manually pulling all the strings whenever switching projects to ensure no text is left behind, a check mechanism can extremely improve efficiency. It scans every editable text area, compares them with the linked JSON file, and list all unsynced strings for users to decide what to do next.
1. Check
2. Pull or Push
3. Update or Ignore
User Flow 4: TRUNCATION
When working on multiple platforms for the same project, according to different screen sizes the same piece of string may require truncation to fit the layout. To reduce duplicated copies, this tool also supports the truncation feature.
Tail Truncation
Tail Truncation + Ellipsis
Middle Truncation + Ellipsis
User Flow 5: GENERATING EXCEL
Our copywriting team requested to have a feature exporting all texts with the source screens into an Excel file for easy search and documentation purposes. The Generate Excel feature allows users to export selected artboards and containing content with a navigation link and a copy revision column into a new or existing Excel file.
1. Generate
2. Navigate
3. Revise
Impact
This plugin was introduced to the internal design team and was utilized by several product teams. It helps drastically save designers time and minimize potential mistakes that could happen during copy revision.
As the plugin doesn’t contain any company-related information and can benefit other designers, I published it on GitHub and now it can be found through Sketch’s official plugin collection.