Role

UX/UI Designer

Type

Web-application

Company

Glencore International AG

Project Name

Core Trade

About the project

Enterprise web-application supported by an in-house, React-based UI Component Library that covers all commodities trading & management activities for Glencore´s Metals & Minerals departments.

Is set to replace the current (20 year old) in-house tool that manages Glencore´s commodity trading and operations business for these departments, providing current functionalities and also introducing new functionalities missing, as well as usability and efficiency improvements overall.

Note: To comply with the non-disclosure agreement, mock data is used on all the screens showed here so no confidential information is shared to the public

My Role

The project had already started around little more than a year before I joined, being part of the newly built in-house UX team (previously handled externally). As part of the UX Team for the project (1x UX Lead, 2x UX/UI Designers) my responsibilities during my time in the project can be divided in two: UI Tasks & UX Tasks.

User Interface (UI)

One of the new approaches for our component library was to use an open source react component library, after some discussions it was concluded that the most suitable library for our case was the implementation of Blueprint, the react components of this library are primarily for use on desktop applications and particularly suitable for building complex and data-dense interfaces. For data tables, it was used AG Grid.

1. Owning & maintaining the new UI Component Library

Once this was agreed… I was set to build our Sketch Symbol Library & Style-guide based on Blueprint. My approach was to build one that will make elements reusable and atomic in true sense, inspired by some libraries like Google Material design.

CORE TRADE Design System

What to achieve:

-Creating a 1:1 match as far as possible with our Blueprint coded components and Sketch symbols, both visually and structurally.

-Easy to maintain. Component updates or additions should be simple so that designers and developers get the latest without much wait.

I decided to go for a nested libraries instead of single source file. Doing so allowed me to split things like colors and icons into different Sketch files and then reference symbols across those files. Making an update to a symbol/style in one of the files, it will still propagate to the other files that reference that symbol. I took inspiration from our file management tool Abstract.

Certain patterns/rules to maintain “Library Hygiene”

  1. File and folder structure
  2. Symbol Layer structure
  3. Styles Layer structure
2. Handover of UI specifications of UI components for development

We used Storybook as the place where our UI component Library will live, adding gradually lists of components from Blueprint, some “out of the box” behaviors where customized to align them with the business user demands as well as custom newly created composites components. For this reason, UI specifications designs where needed for development.

3. Working closely with FE Devs during grooming and implementation

For successfully execute the points above, it was needed to work closely with the FE development team, actively participating on grooming sessions and keeping close contact on implementation, all of this during bi-weekly sprints.

Image comparison of before and after the new UI Component Library was implemented.

User Experience (UX)

For our application, it was needed the definition of common UX patterns . These patterns are repeatable solutions to recurring design problems, giving the easiest way that users can interact with your site or application. After defining this, we created the user journeys based on business requirements, working closely with stakeholders, PO, BAs & FE Devs.

1. Defininition & creation of global UX patterns for the new app based on business user needs

We started to incorporate known patterns so users often have an easier time getting where they’re going or accomplishing their goals, using UI object & screens that will intuitively implies its use (like save buttons, empty states, dialogs, contextual menus, etc). This patterns where then slightly tweaked to fit the current business user needs.

Some of the relevant patterns that we incorporated are the following:

A. Validation for data entry
B. Feedback Guidelines

A. Validation for data entry

On the application, long forms where needed to be done all the time, most of them having 95% mandatory fields to be correctly filled in and even some of them with dependencies among each other.

To make it easier for the user during the completion of long forms we developed a pattern that in order to save a form we have an alert button next to the save button that checks on validation alongside the validation on the actual form field.

Form Fields
Alert Button
Save Button

New form screen example.

The interaction consists on having the save button disabled until all the mandatory fields are filled in correctly, the “alert button” will indicate when any of the fields have errors or warnings on the current form.

Form completed. No Alert Button. Save button enabled.

Warnings: Shows information related to specific sensitive input values on fields that could assist a user in decision making or at least acknowledge the presence of the warning. This alert allow the user to save the form.

Warnings on form. Save Button enabled.

Errors: Shows that mandatory fields are still empty or that the input value on it conflicts with other fields (dependencies). This alert will prevent the user to save the form (save button disabled).

Errors on form. Save Button disabled.

B. UI Feedback Guidelines

Effective feedback instills trust in the system and communicates relevant information to the user at the right time. Common UI elements implemented on the web-application for UX feedback where implemented to build patterns. Some of the most relevant where the following:

Snackbars: Info
Info snackbars are related to a user’s create or edit actions where the action triggers an event that needs processing time and will result in a notification providing the user with a link to access the processed information e.g. creating a Snapshot.

Snackbars: Success
Success Snackbars should be used to confirm any actions that have been successfully acknowledged by the system in conjunction with a user’s create/edit/delete actions.

Snackbars: Warning
Warning Snackbars are related to a user’s create or edit actions where the action triggers an event that could assist a user in decision making when entering data e.g. sanction warnings or price information.

Snackbars: Error
Error Snackbars should be used to confirm any errors that have occurred related to a user’s create/edit/delete actions.

Dialogs: Confirmation Dialog
Confirmation Dialogs are used to confirm that a user’s action is intentional and not accidental e.g. switching “on screen tabs” before saving and losing unsaved data, confirm deleting, among others.

Dialogs: Closing Browser Tab
A system confirmation dialog will appear to warn users when closing browser tabs before saving and losing unsaved data.

Loading Spinner: Page Load
It appears on pages that are newly opened and where a delay occurs between the page/content container being opened and the content itself being fully loaded i.e. on new pages opened in CORE TRADE.

2. Mapping patterns to business requirements and improving existing application journeys/task flows

After defining our global UX patterns, we went forward to map them to business requirements improving significanlty all user journeys inside the application.

We used prototyping tools like Invision to tests user flows with the business, once they where signed off, development started, once finished, a fully functional demo was presented to the users for testing, where final feedback was collected to refine and improve flows, only when needed.

3. Working closely with the PO, BA´s & FE Devs during solution design & development

During the process of the solution design, creating user journey flows & prototypes I worked hand on hand with the Product Owner & Delivery BAs to ensure that business requirements where followed correctly. After sign off from the business, I participated actively on FE grooming sessions and keeping close contact on implementation, all of this during bi-weekly sprints.

Check my other projects //