Copy and Translate App
Matches
Overview
The Business Tech Team asked me to design an app that could enable the Copy Team to upload automated product information onto the website in 4 languages (English, French, Korean and Japanese). Please note, I designed the UI for this app before our new design system was created and because these designs were iterated so much, I will only explain the final screens for this project.
Role
UX Designer
Platforms
Web app
Skills
UX/UI (using Sketch)
Stakeholder negotiation
Presenting
Jira
The Problem
In the past, Matches manually translated all 4 websites using an in-house copy team and a third-party translation provider which was costing the company £500K a year. So, I was tasked with designing an app that could store product data, which could be updated easily and used to automatically populate fields in all 4 languages. Another requirement was, that it must have a sign off process so that editors can review copy before launching it onto the site, and have the ability to send copy off for translation if we do not have the terms already translated and stored.
The Outcome
The app was launched successfully and used daily by the Copy Team until we recently discontinued our translated websites. The company is now looking to see how we could use this app in another way so that it doesn't go to waste.
How we got there
The process
Discover
Define
Develop
Deliver
Area of interest
Stakeholder
requirements
Developer requirements
HMW?
Design ideation
User feedback
Iterate designs
Test
Solution
Build
User flow
Product information overview
The app would automate the copy for the product name e.g, 'Sam stone-washed denim cropped jeans', Description, Details and Size and Fit information on the Matches product pages.
Previous application
Previously, all product information was uploaded using basic text fields where mistakes could easily be made.
User flow
Early on we had an idea of the user flow but this was also iterated as the the project progressed.
Here is an example of
Initial idea
First we had meetings with the Copy Team to discuss their requirements. My idea was to design the layout so that it emulated the product display pages on the Matches website (see images above) so that the user understands which sections they are filling in more easily, and have tabs for each language like the old app had.
App homepage
To create new product copy or to search for existing product copy, the user first needs to input the Product ID.
If successful it will take them to the form page, if not an error will be displayed.
Product landing page
Along the top of the page are tabs for each translation page which I will explain later.
Below are text fields for the product Name and Description. First, one half of the copy team inputs the name and description. This text will always be unique, so it will always need to be translated by a third party.
I decided to highlight all text we do not have translations for in orange so that editors can clearly see how many words need to be sent for translation versus how many don't. All text that we have translations for appear in black.
Then there are two accordions, one for Detail bullets and one for Size and Fit. Both accordions show an overview of the information that has been inputted on the front, and if you open the accordion you can access the form fields.
The same team then inputs the product Detail bullets. Once their first three sections (Name, Description and Detail Bullets) are complete they click the 'Details complete' button to save their names in the external management tool.
At this point an editor can review this section.
How might we?
xxx