Design

Overview

ODDS online, a financial options company, would like to bring the comfort of the well-known mobile-like interface to the size of the desktop webpage. The main goal of this project is to optimize the website to be more user-friendly by revamping the design to create a dock experience which pulls only needed data to view the selected chart. We hope to create an improved view of ODDS OptionApps that would be as user-friendly and familiar as the mobile operating system of an iPhone. With this improved design, we hope to be able to speed up the website by optimizing the code and removing excess data calls. Additionally, we would like to make it even more user-friendly by adding a color toggle option. Lastly, the customer would like us to add in a new chart and menu that goes along with it, if time allows. The last two steps are not currently built into this design because of time worry, but can be added in later if it looks like we will have time to complete them.

Environment

For the design part of the project, we currently plan to use bootstrap, CSS, and HTML to create the dock experience. Additionally, the back-end code will involve Javascript, JQuery, PHP, and MySQL to pull the chart information from the database the customer already has set up and display them properly to the user. We will be coding in a terminal environment by using ssh to access the code, and will update the display using the HTML page that was set up for us by the customer. Revision control will be done using svn.

Module Descriptions and Data Flow

Initial Screen

The initial screen the user sees. It only allows a ticker to be submit with a date. The menu system will be not be clickable until a submission occurs, upon which the Basic Chart screen is drawn.

Basic Chart

Shows the user a basic chart, specifically the Stock Price on Close, with options to change the chart type to candle stick, OHLC, etc. The Menu system will now be open to choose a specific chart. A user can also enter a new ticker, upon which they would end up at this same page but with the new ticker.

Display Specific Chart

Uses all of the information needed for a specific chart (via checkboxes, radio buttons) and calls the Highcharts.js API to create the specified chart.

Show Sub Menu

When a menu item in the navbar is clicked, a sub menu shows up listing options for that menu. If there is a nested sub menu, the contents are replaced with the new options along with a back button to go to the parent menu. Mainly this will be for the Charts menu however it will also be used for the other menu options once the customer deems necessary.


User Scenarios

When a subscriber of ODDS first logs into the site, they will:

  1. Select a ticker using a Search bar and GO button, for example, typing AAPL would bring up Apple, Inc.
  2. Once a ticker is selected, they will be brought to a main page with a default chart selected. This chart will show the general stock prices over a period of time, and will be the same chart displayed in the first image of Current User Screens (see above).
  3. The black bottom menu bar will be visible and give the user a chance to click whether they would like to view charts, ideas, strategies, news, or me.
  4. Once they select an option, and for our project we are only worrying about the charts option, the grey top menu bar will appear with multiple buttons. For the charts option, these buttons will include: back, probability, time series, technical analysis, volatility analysis, skew, term, and other.
  5. If the user were to click on volatility analysis, the volatility chart for the AAPL stock would appear, and there will be other checkbox options to appear slightly under the menu bar. These checkbox options would allow the user to select different time periods in which they want to view.
  6. The user can repeat this process many times, and each different selection will bring up a single chart matching their selection.

Starting Screens

As mentioned in the specifications, the image to the left shows the first screen on OptionApps.com immediately after searching a ticker. The menu on the right is shown after clicking the Menu button to the right of the logo. These are all the option toggles and selections that we hope to change to a dock-like menu that will be hosted on the bottom of the page at all times. This screen will see the most change with the menu changes, as well as the possible color changes. We hope to make this interface easier to use and less cluttered.

After selecting a ticker and scrolling past the first chart, there are many other visible charts before any options are toggled, such as these shown in the image to the right. What we hope to accomplish in this project is to only show one chart at once to reduce not only clutter on the screen, but also clutter in the database pulls. We also hope to come up with a more unique and efficient way to change the time period that currently rests above the charts.

Prototypes and Decided Design

The following are the two design prototypes for the menu bars we created. After meeting with the customer on February 22nd, it was decided that they would like a combination of both, with the black menu bar at the bottom with just buttons, and the top grey menu bar at the top filled with buttons which allow you to select a chart, and we will be moving forward with this design. It should be noted that even though we are creating the buttons for the entire menu, it has been agreed on that we are only responsible for implementing the functionality and optimizing the code of the "Charts" option. Also, the "Chains" menu option will be combined into the "Charts" menu and become a sub-option.

This initial prototype was trying to bring the iPhone like feel to the desktop by having a bottom dock, with folder like menu buttons that pop-up from the bottom. In the design we are moving forward with, the bottom black bar will remain, and will always be visible with a page scroll. This will host the category of items you would like to see, like charts. However, the pop-up menu and buttons will be changed.

This initial prototype was going a different route that we had discussed briefly that took advantage of the organization of drop down menus. The customer did not like the drop down menu specifically, but the row of buttons was well received. We will keep the row of buttons and move them to the grey menu bar at the top, and they will be used to select the specific chart the user wants, and the details they wish to apply. We will also be adding in a back button to this bar make it easier on the user to change charts.

After beginning the process to combine the two prototypes, the image to the left shows the idea we came up with after the customer's feedback. When the user clicks on the Charts button on the bottom, the menu will appear at the top, and when an option from here is clicked on, another menu appears in its place with further options, and so on, until a chart is selected with all preferences. The bottom menu bar will stay in place despite scrolling through the page.

Further view of these screens and the starting interface can be found at uksp2017.optionapps.com. The first prototype can be found at http://cs.uky.edu/~clke228/cs499/test.html. The combined prototype can be found at http://www.cs.uky.edu/~djwr223/CS499/bootstrap_navbar.php.

Design Considerations

Because of time constraints and work already done by the customer, it has been decided that our primary focus will be on implementing the new menu design, and focusing only on implementing and optimizing the "Charts" menu and all charts associated with it. Within our menu design, one thing we will be thinking about going forward is making sure it is tablet friendly, and that the color scheme is accessible, since there are users that are older (50+) and have iPads, thus making accessibility big for the customer. We want to make sure the site is easy to use and read, and because of this, we will look into possibly color coding the buttons with more bold colors, or changing colors to be more vision friendly. We are also using an HTML5 library (Bootstrap) to more easily get a tablet and desktop format.

Sizing Estimate

We estimate the menu bar design, including both menu bars, to take about 1,000 lines of code. This will include the bootstrap, CSS, and HTML design code as well as the Javascript code to make it functional. Additionally, the back-end code for the charts already exists at around 8,000 lines of code, but is very repetitive. We will be starting from scratch with our own back-end code, but will be pulling from the existing code to pull charts from the database. The new code, that will bring up one chart at a time, should take around 3,000 lines of code since we only need to implement the "Charts" functionality, and have a goal to optimize the code as much as possible.

Project Notes

Since the majority of the back-end code is already pre-existing, we will be sticking with the development languages used. However, we were given free reign to choose whichever languages we wanted for the menu bar design, and since we have the most experience with bootstrap, HTML, and CSS, we decided that would be best. Many of the design suggestions were provided by the customer who started with the idea of wanting the website to look like his iPhone, but it was a team effort to come up with two prototypes that were the practical application of the customer's wishes. It was finally the customer's decision to combine the two. We hope the result of our carried out design is a easier to use website for the users and more efficient code so that the website speeds up and the database pulls are minimized. To add a color toggle option and a new chart would be a bonus, as the customer understands the time commitment we have an put those lower on the priority list.