Case Studies
IBKR
PortfolioAnalyst Dashboard
Challenge
Original PortfolioAnalyst Dashboard
IBKR's PortfolioAnalyst dashboard had a static layout featuring the platform's most requested data.
Many users wanted to immediately review information other than the information provided on the dashboard. This often required them to dig down multiple layers into the system to see the desired information.
We wanted to give users more control over the data appearing on the dashboard. This would give users the ability to see the desired data up front. An additional benefit would be to reduce server load by eliminating calls to retrieve data that the users did not need or want at the time.
Solution
Wireframe for the new PortfolioAnalyst dashboard
Through a design sprint, we arrived at the decision to replace the static layout dashboard with widgets, each with a direct path to that widget's full set of data.
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 (SASS)/JS Bootstrap models of the widgets, dashboard page and drill-down pages to Javascript developers to incorporate into the existing PortoflioAnalyst system.
Result
New PortfolioAnalyst dashboard
The new PortfolioAnalyst dashboard is fully customizable with individual widgets. These changes have had a significant impact on the PortfolioAnalyst system.
- Increased engagement across the system
- Reduced time-on-task for users to receive their unique top-level information
- Reduced the amount of code within the PortfolioAnalyst system
- Reduced the number of calls to the server
IBKR
Onboarding Forms
Challenge
IBKR original onboarding forms
IBKR had several different onboarding forms across sites, apps, and client tools. These forms varied drastically in the style elements and code used as well as the layout and flow.
If a form needed to be ported from one system to another, there were compatibility issues which caused delays as the forms were reworked for the new system.
Solution
Modular form elements
To standardize forms, we reviewed and documented every step of every onboarding scenario across every web asset. All form fields were updated to use consistent language and then organized into sets of section groupings and steps.
The code and layout were standardized using the Bootstrap framework and form style elements were rewrote as SASS to ensure forms could easily be carried across systems.
Form sections were also created as stand alone modules that could easily be moved in and out of the form as selections were made that necessitated unique information.
Result
IBKR new standardized forms
I created HTML/CSS/JS Bootstrap prototypes for every step of every onboarding scenario for stakeholder review. The prototypes were handed off to Javascript developers and implemented across systems.
With the standardization of elements and Bootstrap forms, any form can be carried across systems and will pick-up the unique visual identity of the system and work with each system in dark/light modes as well as in left-to-right and right-to-left languages.
Dalia Amara
Artist Website
Challenge
Dalia Amara original site
Dalia Amara is a New York-based visual artist who wanted to update her portfolio website.
She liked the look and feel of her existing site, clean, and focused on the art, but wanted the site to be mobile friendly. Another feature she wanted was inspired by Instagram, in how images could be toggled between large/full view and grid view.
Dalia also had experience with HTML/CSS, having built her original site, and preferred something that she could update and extend herself without a high learning curve.
Solution
Dalia Amara toggle view buttons
I built out a new site in a customized Bootstrap, keeping and building upon the clean look and feel, and creating section/series templates that could be added in as needed.
To achieve the toggle view, I worked with the artist to develop buttons and then wrote Javascript that would override the standard Bootstrap grid framework and change the grid to the selected view.
Result
Dalia Amara updated site
The new site is clean, art forward and responsive. The toggle view buttons have been helpful when reviewing images with clients, who prefer detail view, and gallerists or curators who like to see a series overview.