TraderDashboards

Project Overview

TraderDashboards is a free analysis charting solution using real-time and end of day data for equity traders and investors.
As a standalone product TraderDashboards can be used in conjunction with an execution platform. TraderDashboards provides an informational edge that can enhance a traders existing strategy.

TraderDashboards assists in four real world trading and investing processes:

Pre-market multi-timeframe analysis of the major indexes to frame the market and create a bigger picture road map
Digging deeper and identifying strong sectors in a strong market and weak sectors in a weak market
Analysing specific stocks to potentially trade in line with the the above top down analysis
Monitoring live market data: quickly being able to identify intraday sentiment, overall market direction, breaking news and economic events

User Profiles:

The majority of the below market participants will typically manage individual accounts and be classed as non-professionals with their brokers. They will be largely discretional traders trading outright positions. The strategy styles will include a mix of trend and mean reversion plays across a range of time horizons from intra-day to quarterly and longer.

Investors managing a portfolio focused on sector ETF's and/or stocks executing via stocks, futures, options or CFD's. This participant will use technicals as more of a timing tool but also heavily lean on company fundamentals and have a view on the economic landscape with a typical time horizon ranging from months to years.
Swing traders managing a portfolio style trading account on sector ETF's and/or stocks. This participant will have a typical time horizon from days up to a month and will lean on technicals as their primary decision making tool but also confirm their trade ideas with fundamental and economic research.
Intra-Day traders managing a trading account largely holding one positon at a time and ending each trading session flat.
This participant rarely holds positions overnight and is active during the US open.
This trader can operate within a range of time frames within the day timeframe from scalping 5-10 ticks/cent to targeting intra-day swings of multiple points. These intra-day swings can be either break out trending plays or ranging mean reversion plays. This trader may execute via futures, CFD's or stocks.

Stakeholders and their business goals:

TraderDashboards owner:
- To get TraderDashboards out and being used by equity traders around the world
- To build a contact list of potential future customers and provide prospects easy access to contact the owner to discuss their own goals
- To promote professional trading processes and present market analysis tools in a more functional way
- To attract the interest of potential employers within the industry
Prospective clients:
- To custom TraderDashboards to fit their analysis style and methods
- To work with the developer to automate their trading strategy, create trade alerts, maybe connect to their broker account and execute, maybe even build a desktop or web app
- To create a proprietary analysis tool pulling in custom data and presenting it via a custom built UI
Potential employers:
- Brokers, trading and investment firms, trading platforms, charting package providers and financial news outlets would value having a developer on their team that also has a high level of experience in there industry and is able to understand the practical nature and application of the development targets

UX Design

User Stories

First Time Visitor Goals:

To understand what the website does and if they are interested within 10 seconds:
- To quickly and clearly absorb the hero section of the landing page and to understand that TraderDashboards is essentially a free charting analysis tool
- To then read the short introduction text (5 seconds) and understand the main purpose of the tool is to provide an informational edge to their trading
- To click on the short introduction video and get an overview of each dashboard
To get access to the trading dashboards and see what all fuss is about quickly and with minimal clicks:
- Dashboards tab located within the nav bar provides a dropdown menu taking them to the dashboard that most interests them initially
- The nav bar is present at the top of every page so visitors quickly learn how to go directly from one dashboard to another and also to any other page directly
To decide if TradeDashboards presents data in a way that provides value to their trading/investing operation and if they should bookmark a given dashboard:
- To test the functionality of the charts and undertake technical analysis Tasks
- To re-size the dashboards to fit their screen set-up and test how they can use multiple dashboards at a time
- To assess if the way the markets have been grouped and condensed provides a better use of screen real-estate than what they are already doing
- To identify if the data points are presented in a way that better promotes data chunking and the ability to absorb, interpret and act with confidence, making informed and timely decisions
Does TraderDashboards allow the trader to develop the building blocks of their trading edge, do they feel using the tool increases their edge in the market:
- Do the multi timeframe dashboards provide greater context to the way traders frame the market and identify significant levels to trade from and better prepare for the open
- Does the Intrady-Dash give the trader greater awareness of overall market sentiment and keep the trader up to date with price sensitive news and economic events

Returning Visitor Goals:

To subscribe and be the first to try new trading products as they are rolled out
To get in touch with the developer and discuss their own goals
To give TraderDashboards an ongoing test to see if they are able to develop a greater trading edge:
- To quickly access dashboards and begin their analysis process
- To get familar with the Intraday-Dash and how to quickly interpret the information and how to also utilise the economic and news feeds in their pre-market prep

Frequent User Goals:

For TraderDashboards to become a core part of a traders daily operational processes
- To quickly set up their screens to utilise mutiple dashboards during the analysis and planning preparation
- To become consistent with their pre-market prep and giving context to the price action against the backdrop of the bigger picture
- To become intricately familar with intermarket relatonships and when one market is stronger or weaker than normal, when one market is leading the pack and when markets are either directional or fighting aginst one another
- To be aware of the current overall market sentiment and whether it is a risk on session or risk off session and tracking what asset class funds are being put to work in
- To develop the skill of chunking a choice set of the above data points to create a holistic, real-time awareness that empowers a trader to take decisive action and seize the moment
- To add the informational edge from TraderDashboards to the traders existing price action strategy to increase win rate, increase the size of winners thus improving their risk/reward ratio, ultimately improving the traders overall expectancy

Features and Functions to be included in the Project

Hero Carousel at top of landing page
Introduction and demonstration videos on landing page
Testimonial carousel near the bottom of home page
Call to action contact and subscribe buttons at the bottom of home (landing page)
Contact and Subscribe pages to have a fixed background image
Contact page to have Google maps iframe
Charting widgets embedded from 3rd party sources
Live news feed widget from 3rd party news aggregator
Live economic calendar widget from 3rd party
Fully functioning email and subscribe forms with success message
Automated Lead capture process using Google Apps Mail to send new lead details to TraderDashboards email plus auto save in contact spreadsheet in Google sheets

Information Architecture

Nav Bar: User Guide link to pdf
Home:
- Hero Image with headline attention grabber
- Leading down to the introduction section with text and embedded video
- Leading on to demo video
- Below that a testimonial carousel with a couple of rotating testimonials
- After the carousel the call to action buttons for the contact and subscribe pages
- Above the footer the industry logos
- Directly beneath is the social media links then the footer
Intraday-Dash:
- Top 3 mini charts showing the Dollar index and risk off assets Gold and Bitcoin
- Middle 3 mini charts showing risk assets Crude oil, FTSE 100 and DAX
- Bottom 3 mini charts showing US indexes Russell 200, S&P 500 and Nasdaq 100
- Live stream economic calendar showing US, UK and European price sentsitive releases
- Aggregated live news feed showing price sensitive events
Index-Dash:
- Daily end of day charts for Brent oil, Gold, S&P, Russell, Dow, Nasdaq
- 15 minute derivative chart for each of the above showing 24 hour data
Sector-Dash:
- A daily chart for each of the US sector ETF's (using the SPDR ETF's as these are the most traded and products)
Stock-Dash:
- Daily and 15 minute chart with fully accissible features so users can change the product and undertake stock specific analysis

Interactive Elements

Main nav bar (top):
- Logo and Title on the top left of each page to be link for home page
- Home (landing page)
- Dashboards drop down menu:
  - Intraday-Dash
  - Index-Dash
  - Sector-Dash
  - Stock-Dash
- Contact
- Subscribe
- Help Guide (link to live pdf)
Nav bar (bottom):
- Copyright and Powered By text
Home:
- Top nav bar taking the visitor directly to any other page and dashboard (opening in new tab)
- Nav bar tabs to have subtle hover effects and clearly highlight the active page
- Hero section
- The introduction section has a video, click to watch.
- Below that the demonstration video, click to watch
- The section below that has the rotating testimonial carousel
- Then the call to action contact and subscribe section
Intraday-Dash:
- The navbar and footer are the same as the home page and for all pages
- The charts can be focused by zooming in and out by hovering over and using the scroll wheel
- The economic calendar can be viewed per day or week and scrolling to view more items
- The news feed can be targeted by clicking on the different tabs (stocks, economy etc) Users can click on the article to open full article in new tab
Index-Dash:
- Charts can be focused, indicators can be used, levels and trend lines can be used
Sector-Dash:
- Same as Index-Dash
Stock-Dash:
- Same as Index-Dash + Tickers can be changed. This means that users can analyse any product they choose and undertake multiple time-frame analsysis quickly and easily
Contact:
- From any page the visitor can click on the contact tab within the top nav bar and go to the contact page
- Background image
Subscribe:
- From any page the visitor can click on the subscribe tab within the top nav bar and be taken to the subscribe page
- Background image

Wireframes

Home Page
Intraday-Dash
Index-Dash & Sector-Dash The content on these pages share the same layout
Stock-Dash
Contact Page

Design

Color Scheme
- The main colours within the 3rd party charting widgets is white, green and red and these are not accessible to change. Therefore the site colour theme is designed around these core colours in order to produce a codehesive look and feel across the site. Because the dashboards incorporate many busy features the rest of the site is made with a focus towards looking simple, subtle and clean to create a balance.
Typography
- The font used by the 3rd party widgets is a paid for high value font, however Roboto provides a similar look and feel and works well with the subjbect and styling
Images
- The landing page to have a choice image relevant to the site content within the hero carousel. To be simple and set the stage for the main heading text overlay
- Both the Contact and Subscribe page to have a similar but different background image that is fixed allowing the heading and form content to scroll over the top. Again simple but impactful

Overall with the design, a focus during development is to maintain a clean and subtle look as the website is jam packed with user features that could become too busy very quickly

Development Stage

Project Management

Sprint 1 - Set-up and Template

Sprint 2 - Create trading dashboards

Sprint 3 - Create content for Home & Contact page

Create User Guide pdf and save to google drive, get public link and add to user guide link in the top nav bar to open a new tab and test
Create home page videos:
- Introduction
- Platform Demo
Create YouTube account and upload videos
Obtain testimonial from trader and create content for carousel
Identify Hero image and save
Identify Cantact & Subscribe page image and save
Milestone: All content for home and contact page now prepared for website

Sprint 4 - Complete Home and Contact page

Sprint 5 - Adding call-to-action functionality and sweeping up all remaining tasks

Bugs & Solutions:

Bug: The justify-content-center bootstrap class is not centering the navbar ul
- Solution I ended up setting the navbar float: none and pos relative, then setting the navbar-nav to pos absolute, right 20px. This worked well leaving the logo to the left and links to the right
Bug: The drop down menu links (background) flash boostrap blue when clicked grrr
- Solution Stackoverflow: .dropdown-item:active did the trick I could then pick any colour in the rainbow
Bug: collapsed menu li nav-items in the drop down menu do not cover the view port width
- Solution I had altered the styling when floating the ul to the right, After undoing these changes the collapsed menu worked again.
Bug: All of a sudden all the style for all charts on all pages stopped working and was not visible in the dev tools.
- Solution I had accidentally deleted a closing squiggly bracket when writing comments and this broke the below styles for the class="charts"
Bug: Home page - YouTube iframe overlapping content below, in a big way.
- Solution I ended up using media querries and using large amounts of margin-top for the below content. This doesnt feel like it should be the best solution but this has allowed me to manage the overlapping issue instead of actually fixing it. The home screen is fully responsive now.

Unresolved Bugs

Bug: Intraday-Dash - the economic calendar iframe is contained within div's but will only scroll on the Y axis even when it is contained within a div with overflow:scroll
- [] Solution Unresolved, but very usable even on mobile. Date, time and event are all visible.
Bug: README.md links to external url's even with target="_blank" still opens within the same tab (Have tried both mark down and mark up methods)
- [] Solution Unresolved, all links are now in markup using tags which include target="_blank". Visitors will for now right click 'open in new tab' Not great but not a show stopper
Bug Intarday-Dash line 317: The file passes the validator check but the closing comment of a 3rd party widget is not showing the normal green colour that comments do in my IDE. I cannot figure out what is causing this. The validator sees the comment as a comment and the code runs perfect in the browser. I have irregular colours within the 3rd party script tags on the line above which I feel may be causing this. Something I will revisit as I learn more about JS.

Note: Being my first project I began the project unknowingly using a mix of methods to position content, it was like putting pieces from two different puzzles together (containers and items). However as I struggled through I slowly began to understand more and more how Boostrap rows and columns work in conjunction with Flexbox and how other properties work when used with flexbox for example margin:auto; This is one of the biggest lessons learnt during the project that I will carry forward.

Final HTML & CSS Testing

HTML code Tested
CSS code Tested

Testing Business Goals & User Stories

TraderDashboards Owner Goals:

To get TraderDashboards out and being used by equity traders around the world:
- The website is ready to be distributed to market participants
To build a contact list of potential future customers and provide prospects easy access to contact the owner to discuss their own goals:
- Important By utilising Google Apps Mail in conjunction with leveraging a 3rd party form-submission-handler.js file both the contact and subscribe page forms are fully functional. They both provide a success message to the user keeping them on the page to continue on to another page plus all subscribe and email contact details are automatically saved to TraderDashboards Google Drive contact spreadsheet which also captures the values within the radial options. This is brilliant as the act of creating a database of prospective clients which is also a mailing list is automated. This has got to be the part of the project that I am most excited about.

To promote professional trading processes and present market analysis tools in a more functional way:
- The way the analysis dashboards are presented promotes a logical sequence which naturally assist the user in building a holistic picture of the current market environment. This also very much creates consistency in the process, which allows for skill development and the opportunity to become familar with intermarket relationships and when they change

Prospective Client Goals:

Prospects are using the site while at the same time considering if the developers at TraderDashbaords would make a good fit for the project they are planning for their own business:
- The website presents to prospects that not only can the developers at TraderDashboards build tools that they would like to build for themselves but also demonstrates that the developers also understand their trading and investment business and the industry. This should build confidence and rapport