CLIENTE
SDL
El principal proveedor de servicios lingüísticos basados en tecnología, gestión de contenidos y propiedad intelectual del mundo.
Nota: SDL fue recientemente adquirido por RWS.
PRODUCTO
SDL SLATE
Es una app que proporciona el servicio de traducción online para empresas, con traducción basada en IA y respaldada por traductores.
Nota: SDL SLATE está en el proceso de cambiar el nombre a Translation on Demand.
Team
I work in a cross-functional team. As a part of the UX team, I work together with the client’s product team in the definition and design of their product. We work in an agile environment with 3-week sprints.
I have been involved in Research, UX Design, Visual Design, Prototyping and UX documentation.
To highlight some of my contributions to the project:
- create and maintain the component library using the Atomic design approach
- adapt the designs to integrate localization
- redesign the Subscription Plans page
- consolidate error messages
- redesign the main area where all Orders are display
Improving the User experience in the Orders area
THE PROBLEM
The current design has a lot of white spaces which shifts the content further below. This causes that the users have to scroll a lot in order to find the order they are looking for.
Technical constrains:
Pagination, sorting and search are not possible at this moment.
Business constrains:
We can not separate the Create order area from the All orders area – both have to be displayed on the Home page.
THE GOAL
Objective was to improve the user experience when looking for orders, creating or launching them.
Key findings
The users need be able to find easily the order they are looking for. They need to visualize as many orders as possible without scrolling.
*I can not share more details on user research as it is protected information.
First approach
There was a first approach where the filters were turned into a mini dashboard. When clicking on any of the filter cards, the filter section would scroll up and stay fixed, pushing the Drag & drop area upwards. The orders are scrolling underneath the filter section.
Also, the statuses were color coded in order to make them more recognizable at a glance.
The problem: There are still only 3 orders visible at the same time.
I took over the task from this moment
MY PROCESS
My process is different in different projects and is determined by many factors such as the project goals, business needs, complexity of the problem, time and etc. Here I’ll describe my process for solving this problem.
Analyze / Ideate / Design / Iterate
All the important actions take place on the same page.
SITE MAP
I started analysing the current site map in order to find possible improvements.
The home page is where the Create order area and All orders area live together. As a requirement of Business, we cannot change this.
Also, when a user opens an order, this simply unfolds, remaining on the same page. This causes performance issues.
All the important actions, such as:
- Creating order
- Searching for specific order
- Choosing service level
- Launching order
- Downloading translated orders,
take place on the same page.
We can improve the scrolling and performance issues by opening the orders in a separate page.
CREATE ORDER AREA
The Create Order area occupies a lot of vertical space.
The text with the information about how the orders are charged has legibility issues and creates a big white space on its right.
We can gain some vertical space by reducing the width of the Drag & drop area in order to shift the text to its right. Setting the appropriate line length improves the text legibility.
After iterating on the design, the final proposal is to use help icons and display the text in overlay.
ALL ORDERS AREA
The orders are displayed as cards. These occupy a lot of space, thus it is not possible to visualize more than 3 orders at the same time.
Our users are in the search mode and the order name is one of the most important things for them. A list view would allow them to easily view different textual items. But we have users who are already used to browse the cards. To satisfy both behaviors, we propose the possibility to switch between two different views, list and grid.
FROM CARD TO TABLE ROW
In order to reduce the height, we need to show only the most important information. The rest can be found once the order is open. This helps us to reduce the cognitive load as well.
In the first approach, there was a color code proposed for the filter buttons. We have applied this to the status chips and the order headers as well.
As we have proposed to open the orders in dedicated pages, rather than unfolding them on the same page, this task implied also the design of these pages. This means designing the open order page in 4 different stages according to the order status: Analyzing, Ready to launch, Translating and Completed.
This also implied to design the navigation from the orders list to an open order depending on the current status of the order and the filtering applied on the order list.
Furthermore, I have created all the new components for the library with the Atomic design approach. This help us to create the flows much faster.
Approved version
