Global Navigation & Design Framework

T-REX is a SaaS solution that improves investment decision-making across alternative financial markets by eliminating manual processes and automating workflows between asset originators and investors. With a pending contract for CITI Trustee Services, T-REX had to address specific requirements that were beyond the capabilities of its existing architecture and engineering design.

Role | Research, UX Strategy, UI, Resource Alignment
Partners | CEO, CTO, Tech Leads, PM Lead

We needed a comprehensive revamp of the user interface, particularly to the navigation and menu structure and the development of a new design system. The ultimate goal was the delivery a white label solution for the client and enhancing the scalability and efficiency of the platform.

A UX audit that included usability testing, desk research and user interviews revealed several issues

• Users had trouble quickly navigating between different reports and sections when the sidebar was closed

• The open sidebar took up valuable interface space - at a premium in an analytics platform

• Inconsistent way-finding & button placement

• Tech implementation was different depending on the team - no component or system library in place

This also aligned with the global navigational structure for CITI - I was fortunate to “advance partner” with some members of their innovation team to make sure my ideas would resonate with their stakeholders as well.

In this type of flat structure we can easily hide or show sections based on entitlements. For example Investors may only need to have access to reports and deal documents - while Deal Administrators and Modelers need access to the entirety of the platform.

To accomplish what we needed, I suggested the adoption of a design library and framework and provided some examples as a starting point.

I also did a quick prototype showing how the new navigation could work. Once I had a tentative “go” on my ideas from senior leadership, I set up meetings with our technology partners, including the the head of R&D and Platform Development, both located in Tel Aviv.

My goal was to get buy in and get us up and running quickly.

The Dev team did analysis and decided on Vuetify, a JavaScript framework that uses Google’s Material Design specifications. With that in mind, I purchased an existing Figma design system and branded it for T-REX. I also held training sessions with the dev and product teams to familiarize them with using Figma and accessing the built in documentation. Eventually the goal was to sync design and code across the entire organization by also incorporating Storybook.

This had institutional and cross functional impacts, building trust and collaboration between teams.

I was involved in writing the SOW included int he contract, making sure that the language we used was the same as the references in the CITI design system so there would be no misinterpretation at a later date. I was also deliberate about addressing limitations as well, for example, we could change the icon set and the navigational menu fonts, but systemwide fonts for reporting were off the table as an MVP because they would require extensive QA and could cause rendering issues.

The global navigation and structural changes allowed us to meet the CITI SOW from a design perspective quickly and give room to address additional functionality.

Building any product requires aligning business and user needs by balancing trade-offs and communicating design decisions.

Overall, addressing these structural issues allowed us to deliver:

1. Streamlined product/dev delivery

2. Standardized user interactions

3. Ongoing revenue opportunities with a white labeling package we could market to other clients