Designing Data

OTC Markets Group's financial markets provide investors with the information necessary to intelligently analyze, value and trade over 10,000 U.S. and global securities. For well over a decade, OTC Markets had become the source for market data and trading of OTC securities. In 2015, recognizing that it’s platform was aging, OTC realized it had to design data better.

MY ROLE

I was the design lead, responsible for the
end-to-end process:
Discovery
Research
Requirements
Content Strategy
Design

TEAM

Bruce Ostrover, Tech Lead
Bobby Burns, Project Manager
Andrew Sohn, Product Manager
Yao Chen, Engineer
Frankie Pugilesie, Engineer
David Adler, Engineer
Chris Buryta, Engineer
Paul Cameron, Engineer
Sandaruwan Silva, Engineer
Douglas Nunes, Engineer
Annapurna Bikkina, Engineer
Stephen Enders, Engineer

PROBLEM

OTCMarkets.com has over 15 million page views per month with approximately300,000 unique visitors, many of these longtime, loyal users. A platform that had not been updated in a decade made new features laborious to roll out; the UI was outdated; there was duplicative content; and the site had become slow and clunky.

GOALS

Making Finance Modern

The goal was to create a modern platform where companies and investors could access the data they need to intelligently list and invest on the open market.

High level goals were to:

• Create a better resource for companies looking for information about joining one of OTC’s two premium markets, OTCQX or OTCQB
• Better meet the needs of our broker dealers and market data subscribers
• Improve site performance and usability
• Create a responsive website

Old Quote page

New Quote page

Old Services page

New Corporate Services page

DISCOVERY

Scoping Out the Competition

Looking at competitor sites like Nasdaq, NYSE, Bloomberg and Yahoo Finance, data was dense, cluttered and difficult to parse, and many looked dated.

I wanted the new OTC site to be modern and bold, and convey a sense of trust and knowledge. While displaying the right data was of the utmost importance, displaying the data beautifully was a close second for me.

1. NYSE; 2. Nasdaq; 3. Bloomberg; 4. Yahoo Finance

Design inspiration

Old Is New Again

The world of technology was changing, but the OTC investor was not. We needed to modernize our platform while staying attuned to our users.

A survey was sent to our user base to gain better insight into how they use OTC Markets and their pain-points. While the response was overwhelming (over 1,000 responses) and insights were useful, given scope and constraints, we were unable to conduct additional qualitative research.

For the most part, feedback from users aligned with our hypotheses:

• A majority of users use the site to access real-time quotes and trades
• Most users complained of the site being slow
• Most users cited the need to provide potential and existing investors with more analytics
• Many users said they would like a mobile app or mobile version of the site
  

I established four key personas: Individual investors (76% current user base); OTCQX, OTCQB, OTC Pink company rep (7% current user base); professional investors (5-9% current user base); and service providers (3-4% current user base)

SOLUTION

Scaling Down

Making a data-heavy site responsive. How do we display large amounts of data on small screens? Given the fact that 34% of users were accessing the site on mobile, this was essential.

The Quote section, which includes all pages within the /stock/symbol/ url structure, received ~ 93% of all page views. This includes pages such as: Quote, Company Profile, News, Research, Financials and Filings. This section contains the most dynamic data within the site and also contains the most business rules in relation to data display. How can we enhance this information for our users? What data is most useful for users and how do we display this in an elegant and intuitive way?

I made many sketches of the Quote page, which receives most of the site traffic. I refined these sketches over the course of the project, adhering to both user and business needs regarding what content and data should be displayed, and how it should be displayed.

Early iterations of the mobile Quote page

IDEATION & DESIGN

All About the Data

The site architecture was re-worked to align with core business priorities to improve the ease of navigation, streamline content to better serve our market data subscribers and for those looking to list on the OTC market, and enable for a responsive design. A responsive site that would work across all devices was a must with increased mobile usage and Google now ranking sites that are mobile-friendly. Since this was our emphasis, I took a mobile-first approach when designing.

The engineering team diligently recreated APIs that would pull in better data and faster. For months, I collaborated with the EVP Market Data on ways to better display data. To do this, we conducted an audit of what data was most essential. Data tables would reduce to four columns on mobile, deprecating data as screen size decreased.

I fastidiously worked with various stakeholders, including the CEO, CMO, EVP Issuer & Information Services, President of OTC Link, CFO, CTO, EVP Corporate Services & Sales, and General Counsel reworking content and refining the information architecture.

Sitemap with flows

Taking the Pain Out of Going Public

OTC Markets allows private companies to raise capital and provide liquidity for existing shareholders without the resource drain common in the typical IPO process. 

To create better informed and more efficient financial markets, OTC organizes securities into three markets based on the quality and quantity of information companies disclose: OTCQX (The Best Market), OTCQB (The Venture Market) and Pink (The Open Market).

Each market is branded with one of the three OTC brand colors: green, orange or pink. To further create a sense of trust, security and transparency in the market, this is carried throughout the site.

OTCQX Company Overview

OTCQB Company Overview

Pink Company Overview

The new Company section prominently features the stock symbol and value, and whether this value has increased or decreased. I created an Overview page, like a dashboard, which captures high-level company data, such as open/close data, real-time data, a chart of historical data, most recent trades, news, financials, and recently posted videos. Since OTC Markets values creating trust and transparency in the market, I added information in the right rail, which includes the market, badges, the Morningstar rating, and additional company securities.

Company Profile page

Each page of the website adheres to one of two templates: Data or Content, consisting of main page content and auxiliary content in the right or left rail. As a rule of thumb, components such as filters, page search or pertinent information that defines page hierarchy are contained in the left rail. Content that augments the page is contained in the right rail.

The new design is clean and streamlined, and optimizes for space, size, and typographic structure. This allows for the data to be front and center, while focusing the primary brand color as a clear call to action, making how to navigate and use the site more intuitive.

Market Data page - Quote

Content page - Corporate Services

Market Data page - Current Market

Content page - Glossary

I meticulously worked with our UI engineers to ensure that the layout was clean and concise at every breakpoint. Looking at other data-heavy sites, most did not include responsive data tables, so this was extra challenging.

Left to right: Menu; Market Data - Current Market; Corporate Services - When To Consider; Company Quote page

FURTHER INSIGHTS

Searching...

One of the biggest pain-points of the old site was lack of global search functionality. The goals and objectives of the global search were as follows:

• User experience
  Site Searches are considered to be critical to the customer and user experience. Many users will use the search box first, instead of trying to find what they are looking for through the site navigation. 
  

• Increased time on the site
  Users that become frustrated tend to leave the site quickly. The search box will engage users and increase time spent on the site.
  

• The opportunity to see what users are searching for
  Site search will allow OTC Markets to have a better understanding of what our users are coming to the site for. 
  

• A better mobile experience
  Mobile users tend to use the Search feature first as navigation is more difficult on mobile.

The new otcmarkets.com features global search and the ability to search within a page; improved quote search functionality with auto-suggest and partial match; and the addition of a quote snapshot window which allows the user to quickly access a quote from anywhere on the site.

Quote snapshot

Global search and search results

Quote search

Page search

The Launch

We launched the site in beta in January 2018. A dedicated feedback channel was established so we could collect feedback from users before officially launching.

While most users reacted very positively to the redesign, we did receive some insightful feedback. Feedback was prioritized and iterations were made prior to launch, and for phase 2 of the redesign.

Users found the mobile view of the Bid/Ask tabs used in the Real-Time data table confusing, not realizing they could switch content.

The Real-Time Quote table is split into two views on mobile: Bid and Ask. Using a content switcher instead of tabs made this more intuitive.

The quote snapshot was lost below the fold.

Anchoring the quote snapshot at the bottom of the screen so it was persistent and always accessible solved this issue.

For companies with multiple securities, the dropdown next to the symbol was not noticeable.

I created a section called Securities in the right rail for companies with multiple securities, surfacing the information, and making it more visible.

Initially, the badge section linked to the glossary, but users expressed disliking having to click-through to get information. As a solution, I created a tooltip on hover so information is accessible without leaving the page, or users can click-through to the glossary to get more information.

IMPACT

Results

The number of companies listed on the OTC exchange increased exponentially. Load time decreased significantly and the verified company profile rate increased, adding value and trust in the market.

• The market subscriber rate increased by 200%
• Load time was reduced to less than 3 seconds
• The site was streamlined from 140+ pages to less than 100 (excluding securities)
• Verified company profiles increased by more than 20%

NEXT STEPS

Listen & Learn

We continue to listen to users and collect feedback. Personalization is a key initiative for phase 2. Users will have the ability to create an account which will feature a dashboard, allowing users to save searches, save quotes to a watchlist, and save forms, in addition to other account information.