Markets redesign

Project length

4 months

My role

Lead designer

Problem area

Clients find the current experience to be overwhelming and difficult to navigate. Additionally, our existing product doesn’t offer the breadth of tools users are accustomed to having on competitive products.

Solution

A restructured and redesigned experience that adds functionality while reducing cognitive load through the use of proximity and Mobile-specific offloading techniques.

Define

E*TRADE Mobile is an award winning app that aims to simplify investing and trading.

We offer our 2.5MM+ MAU a comprehensive financial product that offers investing, trading, banking and research services.

The product

The Markets tab is the 3rd most trafficked experience in the app. It’s highly visible and accessed via a bottom navigation tab.

The tab acts as a central hub for clients to research Stocks, Bonds, ETFs and Mutual Funds.

The experience

Problem area(s)

  • Clients (particularly new ones) have difficulty navigating and understanding the current experience.

  • Competitive products are significantly more robust, offering more insights, tools and raw data.

Design strategy

  • Restructure the IA/Navigation to be less daunting for new clients

  • Offer customization features that help clients narrow the broad scope of Markets data to suit their individual needs.

  • Conduct a competitive audit and fill feature gaps.

  • Thoughtfully integrate ET Web features to expand our overall Mobile offering.

The strategic approach

Design

We audited the ‘Markets’ experiences of 4 competitors to identify gaps and identify functionality that we could seamlessly integrate into the ETM experience.

Competitive analysis

Next, we made a list of all of the possible features we could design for and prioritized them based on our platform strategy, capabilities and competitive insights.

Feature prioritization

Knowing users found the existing IA confusing, we set out to restructure the page, starting with the Overview tab.

The goal here was to make more feel like less. To accomplish this, we applied the principle of ‘proximity’, grouping related content within condensed cards.

Information architecture

Starting with the ‘Indices and Yields’ card, we faced 2 major design challenges:

  1. A scalable selector that would allow us to fit the 7 different categories of indices/yields into a Mobile card.

  2. A pattern that enabled users to swap indices in and out of their view.

Design challenges & solutions

After a few rounds of iterations we decided to utilize a native menu for both interactions.

The indices would be edited using an ellipses icon, while the views could be changed by a trailing dropdown in the header.

This approach proved to be scalable while offloading unnecessary content.