My role: UI/UX designer

When? 2022

Tool: Figma

Shared Validation Service (SVS) - plugin for MemoQ.

Used colours and fonts refer to MemoQ brand because they don't have design system.

User and needs

MemoQ is a platform for translators - more details please see www.memoq.com

The user is translator who don't like to use computer. Plugin should has the easiest flow as possible and everything that's needed to vaidate translation should be in same window. Also basic funcionality like edit or delete.

Main concept and flow

Main view

The main view is with closed accordions and closed filter tab.
The max size of the window is 1024px.

Lorem ipsum for this example is not dark pattern. Nessesery funcionality, help or tool tips have desctiprion and needed description.

Opened filter with nothing selected

When the user sees one translation pair, the accordion is open.
For two and more all are closed.

See filter in details.

The filter has three states:

Default
Hover
Opened

Default state

Hover state

Opened filter

Opened filter and show selected with and without override reason.

As you can see, when the translator selects a reason the big orange button is active and when the user hover can see a summary.

Select translation pairs part.

Select shows up when the user opens the filter. Furthermore, the filter takes a lot of space and the user could have the filter closed most of the time. So, the user can use the menu next to filter. The menu gives functionality like editing target and selecting translations pairs same way like above - by severyty and validator.

Breakpoints for filter.

The max size of the window is 1024px.

Second breakpoint - 768px

Third breakpoint - 512 px

Fourth breakpoint - 428 px

Uder the filter...

The view 1024px.

The top has a secondary menu with info, an icon button and three closed accordions.

Funcionality description. I designed it in Figma. Unfortunatly Figma dosen't have full prototype possibilities. Tooltip shoudn't show up on hover. All tooltips for this kind of buttons should show up after a delay - 2 or 3 sec.

Next to the button is Source & Target. It's information mostly for new users. All translators know that Source is on the right and Target on the left. The Source is the language that will be translated into Target.

At the end is an info button with shortcuts that will help users to open and close all translation pairs.

Translation pairs

Funcionality description. The Arrow icon has only info function. Depending on if the accordion is opened or closed, the icon is up or down. When a translation pair is opened, the user can click anywhere on the accordion header.