Morgan Stanley

The Challenge

The Outcome

It had been almost 15 years since Morgan Stanley had approached a re-design for their internal Structured Investments tool. They wanted to modernize it without making it feel completely different. They had employees who had been using the tool for years, so we didn’t want to create an unfamiliar product, instead focusing on how we can enhance the overall experience.

Instead of approaching the project as a complete overhaul, we looked to modernize components and brighten assets, rather than completely re-configuring structures, locations, and architecture. The result was creating a product that felt new and refreshed, but didn’t fundamentally change how the tool was used.

Project Scope

UI Design, UX Design, Web Strategy

The Approach:

Besides familiarizing ourselves with the product, its purpose, and its functionality, we sought to understand what the main components were and what items could be modernized through a refresh. We decided to start with the following elements:

  • Search Functionality
  • Filter Styling
  • Button Styling
  • Sort Iconography
  • Tab Styling
  • Section Styling
  • Dropdown styling

For each of these elements, we took their existing design asset, shared redesign options, and then annotated our reasoning for these options. Below are a few examples of this.

Search Functionality:

Improvements:

  • Now has a more prominent icon, directing the user's attention and improving recognition and accessibility
  • Now has an enlarged type area to improve legibility
  • Positioned more clearly within the site architecture so it can be easily found and used
  • Shortened the length of the box to feature an ideal 27 character input
  • Continued the use of incorporating a user prompt

Filters

Improvements:

  • Increased the text size to an ADA compliant size 14.
  • Added more spacing between the text and border of box for increased legibility.
  • Experimented with a variety of colors and shapes to find the best fit for Morgan Stanley's User Interface Brand System.
  • Added in options that include checkmarks to improve accessibility for users with decreased color vision. This adds two forms of visual confirmation.

Tabs

The next larger improvement we sought to re-design was the structure of the tabs of the experience. The existing system had multiple layers of tabs per page, making the user move through two different sections, physically segmented but not visually. We instead suggested segmenting by tabs, and then by filters.

Sections

  • We also suggested changing their sections from being a top navigation to being a side navigation.
  • Users scan up and down. Converting the tabs from a horizontal menu to a vertical bar will allow people to access what they're looking for quickly and more easily.
  • This also allows the addition of accordion menus to further separate content.
  • This menu can be easily expanded and closed to make room for more content.

The New Screens

After spending significant time analyzing, modernizing, and designing these new assets, we incorporated them into screen redesigns. While we can’t share the details of all of these pages, we can share a highlight:

More Projects

Let's work together.
Get in touch→