IBKR

View the case study

IBKR's PortfolioAnalyst dashboard had a static layout featuring the platform's most requested data. We wanted to give users the ability to control which data appeared on the dashboard and give users who immediately wanted data other than the most common data the ability to see the desired data up front instead of needing to drill-down into the PortfolioAnalyst system.

Through a design sprint, we arrived at the decision to replace the static layout dashboard with widgets.

As a UI/UX Developer at IBKR, I gathered requirements for the types of widgets to be included on the dashboard and identified ten types of widgets to be included in the first wave of the redesign, with each widget covering between one and eight unique data sets.

I created wireframes and prototypes of the new widgets and overall dashboard and controls for stakeholder review. Through iterations, I built out the UI and VI for the dashboard, including the individual widgets and each widget's drill-down detail page.

Finally, I provided functional HTML/CSS/JS Bootstrap models of the widgets, dashboard and drill-down pages to our Javascript developers to incorporate into the existing PortoflioAnalyst system.

To create the account Concentration details page for IBKR's PortfolioAnalyst, I gathered requirements for the details to be included on the page. Using these general guidelines, I created wireframes and prototypes for stakeholder review. Through iterations, I built out the UI and VI for the page. Finally, I provided functional HTML/CSS/JS Bootstrap models of the widgets, dashboard and drill-down pages to our Javascript developers to incorporate into the existing PortoflioAnalyst system.

To create the account Performance details page for IBKR's PortfolioAnalyst, I gathered requirements for the details to be included on the page. Using these general guidelines, I created wireframes and prototypes for stakeholder review. Through iterations, I built out the UI and VI for the page. Finally, I provided functional HTML/CSS/JS Bootstrap models of the widgets, dashboard and drill-down pages to our Javascript developers to incorporate into the existing PortoflioAnalyst system.

To create the account Attribution details page for IBKR's PortfolioAnalyst, I gathered requirements for the details to be included on the page. Using these general guidelines, I created wireframes and prototypes for stakeholder review. Through iterations, I built out the UI and VI for the page. Finally, I provided functional HTML/CSS/JS Bootstrap models of the widgets, dashboard and drill-down pages to our Javascript developers to incorporate into the existing PortoflioAnalyst system.

To create the account ESG details page for IBKR's PortfolioAnalyst, I gathered requirements for the details to be included on the page. Using these general guidelines, I created wireframes and prototypes for stakeholder review. Through iterations, I built out the UI and VI for the page. Finally, I provided functional HTML/CSS/JS Bootstrap models of the widgets, dashboard and drill-down pages to our Javascript developers to incorporate into the existing PortoflioAnalyst system.

The navigation for the Commissions hub on the IBKR main site was using CSS from several different sources throughout the IBKR CMS (inline CSS, stand-alone stylesheets, main site stylesheet and vendor stylesheet). This sidebar style was also being adopted on other parts of the IBKR site, which was propagating stand-alone stylesheets and inline CSS.

To reduce this spread of inline and stand-alone styles, and create a sidebar as a modular design element that could easily be used across the site and easily be ported to other web assets, I reviewed all the styles being used by the sidebar, created unique element names and rewrote the styles as SASS, which was incorporated into the main site stylesheet.

While working on the SASS conversion, I also made minor tweaks to the UI to be cleaner and improved the Javascript scrolling feature when it rolled up to a top navigation for mobile.