Lead UX Designer
Elicit direction from stakeholders
Wireframe & design features for engineering
Clearly convey order status, subsequent order actions, market data, and analytics.
Anthony Foster, VP of UX/UI
Tey Taghiyev, Lead, Front-end
Jeff Hyun, Back-end
Daniel Stewart, QA Lead
The goals set at Lucera Financial Infrastructures was pretty simple: Build a usable, and scalable application for trading US Treasuries. The bar was set pretty low in terms of design, but our team started from ground zero. No UI kit, no pre-existing designs to work off, and most daunting no documentation to know how any of it would work. It was quite unsettling, considering I had jumped into the deep end of the financial sector.
So, our team started right away. We obtained business requirements for Treasury, at the time LumeMarkets, and blazed trails for an MVP. Just over a year, we made it to Production for our first client, Daiwa Trading Co. Since then, we now have three other clients using Treasury including Santander Bank, and Cantor Fitzgerald.
Along the way we made strides in documenting everything we knew about Treasury trading from our financially privy peers, and filling in the rest from Investopedia. Previous legacy applications at Lucera Financial Infrastructures had not been built the way that Treasury had been. We provide extensive user flows, wireframes, prototypes, pages of documentation in Confluence, an elevated UI as compared to our competition, and we topped it all off with a fresh logo.
The following screens are a sample of the work that went into building Treasury, and only scratches the surface of the features it holds today.
Understanding the different statuses that can be returned from the Financial Information eXchange (FIX) when placing orders.
Evaluating the different types of reject messages for an order.
Wireframes of the Table view for the Treasury application, detailing how incoming market data should be displayed.
Additional wireframes for Table, detailing out order placement.
Alternative dashboard view referred to as the Ladder, detailing order placement.
Initial stage of Treasury application, Table view.
Initial stage of Treasury application, Ladder view.
Traders never used the Active order list, and insisted on the features being navigated to the Blotter.
The blue used for the price and size buttons were not AA compliant on the (ancient) monitors being used by the traders.
The rounded corners on the table cause performance issues.
Traders cancelled orders more frequently, and needed immediate access to cancelling an individual order or cancelling all orders.
Latest version of the Treasury application, Table view.
Latest version of the Treasury application, Ladder view.
This is what the team referred to as the custom order dialog. Traders used this method to place passive orders on the market, which in layman's terms means, the side of the order didn’t change. Traders also had the opportunity to change order definitions to “make the market”.
One of the features our desktop application allowed for was undocking components.
Our team also had the opportunity to work on the logo.