PROBLEM

Not too easy, not too hard

Before we could begin researching ways to attract users to a new and bigger platform that complements the already existing mobile app, a critical problem needed to be addressed. Typically a web platform serves to proficient users who have good a working knowledge of stock trading. But through research we also found users who transition from a novice skill level to advanced skill level are likely to use the web platforms as an extension to support their portfolios built primarily on a mobile app.

Our challenge here is to define a foundational guideline for the platform by striking a perfect balance of not oversimplifying for pro users and not overcomplicating for intermediate users. To accomplish this, our first plan of action was to understand and prioritize what was most valuable to each user group and focus on that.

IDEATION

Form complements function

To push forward our ideation we set the driving statement as form complementing function. Building a whole host of tools and features helps users make better and more advanced trades, but what we found through research is that because a stock trading application is so technical and complex, users tend to miss out on small but costly details. With this in mind, we kept the technical functionality at the core and building a form around it.

In order to achieve this we ran through a couple hundred post it notes creating user stories to understand workflows. After synthesizing the user stories, we identified four broad sections to define the layout;

1. 1.

   A universal search query to show specified information

2. 2.

   Primary navigation

3. 3.

   Main content area (Stock details, portfolio, orders and positions, etc)

4. 4.

   Static watchlist area to track trends at anytime

Crafting the interface

Before I started visual exploration, I laid down some conditions that defined an effective user flow:

1. 1.

   The flow must bring an intense and focused concentration to the task.

2. 2.

   It should so absorbing that the user is never distracted with the next step or the previous step.

3. 3.

   It must intuitive that the user always know what to do next.

Considering these conditions as guidelines and user stories as reference, I began to explore different viewing patterns and built hierarchies of information through high level sketches.

From the ideas and directions decided from the sketches, I started to flesh them out into higher fidelity wireframes. Considering multiple factors related to business and technical functions, I took the following design decisions:

Sticky Watchlist

The watchlist contained vital pieces of information for users in their investing or trading decision-making process. So we talked to users to really understand what they are, how it’s useful and why they find it useful. The following insights helped inform my design rationale::

1. 

   Users create baskets of securities which are carefully picked based on unique themes, strategies and objectives. To get the best outcomes, advanced traders monitor these baskets regularly and use those insights for their buy and sell decisions. Allowing users to always have a view of these regularly tracked securities in a watchlist seemed like a must have.

2. 

   Seeing what is relevant is key for traders while building a watchlist, removing as much noise as possible.

3. 

   Making it easier to identify opportunities.With a watchlist, traders are able to easily identify trading opportunities, especially for short term traders.

The watchlist was built to support a lot of customizations. Many users requested to see the trends of market indexes at all times which let them gauge the overall conditions of the market. So we let users customize their watchlist view by allowing them to have any two indexes placed on top. Another feature that users wanted was the ability to quickly edit, create and navigate between watchlists.