This project was in fact more than one project. It started as a very specific requirement: to migrate the Settings window of a Markets platform from Flux to HTML with UX/UI improvements for all LOB (Limit Order Book). The specialist running the limit order book has the responsibility to guarantee that the top priority order is executed before other orders in the book, and before other orders at an equal or worse price held or submitted by other traders on the floor. So, they needed to be able to set up their workspace to perform their tasks in the most efficient way.
After interviewing the users of this platform we defined that there were two type of users: advance users and first time users. So, we needed to design a very user friendly tool and a wizard for those who were using this platform for the first time. Wizard was also to help setting up the main things and to show users were to find advanced settings.
Mockup General Settings
Wireframe and layout: Wizard for first set up on Markets Platform
I worked on this project with a visual designer and two teams from the US and UK. The main requirement was to design a layout that was flexible to future modifications because they were not certain about the exact features that were going to be included in the platform. I also worked on the Information Architecture and minimising the amount of steps needed to set up the main workspace.
My proposal was based on:
Simplifying the layout and how to edit content.
Designing a modular layout so that it could to be flexible enough to add new content or changes.
Organising content in a coherent so that it could be easily found.
Create a logic to search and find information.
Using the type of vocabulary and labels that users expected to find.
Reuse components so that users don't have to learn how to use things.
Here are some examples of improvements made on the Settings Window.
Wireframes for settings window
Old settings window
Using tabs to organise large amounts of information made it easier to find. Minimising the amount of information displayed on the screen and using 13 pts size for the fonts helped users to set it up faster.
FX Cash and FX Cash Aggregator were related so merging both categories improved the customisation time on Cash Ticket.
The same happened to Depth Ladders and Order Type; the content was not clear when divided into two tabs.
On the one hand, there were many design requirements and guide lines to follow. I could not propose changes related to the way that shown., such as the menu on the side. All changes had to go through a series of approvals that took a lot of time and we had a development team with many technical limitations. On the other hand, there was so much information to study about Trading, how LOBs worked and what user needed. Also, there were few opportunities to get feedback from users, which made the project really stressful. That's why I defined as a starting point to prioritise the Information Architecture and to understand the relationship between the settings window and the dashboard. At that time, they seemed different products. The Settings Window was using different labels from the Dashboard and it was very difficult to find each component. So, this was a starting point for the First Time Users Wizard.
The First Time user Wizard
The aim of the First Time User Wizard was to guide the users to perform an initial and general customisation and introduce them to the setting system. In this way the users were going to be able set the initial Dashboard and to gain the knowledge to make any future changes.