The FX Sales project had developed some layout problems that made the product confusing to navigate. This was a result of fixing issues as they arose during the agile process which slowly warped the initial interaction framework.

Problem statement

People misunderstood the core functionality of the product and how to move between key areas. The products core functionality at this point consisted of:

  • Viewing all trades done by the user in a blotter
  • Seeing an overview of market rates
  • Searching for and selecting a client
  • Seeing an overview of market rates margined according to the client's price banding
  • Trading on behalf of a client
  • Viewing a client's trades in the blotter

The problem is before and after selecting a client look mostly the same and also getting an overview and doing a trade also look the same. In short it does not make sense to have the features split over the four areas present at that time. The reason for this was the roadmap had plans for more features to fill these areas giving them enough unique content to warrant separate areas.

Decision support prototype

This prototype describes some of the features planned for the product. The decision support information was planned to sit next to the trade ticket, without it the screen was considered to sparse so it was filled with the same content from the 'Overview' area making the two very similar.

Team and my role

I facilitated workshops and produced wireframes and an HTML prototype.


The rest of the project was progressing under an agile methodology, this work had to be conducted outside of that without affecting the delivery.

Design process story

A workshop was held with product owners and designers. I was careful to keep the discussions on high-level features and concepts and away from any detail or discussion of technologies.

Only items that everyone could agree upon where documented, this meant simplifying the ideas down to their most basic components.

A second session was held to refine some ideas on managing the work space layout. The discussion reach an impasse when we realised it was impossible to visualise all the permutations of a re-sizable layout on different screen sizes with adaptive contents. We had two options for layout but the only way to know what it would be like was to prototype.

The trading tiles present in the application where imported from the FX professional product. They where made first to support a single outright price and later upgraded to show a small ladder of prices that occupied the same space. This means that the ladder view is a very inefficient way of displaying the information and if this feature had to be designed first it would look very different.

Prototype of layout framework

The layout is controlled by resizing two sliders allowing the user to customise the workspace to their screen and windows size intuitively and quickly.

I had some ideas for different ways to show prices at different densities that I found it difficult to articulate and so built them directly into the prototype. The circular buttons next to the 'Margined rates' title change the density of the content in that re-sizable panel.

The prototype is made of background images placed with CSS and a Javascript library to provide the re-sizing.

Retrospective & lessons learned

This prototype provided some groundwork for the Market Lens hackday project.