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.
UI Design, UX Design, Web Strategy
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:
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.
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
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.
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.
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: