iShares.com

iShares.com Homepage

The key goals of the iShares.com Homepage are to promote marketing campaigns, educate users, and to quickly navigate to financial products.

These features are implemented in the top 3 sections on the page: Hero Banner for highlight promotions, Search to quickly find specific products, and Education for an overview of ETFs and how to trade them.

In order to provide this functionality in an easily-to-update manner, the page is built from easily-interchangeable modules that are swapped out or rearranged frequently around marketing campaigns, product launches, or new educational content.

Due to its partially-bespoke nature, our team wanted to minimize the effort required in modifying specific modules for each update which can be exacerbated by deploying similar updates across several other regional iShares.com sites.

Design System & Responsive Redesign

Q1 2020 saw over 4.5 million views to the US and European iShares.com websites. Coinciding with an 85% up-tick in traffic from 2019, an overhaul of the iShares.com Homepage became a top priority to align with our new Design System.

The iShares.com front page had recently undergone a redesign in 2019 to align with the new, bold iShares Visual Identity. However, because adaptive design principles were applied to develop iShares.com for specific Desktop and Mobile breakpoints, I was tasked with improving some of these limitations associated with a fixed 980px grid system.

In tandem with new BlackRock and iShares design systems being deployed, I applied the latest Responsive Design principles to the iShares Homepage. The most important undertaking was the redesign of all module layouts for 5 specific breakpoints across the device/viewport range, accounting for all major Desktop, Tablet, and Mobile device types. This included carefully documenting behaviors for how the modules should grow or shrink between breakpoints and how interactive elements should display or interact depending on device type (such as touchscreens).

This redesign effort also incorporated updated standards for scale, typography, and visual elements to create a consistent visual and interactive experience that mirrored that of the iShares content and tools pages. Any limitations or discrepancies were identified and used to enhance the evolving Design System component library.

Outcome Screener

In an effort to create more methods for visitors to find products based on their needs, a new Outcome Screener tool was developed to let users select a financial goal and work backwards to reach an ETF.

With the key interaction on the iShares.com Homepage being the ability to search for funds by name or ticker, I set up user tests to determine which functionality, placement, and interactions would be most beneficial on the Homepage.

Leveraging the Search module as the entry point, I established a "Search by Goal" dropdown to mirror the interactions and aesthetic of the Outcome Screener Tool with a minimal footprint. Toggling this dropdown menu allows users to select a goal (e.g. Go Sustainable) and jump directly to that filter on the Outcome Screener page with 1 or 2 interactions, regardless of device type.

Sustainability Initiative

In late 2019, BlackRock and iShares announced their commitment to sustainable funds. This Sustainability Initiative is their largest announcement in the past 20 years, with the goal of providing investors with more methods to invest their money based on their environmental, social, and governance (ESG) values.

As the Design Lead for this initiative, my focus was to design a net-new Homepage banner design for driving users to a new Sustainability Strategy Page. The Strategy Page was to be a single source of information for the new ESG products arriving on the market. The requirements for this page were to utilize the new responsive Design System standards (5 breakpoints and all device types), to provide educational videos and articles, and to list 3 groups of funds with direct links to the tickers in the context of the Compare Tool.

Knowing that we'd need to accommodate 3 very distinct categories of funds, the main dynamic content section was designed with expandable cards. This UI pattern provides a point of interest through iconography and allows the user to read the bulk of the fund category titles and descriptions without scrolling the page. The user can then choose to independently expand a particular group of funds depending on their interest. Once a card is expanded, direct links to each fund are a single interaction away, taking them straight to the Compare Tool where they are provided more financial data and context.

Since we knew the featured funds and their respective categories would change fairly frequently, the Sustainable Strategy page was designed and developed with this flexibility in mind, and all page elements consider responsive design standards and work across the full range of touchscreen and desktop devices.

The success of iShares' Sustainability Initiative both financially and socially is a testament to the massive undertaking, and the continued integrity of the accompanying designs a signal of the sound principles and process of the iShares Team.